body { color:#333;
}

a, a.pink { text-decoration:none !important; color:#2f6bd9; }
a:hover, a.pink:hover { text-decoration: none; color: #259959; cursor:pointer; }
a:active { text-decoration: underline; color: #C0C; cursor:pointer; }
a.action-nounderline {text-decoration: none !important;}
a:visited { text-decoration:none; }
ul { list-style: none outside none; padding-left: 0;  margin: 0; }
p { margin:0; padding:0; }
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix::after { content: "."; display:block; line-height:0; height:0; clear:both; visibility:hidden; } 
::placeholder { color: #777777; }
.pointer { cursor:pointer }
.note { font-size: 12px; }
.noteLabel { font-size: 12px; color:#9c9c9c; }
.materialize-textarea { padding:0 !important; }
.hidden-large { display:none; }
.hidden-large2 { visibility:hidden }
.btn:hover { color:#fff; }
.material-icons { display:inline-flex; vertical-align:middle; }
.container { max-width:1280px; margin: 0 auto; z-index:-999; padding:0 16px; width:100% !important; }
.required { color:#F44336; }
.rowHighlight:hover, .popup .addr-box:hover { background-color: #ffffe0; cursor: pointer; }
.rowHighlightT:hover, .popup .addr-box:hover { background-color: #ffffe0; }
.btn-small {  height: 32px !important; line-height: 32px !important; font-size: 13px !important; padding: 0 12px !important;  text-transform: unset !important; }
.btn-popup { width:100% }
.tblcommon { border-spacing:0; border-collapse:collapse; }
.tblcommon td { padding:0; }
.mi { display:inline-flex; vertical-align:middle; }
.sqdarkgreen { background-color: #20663F; }
.sqdarkgreen-text { color: #20663F; }
.sqgreen { background-color: #259959; }
.sqgreen-text { color: #259959; }
.sqorange { background-color:#FF821C; }
.sqorange-text { color:#FF821C !important; }
.sqlightgreen, .bgSQLightGreen { background-color:#ABD406; }
.sqyellow,.bgSQYellow { background-color: #FFD412; }
.bgDarkTurquoise{background-color:#005F6B !important}
.bgTurquoise{background-color:#00B4CC !important}
.darkpink {background:#E73C37}
.darkpink-text {color:#E73C37}
.bgDarkMagenta{background-color:#AA0144 !important}
.bgMagenta{background-color:#DC0C78 !important}
.border-DarkMagenta{border:solid 1px #AA0144 !important}
.border-DarkMagenta.bg-opacity{background-color:rgba(170,1,68,0.01) !important;}
.border-Magenta{border:solid 1px #DC0C78 !important}
.border-Magenta.bg-opacity{background-color:rgba(220,12,120,0.01) !important}
/* Minimum width of 550px. eg MyCommissionCalculation. When got this class, the parent width follow it */
.minw {min-width:550px !important}
/* Common Font*/
.roboto-condensed {font-family: 'Roboto Condensed', sans-serif;}

/* Common Box */
.box-common { position:relative; overflow:hidden; } /* got streching */
.center-content { display:grid; place-items:center; }
.space-between {display:flex !important; justify-content:space-between}
.parent-flex-wrap-center {display: flex;flex-wrap: wrap;justify-content: center;}
.parent-flex-wrap-flex-start {display: flex;flex-wrap: wrap;justify-content: flex-start;}
.flex-column-box {display:flex; flex-direction:column; gap:16px;}
.flex-column-box.box-stretch-height { align-items: stretch;}

.alert-box { border:solid 1px #F21414; background-color:#FFE6E0; }
.font06rem { font-size:0.6rem}
.font10 { font-size:10px !important; }
.font12 { font-size:12px !important;}
.font14 { font-size:14px !important;}
.font18 { font-size:18px !important; }
.font20 { font-size:20px !important; }
.font24 { font-size:24px !important; }
.tiny300 { font-weight:300; }
.bold500 { font-weight:500; }
.bold700 { font-weight:700 !important; }
.uppercase { text-transform:uppercase; }
.userAvatar { width:50px; height:50px; border-radius:50%; }
.tiny300.greyText {color:#666 !important;}
.align-mi {vertical-align: middle;}
.align-right {text-align:right}
.force-align-left {text-align:left !important}
.align-items-center{align-items:center}
.no-wrap{white-space:nowrap}
.padding-left3{padding-left:3px;}
.padding-right3{padding-right:3px;}
.border-right1-transparent {border-right:solid 1px transparent}
.center-donuttext-position {position: absolute; top:2px; left: 0;}

#blurB, #blur { background-color:rgba(255,255,255,0.8); position:absolute; top:0; left:0; }
#blurB { position:fixed; z-index:999998; background-color:rgb(255,255,255); filter:alpha(opacity=50); opacity:0.5; top:0; right:0; width:100%; }
/* usually for box shadow */
.shadow {  -moz-box-shadow: 0px 0px 4px #000;-webkit-box-shadow: 0px 0px 4px #000;box-shadow: 0px 0px 4px #000;}

.popup .loadingBoxCenter { position:absolute; width:100%; display:grid; place-items:center; }
.popup .loadingBoxCenter #squareletLogo, .popup .loadingBoxCenter .sqloadingcenter { width:100px; height:100px; }

#processing, .popup { position:fixed;  z-index:9999; display:none; }
#menu-top a { color:#666; }
#menu-top a:hover { color:#C0C; }
#menu-top .icon-menuleft, 
#menu-top .icon-cart { display:inline-block; padding:0 10px; height:81px; line-height:81px; }
#menu-top .shoplogolink { display:block; margin:0 auto; max-width:218px; }
#menu-top .shoplogo { max-width:218px; display:block; margin:0 auto; }

/* Menu Left at My Account page */
.menuMy.collection .collection-item:hover {background-color:#ddd;}
.menuMy.collection .collection-item:active {text-decoration:none !important;}
.menuMy.collection .collection-item .mi:first-child {margin-right:13.2px;}
.menuMy .submenu {border-bottom: 1px solid #e0e0e0;}
.menuMy .submenu .collection-item-sub {display:block; padding:10px 20px 10px 58px;border-bottom: 1px solid #e0e0e0;}
.menuMy .submenu .collection-item-sub:last-child {border-bottom-width:0px;}
.menuMy .submenu .collection-item-sub:hover {background-color:#ddd !important;}
.menuMy .new { border-radius:3px; font-size:0.65rem; line-height:12px;height:14px;padding:0 3px 2px; display:inline-block }

.generaltitle { display:inline-block; font-size: 20px; font-weight: bold; line-height: 50px; padding:10px 0; }
.loginbar { min-height:45px; background-color:#e0e0e0; padding:8px 20px; font-size:18px;}

.footerline { background-color: #929292; height: 1px; padding:0 20px; }
.footer { text-align:center; }
.footer a { color:#555555; text-decoration: underline; }
.footer a:hover { color:#000000; }
.footer a:active { outline-style:none; outline-width :0; color:#000000; }

.specialnote { background-color: #fff2e8; padding:0 8px; border-radius:3px; border:solid 1px #FF821C; display:inline-block; color:#FF821C; }

@media screen and (max-width: 480px) {
    .container { padding:0 0px; }
    #menu-top .shoplogolink { max-width:120px; max-height:44px; text-align:center; }
    #menu-top .shoplogo { max-width:120px; max-height:44px;  }
    #menu-top .icon-menuleft, 
    #menu-top .icon-cart { height:46px; line-height:46px; }

}


.card { margin-top:0 !important; }
.prod-tag .material-icons { display:inline-flex; vertical-align: middle; font-size:18px; margin-left:-3px; }

.section-product { }
.section-product .grid-item { padding-left:30px; padding-top:30px; }
.section-product .section-photo { width:60% }
.section-product .section-price { width:40%; }
.section-combo .section-photo { width:50%; }
.section-combo .section-price { width:50%; }

/* -------------- Product Individual Page -------------- */
.gallery li img { max-height: 720px; max-width: 100%; margin:0 auto; }
.gallery li a { width:100%; display:block; text-align:center; }
.lSGallery { margin: 5px auto !important; }

.prod-sec-hdr { font-size:28px; margin-bottom:30px; border-bottom:solid 1px #999; }
.prod-sec { margin-bottom:80px; }
.prod-sec img { margin-bottom:10px; }
.prod-partition-line { margin:10px 0 20px; background-color:#ccc; height:1px; }

/* My Profile content */
.profile-menu-left {width: 300px; white-space: nowrap}
.profile-small { width:calc(100% - 300px); }
.profile-content { background-color: #fcfcfc; border: solid #e0e0e0 1px; min-height: 400px; }
.profile-content .title { font-size: 18px; font-weight:500; line-height:24px; height:24px; display: inline-block; color:#555; }

/* Reseller Recruitment CTA Box */
.reseller-recruitment-cta-wrapper {
   line-height: normal !important;
   white-space: normal !important;
   font-size:14px;
}


/* Important to switch to mobile menu */
@media screen and (max-width: 768px) {
    .visible-large { display:none; }
    .hidden-large { display:block; }
}

/* Important to switch to mobile menu */
@media screen and (max-width: 680px) {
    .section-product .grid-item { padding-left:0; }
    .section-product .section-photo { width:100%; }
    .section-product .section-price { width:100%; }
    .section-combo .grid-item { padding-left:0; padding-top:0px; }
    .profile-small { width:100%; }
    .btnContinue.continue { width:100%; }
    .btnContinue.btn-continue-step { width:100%; max-width:unset; font-size:16px !important; }
    .btnContinue.btn-small { width:100%; height:48px !important; line-height:48px !important; font-size:16px !important; }  /* temp for old CheckOut/Default.aspx */
}

.sq-shake { 
    display:inline-flex; animation:shake 5s infinite ease-in forwards;
}
/* Animate shaking text/icons : Continue buttons text at Shopping Cart */
  @keyframes shake { 
         0% { transform: translateX(0); }
         12% { transform: translateX(0); }
         13% { transform: translateX(-1px); }
         14% { transform: translateX(1px); }
         15% { transform: translateX(-1px); }
         16% { transform: translateX(1px); }
         17% { transform: translateX(-1px); }
         18% { transform: translateX(1px); }
         19% { transform: translateX(-1px); }
         20% { transform: translateX(1px); }
         21% { transform: translateX(-1px); }
         22% { transform: translateX(1px); }
         23% { transform: translateX(-1px); }
         24% { transform: translateX(1px); }
         25% { transform: translateX(-1px); }
         26% { transform: translateX(1px); }
         27% { transform: translateX(-1px); }
         28% { transform: translateX(1px); }
         29% { transform: translateX(-1px); }
         30% { transform: translateX(1px); }
         31% { transform: translateX(-1px); }
         32% { transform: translateX(1px); }
         33% { transform: translateX(-1px); }
         34% { transform: translateX(1px); }
         35% { transform: translateX(-1px); }
         36% { transform: translateX(1px); }
         37% { transform: translateX(-1px); }
         38% { transform: translateX(1px); }
         39% { transform: translateX(-1px); }
         40% { transform: translateX(1px); }
         41% { transform: translateX(0px); }
         100% { transform: translateX(0px); }
     }

/* Animate pulse button : Continue buttons at Shopping Cart */
.sq-pulse {
    overflow: visible;
    position: relative;
}

.sq-pulse::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: inherit;
    border-radius: inherit;
    transition: opacity .3s, transform .3s;
    -webkit-animation: sq-pulse-animation 5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    animation: sq-pulse-animation 5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: -1;
}

@keyframes sq-pulse-animation {
       0% {
         opacity: 1;
         -webkit-transform: scale(1);
                 transform: scale(1);
       }
       16% {
         opacity: 1;
         -webkit-transform: scale(1);
                 transform: scale(1);
       }
       44% {
         opacity: 0;
         -webkit-transform: scale(1.5);
                 transform: scale(1.5);
       }
       50% { 
         opacity: 0;
         -webkit-transform: scale(1.5);
                 transform: scale(1.5);
       }
       100% {
         opacity: 0;
         -webkit-transform: scale(1.5);
                 transform: scale(1.5);
       }
}

/* section-price : Spec */
.spec h1 { margin:0px; font-weight: normal; line-height:40px; font-size: 30px; padding-top: 0px; display:inline; }
.spec .pc { display:inline-block; background-color:#444; color:#fff; padding:0 5px; margin-right:5px; }
.spec .desc { font-size:12px; display:block; margin:5px 0 20px; }
/*.spec .price { float:left; margin:0; font-size:16px; font-family:Arial; } */
.spec .margin-promo { font-family:Arial; font-size:16px; }
.spec .margin-normal { font-size:24px; color:#900; font-weight:bold; font-family:Arial; }
.spec .margin-wholesale { margin-top:0px; }
.spec .lbl { color:#666666; font-weight:300; display:block; font-size:12px; text-transform:uppercase; }
.spec .priceR { float:left; width:50%; font-size:16px; font-weight:700; display:block; }
.spec .priceW { float:left; width:50%; font-size:24px; font-weight:700; color:#900; display:block; }
.spec .priceW .lbl { margin-bottom:-3px; }
.spec .priceW .strike { display:block; font-size:20px; color:#999 !important; line-height:26px; }
.spec .priceW .rl { display:block; line-height:28px; }
.spec .priceW .rl .rl-price { position:relative; display:inline-flex; }
.spec .priceW .rl .rl-price .off { position:absolute; bottom:-20px; right:0; }
.spec .priceBFG { font-size:10px; font-family:Arial; display:block; }
.spec .ng { margin-bottom:12px; }
.spec .strike { display:block; text-decoration:line-through; font-weight:normal; font-size:16px; color:#999 !important; }
.spec .off { font-size:14px; }

.spec ul.bullet  { margin:0; padding-left:15px; }
.spec ul.bullet li { padding:0; margin:0; }
.spec .pricetopay { line-height:24px; font-size:24px; color:#900; font-weight:bold; }
.spec .save { font-size:11px; line-height:14px; }
.spec .discountpercentage { font-size:2.2em; display:inline-block; line-height:30px; }
.spec .extraH {  } /* height:62px; */

/* Product Options */
.opW { background-color:#f5f5f5; padding:8px 10px; line-height:16px; }
.opW .q, .opW .w  { font-weight:bold; }
.opFr, .opW, .opN { margin-bottom:24px; }
.optLabel { font-weight:300; text-transform:uppercase; font-size:12px; }
.opBox { height:36px; line-height:36px; box-sizing:border-box; border:solid 1px #e0e0e0; color:#111; padding:0 10px 0 11px; display:inline-block; margin:5px 10px 0 0; }
.opBox:hover, .opBox.focus { background-color:#e6f5f7; border:solid 1px #d0d0d0; cursor:pointer; }
.opSelect { height:36px; line-height:36px; box-sizing:border-box; border:solid 1px #e47911 !important; color:#111; padding:0 10px 0 11px; display:inline-block; margin:5px 10px 0 0; 
            background-color:#ffeded !important; box-shadow: 0 0 4px 1px #fdabab; }
.opsv { font-weight:bold; }
.ofs { color:#fff; text-transform:uppercase; background-color:#aaaaaa; color:#fff; display:inline-block; padding:2px 12px 0; border-radius:2px; margin-bottom:24px; line-height:22px; font-size:14px; }
.ins { color:#fff; text-transform:uppercase; background-color:#259959; display:inline-block; padding:1px 12px 0; border-radius:2px; margin-bottom:24px; line-height:22px; font-size:14px; }

/* Bulk price display */
.spec .bulk-box { width:100%; }
.spec .bulk label,
.spec .bulk-strike label { display:block; min-height:55px !important; height:auto !important; background-color:#fcfcfc; border:solid 1px #ccc; margin-bottom:5px; padding:10px 12px; 
                    border-radius:2px; color:#555;  }
.spec .bulk .lvl,
.spec .bulk-strike { line-height:20px; font-size:16px; }
.spec .bulk .lvl span,
.spec .bulk-strike .lvl span { color:#b12704; }
.spec .bulk .lvl .priceBFG { display:inline-block !important; color:#888; }
.spec .bulk .lvl .lthr { color:#555; text-decoration:line-through; }
.spec .bulk .save { line-height:10px; font-size:11px; color:#888; margin-top:3px; }
.spec input[type="radio"]:checked + label { background-color:#259959; color:#fff; border:solid 1px #20663F; }
.spec input[type="radio"]:checked + label .lvl span { color:#fff; font-weight:bold; }
.spec input[type="radio"]:checked + label .save,
.spec input[type="radio"]:checked + label .lvl .priceBFG { color:#fff; }
.spec input[type="radio"] { display:none; }
.spec .bulk label:hover,
.spec .bulk label:focus { background-color:#e6f5f7; cursor:pointer;                                /* can be changed */ }
.spec .bulk-strike label { background-color:#eaeaea; text-decoration:line-through; position:relative; }
.spec .bulk-strike .so { position:absolute; right:0px; top:0px; font-size:11px; border-radius: 0 4px 0 0; }
.spec [type="radio"] + label:before,
.spec [type="radio"] + label:after { content: none; }

/* Quantity Entry */
.qty-entry { position:relative; display:block; position:relative; width:150px; border:solid 1px #e0e0e0 !important; }
.qty-entry .qty-adjust:hover { background-color:#e6f5f7; }
.qty-entry .qty-adjust { position: absolute; top:0; cursor:pointer; display:block; padding:0; border:0; text-align:center; overflow:hidden; height:3rem; line-height:3rem; width:43px; background-color:#f0f0f0; }
.qty-entry .qty-adjust span.material-icons { font-size:20px; }
.qty-entry .qty-minus { left:0px; }
.qty-entry .qty-plus { right:0; }
.qty-entry .qty-input { border:0 !important; padding:0; margin:0 !important; text-align:center; box-sizing:unset; }

/* Tag Features : Individual Page */
.tagGroupSalePoints {margin-bottom:0px; display:flex; justify-content:flex-start; align-items:center}
.tagGroupSalePoints .font12 {line-height:12px;}
.tagGroupSalePoints.flexend {justify-content:flex-end !important} 
.tagFreeShipping .tagfs { background:url('/svg/icon-freeshipping.svg') no-repeat; width:35px; height:35px; display:inline-block; margin-bottom:-12px }
.tagPreOrderAddOn {margin-bottom:8px; display:flex; justify-content:flex-start; align-items:center }
.tagPreOrderAddOn .font12 {line-height:12px;}
.IsPreOrder { background:url('/svg/icon-preorder.svg') no-repeat; width:35px; height:35px; display:inline-block;  }
.iconSquare35 {height:35px; width:35px;}

.tick { background:url('../../images/MasterImage(SBuy).png') no-repeat -453px -325px; width:16px; height:16px; display:inline-block; }
.iconWeChat { background:url('../../Images/MasterImage(SBuy).png') no-repeat -914px -325px; width:16px; height:16px; display:inline-block; }
.iconWhatsapp { background:url('../../Images/MasterImage(SBuy).png') no-repeat -898px -325px; width:16px; height:16px; display:inline-block; }
.iconRewardQualify { background:url('/svg/rewardpoint-whitebg.svg'); width:60px; height:60px; display:inline-block; }
.iconRewardNotQualify { background:url('/svg/rewardpoint-notqualify-redwhitebg.svg'); width:60px; height:60px; display:inline-block; }
.iconRewardPoints { background:url('/svg/rewardpoint-yellowbg.svg'); width:16px; height:16px; display:inline-block; }
.iconNote { background:url('/svg/note.svg') no-repeat; width:16px; height:16px; display:inline-block; }
.iconTick { background:url('/svg/tickBgCircleSQGreen.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconAffiliate { background:url('/svg/icon-affiliate.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconPayslip { background:url('/svg/icon-payslip.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconCommission {background:url('/svg/icon-commission.svg') no-repeat; width:24px; height:24px; display:inline-block;}
.iconReseller { background:url('/svg/directreseller.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconPerformance { background:url('/svg/icon-myperformance.svg') no-repeat; width:24px; height:24px; display:inline-block; } /* xfinal. same as iconMyPerformance svg file */
.iconLeaderboard { background:url('/svg/icon-myperformance.svg') no-repeat; width:24px; height:24px; display:inline-block; } /* xfinal. same as iconMyPerformance svg file */
.iconMyPerformance { background:url('/svg/icon-myperformance.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconMyProductPerformance { background:url('/svg/icon-ppplus-reseller.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconMyDownline { background:url('/svg/icon-mydownline.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconMyDownlineInvite { background:url('/svg/icon-mydownlineinvite.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconBank { background:url('/svg/icon-bank.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconPersonalDetail { background:url('/svg/icon-personaldetail.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconGeneralDetail { background:url('/svg/icon-generaldetail.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconChangePassword { background:url('/svg/icon-changepassword.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconMyPhoto { background:url('/svg/icon-myphoto.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconMyOrder { background:url('/svg/icon-myorder.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconMyDetail { background:url('/svg/icon-mydetail.svg') no-repeat; width:24px; height:24px; display:inline-block; }
.iconTransaction24 { background:url('/svg/transaction.svg'); width:24px; height:24px; display:inline-block; }
.iconWithdraw24 { background:url('/svg/withdraw.svg'); width:24px; height:24px; display:inline-block; }
.iconGroupSalePoints {background:url('/svg/icon-groupsalepoints.svg'); display:inline-block;}
.iconPayoutQualified { background:url('/svg/icon-payoutqualifier-qualify.svg'); display:inline-block;}
.iconPayoutNotQualified { background:url('/svg/icon-payoutqualifier-notqualify.svg'); display:inline-block;}
.iconPayoutGeneral { background:url('/svg/icon-payoutqualifier-general.svg'); display:inline-block;}
.iconGeneration {height: 16px;margin-left: 5px;}

/* Add To Cart */
.atc-wrap { text-align:center; margin-top:60px; position:relative; }
#lbAddToCart, #lbBuyNow { width:100%; height:56px; line-height:56px; font-size:18px; text-align:center; position:relative; text-transform:uppercase; font-weight:500; color:#333; }
.atc { display:inline-block; background:rgb(255,212,18); } 
.atc:hover, .atc.focus { background: rgba(255,212,18,0.7); }
.atc:active{ border-color:#aa8326 #bf942a #bf942a }
.atc-added { text-align:center; font-size:14px; text-transform:uppercase; position:absolute; top:-22px; right:0; width:100%; }
.atc-cir { background-color:#FFD412; width:10px; height:10px; text-align:center; line-height:10px; font-size:8px; border-radius:10px; box-shadow:0 0 8px #555; } 
.atc-loading { text-align:center; font-size:10pt; position:absolute; top:-20px; right:0; width:100%; }
.ptc { background:#FFD412; }
.ptc:hover, .ptc:focus { background: rgba(255,212,18,0.7); }
.atc-disabled { background:unset; color:#fff !important; background-color:rgba(0,0,0,.2) !important; }
.atc-disabled:hover { background:rgba(0,0,0,.2); cursor:text; box-shadow:unset; }
.atc-disabled:active { border-color:unset; }

/* Buy Now */
.bnc { display:inline-block; background:rgb(255,130,28); margin-top:16px; } 
.bnc:hover, .bnc.focus { background:rgba(255,130,28,0.8); }

/* GST include */
.gstincl { font-size:12px; display:block; margin:10px 0; text-align:center; }

/* Deal */
.countdown { margin-top:10px; padding-left:26px; height:28px; line-height:28px; white-space:nowrap; }
.countdown .num { font-size:18px; color:#ed1367; display:inline-block; }
.countdown .h { display:inline-block; margin-right:5px; }
.countdowndiscard { font-weight:500 !important; }
.countdowndiscard .h { display:inline-block; margin:0 5px 0 0; }

/* Promotion Countdown */             
.spec .margin-promo .cdf { margin-bottom:5px; padding-left:1px; }
.cdf { font-size:12px; }
.cdf .countdown { background-image:none; margin-top:0; padding-left:0; height:unset; line-height:unset; }
.cdf .countdown .num { color:inherit; font-size:inherit; }     

/* Special Offer */
/* .sof-ind { background-color:#c2272d; border-radius:2px; margin-bottom:1rem;
       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2); position:relative; }
.sof-ind .sof-content { min-height:139px; }
.sof-ind .sof-title { text-align:right; padding-right:20px; font-size:30px; color:#fff; line-height:80px; }
.sof-ind .line { height:1px; background-color:#fff; margin-left:139px; }
.sof-ind .sof-condition { text-align:right; padding-right:20px; padding-bottom:10px; padding-top:10px; font-size:14px;  color:#fff; }
.sof-ind .sof-footer { background-color:#720505; border-radius:0 0 2px 2px; padding:0 20px; color:#fff; font-size:14px; line-height:30px; }
.sof-ind .sof-footer .sof-countdown { }
.sof-ind .sof-footer .sof-countdown .cdf { display:inline-flex; font-size:14px; }
.sof-ind .sof-footer .sof-countdown .cdf .h { display:inline-flex; margin:0 4px 0 1px; }
.sof-ind .sof-footer .sof-countdown .cdf .material-icons { font-size:16px; display:inline-flex; vertical-align:middle;  margin-right:3px; margin-top:7px; }
.sof-ind .sof-footer .sof-countdown .cdf .countdown { display:inline-flex; margin-left:3px; }


@media screen and (max-width: 560px) {
    .sof-ind .sof-title { line-height:34px;  padding:6px 10px 6px 139px; font-size:28px; }
    .sof-ind .sof-condition { padding-left:50px; padding-right:10px; }
    .sof-ind .sof-footer { padding-right: 10px; } 
}

@media screen and (max-width: 380px) {
    .sof-ind .sof-title { line-height:34px;  padding:6px 10px 6px 139px; font-size:22px; }
} */

.containersof { max-width:1180px; margin: 0 auto; z-index:-999; padding:0 30px; }
.sofcd { float:right; }
.sofcd .cdf { font-size:16px; }
.containersof .material-icons { display:inline-flex; vertical-align:middle; margin-right:3px; }

/* Shopping Cart */
.cart-qty { position:absolute; top:3px; left:0px; min-width:20px; padding:0 3px; height:20px; line-height:16px; text-align:center; 
            font-size:0.75rem; background-color:#fff; color:#259959; border-radius:50%; border:solid 2px #259959; }
.cart-qty-changed-alert {padding:0 5px; border-radius:3px;border:solid 1px #F44336; margin-bottom:3px; padding-bottom:2px;}
.cart-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.trcombo { padding:10px; border-bottom: solid 1px #d3d3d3; }
.trcombo .item { float:left; width:calc(100% - 150px); }
.trcombo .item .options-style { border-radius:3px; padding:0 4px;}
.trcombo .pts .iconRewardPoints { margin-bottom:-3px; }
.trcombo .td1 { float:left; }
.trcombo .td2 { float:left; padding-left:10px; width:calc(100% - 150px); }
.trcombo .cpn:hover, .trcombo .cpn:focus { text-decoration:underline; cursor:pointer; }

@media screen and (max-width: 680px) {
    .trcombo .item { float:none; display:block; width:100%; }
    .trcombo .td1 { float:none; display:block; }
    .trcombo .td2 { float:none; padding-left:0; display:block; width:100%; }
}

/* Cart Title */
.cartTitle { background-color:#dadbdb; min-height:36px; border-radius:5px 5px 0 0; border:solid 1px #cccccc; }
.cartTitle .icoCartBar { color:#999 !important; font-size:36px; margin:1px 10px 0 !important; }
.cartTitle .bar { display:inline-block; color:#333333; font-size:1.1857142857em; line-height:37px; position:relative; font-family:'Roboto Condensed', sans-serif; }
.cartTitle .step { color:#888888; font-size:12pt;text-transform:uppercase}
.cartTitle .right { line-height:37px; }
.cartTitle .right a { text-decoration:none;  font-size:12px; display:block; padding:0 10px;  }
.cartTitle .right .material-icons { font-size:16px; display:inline-block; margin-top:-2px; }
.cartTitle .right .edit-text { display:inline-block; padding-left:5px; }

/* Summary MyPerformance */
#divMyPerformance .card-summary { padding:0; margin:0.5rem 0.25rem; }
#divMyPerformance .card-summary .card-content { padding:0px; }
#divMyPerformance .card-summary .card-content .card-title { line-height:20px; font-size:12px; text-align:center; font-weight:300; padding:3px 0; margin-bottom:0; text-transform:uppercase; }
.card-summary .card-tbl { display:table; margin:0 auto; }
.card-summary .card-tbl .cell { display:table-cell; vertical-align:middle; } 
.card-summary .card-footer { text-align:center; font-size:12px; line-height:20px; }
.cell-month-box { padding:3px 8px; text-align:right; }
.cell-month { line-height:24px; font-size:18px; }
.cell-lbl { font-size:12px; font-weight:300; line-height:14px; }

.card2 { width:50%;float:left; }
.card3 { width:33.33%; float:left; }
.card3 .middle { margin-left:0.5rem; margin-right:0.5rem; }

@media screen and (max-width: 768px) {
    .cartTitle .right .edit-text { display:none; }
    .hidden-small { display:none; }
    .hidden-large2 { visibility:visible; }
    .card2 { width:100%; float:none; }
    .card3 { width:90%; margin:0 auto; float:none; }
    .card3 .card { margin-bottom:0.5rem; }
    .card3 .middle { margin-left:0; margin-right:0; }
    .summary-footer { width:90%; margin:0 auto; }
}
@media screen and (max-width: 410px) {
    .summary-footer .left { padding-top:10px; }
}

@media screen and (max-width: 400px) {
    .cartTitle .bar { font-size:15px; }
}

.cart .cartHdr { border-bottom:solid 1px #d3d3d3; background-color:#f0f0f0; min-width:320px; padding:5px 10px; font-weight:bold; font-size:12px; }
.cart .cshdrprice { display:inline-block; width:100px; padding-right:20px; } /* for 2 columns hdr of Reseller Level prices */
.cart .tr { padding:10px; border-bottom:solid 1px #d3d3d3; }
.cart .tr .item { min-width:300px; }
.cart .tr .item .options-style { border-radius:3px; padding:0 4px;}
.cart .details { }
.cart .details .pn, .cart .details .pn2 { color:#333; font-weight:500; font-size:1em;  }
.cart .tr .details .pn:hover { color:#000; text-decoration:underline; cursor:pointer; }
.cart .group { float: right; margin: 0 0 0 20px; font-size:8pt; }
.cart .group .qty, .cart .group .pts { text-align:right; color:#777777; }
.cart .cqty { position:relative; height:70px; width:52px; display:inline-block; }
.cart .cqty input { text-align:right; width:50px; font-size:13px; text-align:center; margin-bottom:0;  border:solid 1px #cccccc; background-color:#fff; }
.cart .cqty .cmax { position:absolute; top:22px; right:2px; color:#ff0000; font-size:11px; white-space:nowrap; display:none; }
.cart .cqty .ucq { display:none; cursor:pointer; font-size:12px; margin:5px 0 0 0; text-align:center; width:52px; position:absolute; bottom:0; right:0; }
.cart .pts { line-height:16px; }
.cart .pts .iconRewardPoints { margin-bottom:-4px; margin-left:2px; }

.cart a { cursor:pointer; }
.cart a.sRequest:hover { background-color:#fcf7bb; }
.cart a.sRequest { color:#555555; display:inline-block; line-height:16px; }
.cart a.sRequest .material-icons { font-size:16px; display:inline-block; vertical-align:middle; }
.cart .option { font-size: 8pt; color:#777777; }
.cart .action { float:right; margin:15px 0 10px; color:#9c9c9c; }
.cart .dustbin .material-icons { color:rgba(0,0,0,0.4); display:inline-block; vertical-align:middle; font-size:20px; }
.cart .requestbox { background-color: #eaeaea; padding: 5px; margin:5px 0 5px; font-size:8pt; min-width:200px; }
.cart .requestbox .answerpanel { position:relative; } 
.cart .requestbox textarea { min-width:170px; width:90%; height:50px; resize:none; border:solid 1px #cccccc; padding:2px; background-color:#fff;}
.cart .requestbox a.cross { position:absolute; top:0px; right:-22px; }
.cart .requestbox .q { display:inline-block; width: 20px; }
.cart .requestbox .a { padding-left:20px; position:relative; }
.cart .cdel { display:block; }
.cart span.price, .cart span.priceRS, #lblTotal1, #lblSubTotal1 { color:#900; font-weight:bold; }
.cart span.price, .cart span.priceRS { display:inline-block; width:100px; text-align:right; padding-right:14px; }
.cart .strike { text-decoration:line-through; color:#999 !important; }
.cart .splitorL { border-left:solid 1px #d3d3d3}
.cart td { border-bottom: solid 1px #d3d3d3; padding-bottom:0; }
.cart .btnHelpS { margin-bottom:-4px; }
.cart .et, .cart .fs { font-size:11px; color:#259959; }
.hidetouchmenu {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* hide HTML 5 input type="number" arrow up down */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.shadow-processing {
    position: relative;
    background-color: #fcf7bb;
    text-align: center;
    padding: 5px;
    -moz-box-shadow: 0px 0px 8px #000;
    -webkit-box-shadow: 0px 0px 8px #000;
    box-shadow: 0px 0px 8px #000;
}
.cart-alert { min-width:300px; max-width:400px; }
.f-processing { max-width: 400px; min-width:300px; border: solid 5px #000; padding:16px; text-align:center; overflow:hidden; }
.f-processing .f-loadinglogo { margin:0 auto; height:50px; text-align:center; }
.f-processing .f-loadinglogo #squareletLogo { width:50px; height:50px; display:inline-block; }
.f-shadow { box-shadow: 0px 0px 12px #000; }
.f-container { padding: 5px; text-align: center; background-color:#000000; overflow:hidden; }
.f-container .f-title { font-size:26pt; display:inline-block; text-align:center;  }
.f-container .inner { background:#ffffff url('../../Images/popPanel-Bg.png') no-repeat; position:relative; }
.f-container2 { border:solid 5px #000; text-align:center; background-color:#fff; width:320px; padding:10px 5px; }
.f-container2 .f-loadinglogo { margin:0 auto; height:50px; text-align:center; }
.f-container2 .f-loadinglogo #squareletLogo { height:50px; width:50px; display:inline-block; }
a.closePanel { z-index:999; position:absolute; top:-15px; right:-15px; background:url('../../Images/close.png') no-repeat; width:30px; height:30px; display:inline-block; }
.rounded-circle {border-radius:50%;}
.rounded-corners10 { border-radius: 10px; }
.rounded-corners5 { border-radius: 5px; }
.rounded-corners2 { border-radius: 2px; }
.f-modalBackground { background-color:rgba(255,255,255,0.8); }

/* Reseller Level Cart Msg */
#divRLCartMsg { padding:0 10px; text-align:right; font-weight:normal; }
#divRLCartMsg .rl_box, .nqtf { display:inline-block; border-radius:3px; padding:6px 10px; }
#divRLCartMsg .qualify, .qualify { background-color:#ABD406; margin-top:5px;border: 1px solid #259959; box-shadow: 0px 0px 8px #259959;  }
#divRLCartMsg .notqualify, .notqualify { background-color:#ffdfdf; }
.popupNotQualifyMsg { padding:10px 0 20px 20px; }
.popupNotQualifyMsg ul li { list-style-type:disc; }

/* Rewards */
.reward-qualify-bg.box-common { flex: 1 1 360px; }
.reward-notqualify-bg.box-common { flex: 1 1 360px; }
.reward-notcollected.box-common { flex: 1 1 360px; }
.reward-box { margin: 0 auto; width:300px; padding:10px; }
.reward-box .cell  { display: table-cell; vertical-align: middle; }
.reward-qualify-bg { background-color:#ffaf00; border-radius:5px; margin-top:16px; }
.reward-notqualify-bg, .reward-notcollected { background-color:#DB3535; border-radius:5px; margin-top:16px; }
@media screen and (max-width: 480px) {
    .reward-qualify-bg, .reward-notqualify-bg, .reward-notcollected { margin:0 10px; }
}

/* Select Shipping Address Country */
.selectcountry, .selectstate { float:left; border: 1px solid #ccc; background-color:#eaeaea; color:#333; display:inline-block; width:calc(50% - 20px); text-align:left; border-radius:5px; padding:8px 10px; margin:10px; transition:all 0.5s ease-out 0s;}
.selectcountry:hover, .selectstate:hover { border: 1px solid #259959; box-shadow:0px 0px 12px #259959; color:#333;}
.selectcountry.selected, .selectstate.selected {border: 1px solid #259959; background-color:#ABD406; box-shadow:0px 0px 8px #259959;}
@media screen and (max-width: 500px) {
    .selectcountry, .selectstate { width:calc(100% - 20px); }
}
/* Shipping Option */
.sop { display:flex; flex: 0 1 568px; justify-content:space-between; background-color: #eaeaea; border:solid 1px #ccc; padding:12px 8px; align-items:center; margin:10px auto; font-weight:normal; 
       width:100%; max-width:568px; position:relative; transition: all 0.5s ease-out 0s; border-radius:5px; }
.sop .price { color:#900; font-size:16px; font-weight:bold; padding-right:5px;}
.sop .iconTick { visibility:hidden; }
.sop .tick { position:absolute; top:14px; right:8px; }
.sop:hover, .sop:focus { border: 1px solid #259959;box-shadow: 0px 0px 12px #259959; cursor:pointer; }
.sop-selected { border: 1px solid #259959; background-color:#ABD406; box-shadow: 0px 0px 8px #259959; cursor:pointer; }
.sop-selected .iconTick { visibility:visible !important; }
.sop .free { color:#555; font-size:13px; font-weight:normal; }
.sop-selected .free { color:#259959; font-weight:bold; }
.sop.disabled { background-color:#b9b9b9; border:solid 1px #999; }
.sop.disabled:hover, .sop.disable:focus { cursor:text; border: 1px solid #999; box-shadow:none;}
.sop.disabled b { text-decoration:line-through; }
.sop.disabled .iconTick { visibility:hidden !important;}
.sop .c3 { display:flex; height:24px; align-items:center; }

/* Special Offer */
.sol { background-color: #de1b1b; color:#fff; padding:5px 10px; min-height:64px; line-height:16px; margin:0 10px 10px; font-weight:normal; position:relative; }
.sol .sov { float: right; line-height: 54px; font-weight: bold; padding-left:20px; }

/* Extra row */
.etRow { text-align: right; line-height: 40px; border-bottom: solid 1px #d3d3d3; }
.etRow .lbl { display: inline-block; text-align: right; }
.etRow .num { display: inline-block; width: 130px; text-align: right; padding-right: 10px; }


.shipSubTitle { background-color:#333; color:#fff; padding:5px 10px; padding-left:13px; font-family:'Roboto Condensed', sans-serif; }
.shipSubTitle2 { padding:16px 0.75rem; padding-left:13px; font-family:'Roboto Condensed', sans-serif; border-top:solid 1px #d3d3d3; }

.cartaddress { width:50% }
.cartpostcode { margin-top:0px; }
.addrState .ddl { width:100%; max-width:240px; }
.addrState .select-dropdown { margin-bottom:0 !important; }
.addrState .select-dropdown.invalid { border-bottom: 1px solid #F44336; }
@media screen and (max-width: 480px) {
  .cartaddress { width:80% }
  .cartpostcode { margin-top:30px; }
  .changecountry { display:block; width:100%; padding-left:44px; }
}
@media screen and (max-width: 359px) {
    .sf1 { width:80px !important; }
    #lblShippingFeeMsg1 { font-size:12px !important; text-overflow: ellipsis; overflow:hidden; width:auto !important; }
}

/* Subtitle */
.generalSubTitle {padding:16px 0;}
.generalSubTitle .sub { font-family:'Roboto Condensed', sans-serif; font-size:16px; font-weight:700; line-height:24px;}
.generalSubTitle .sub-note, .sub-note { font-size:11px; color:#888; }

.header-flex-wrapper {display:flex;justify-content:flex-start; align-items:center;}
.header-flex-wrapper .iconGeneration { height:18px;}
.header-flex-wrapper .spacing { display:inline-block; width:10px;}

/* Commission Transaction */
.soldBy .generation-wrapper {height:16px; width:50px;}
.soldBy .generation-wrapper img {margin:0 auto !important; display:block; max-width:50px; width:100%;}
.soldBy .userAvatar { display:block; }
.soldBy .userAvatar.worker { border:solid 5px #259959;}
.soldBy .userAvatar.customer { border:solid 5px #5370FF;}
.worker-buyer-wrapper {display:flex; flex-direction:column; position:relative; width:80px; height:50px; justify-content:center;}
.worker-buyer-wrapper .worker-arrow {background:url('/svg/icon-affiliate-arrow.svg') no-repeat; width:70px; height:25px; background-position:center; margin:0 5px;}
.worker-buyer-wrapper .affiliate-code {position:absolute; left:0; bottom:0;width:100%;}
.worker-buyer-wrapper .affiliate-code.flex-wrapper {justify-content:center;}
.worker-buyer-wrapper .ico-text { height: 14px; line-height: 14px; font-size:7px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.soldBySmall { display:none; }
@media only screen and (max-width: 500px) {
    .soldBy { display:none; }
    .soldBySmall { display:block; }
    .soldBySmall .generation-wrapper {height:14px; width:36px;}
    .soldBySmall .generation-wrapper img {margin:0 auto !important; display:block; height:14px; max-width:36px; width:100%;}
    .soldBySmall .userAvatar {height:36px; width:36px;}
    .soldBySmall .userAvatar.worker { border:solid 3px #259959;}
    .soldBySmall .userAvatar.customer { border:solid 3px #1359d4;}
    .worker-buyer-wrapper {width:60px; height:40px;}
    .worker-buyer-wrapper .worker-arrow {width:52px; height:18px; margin:0 3px;}
}

/* Shopping Cart : Step 2 : Shipping Address */
.mimicTextboxStyle { display:block; width: 100%; color:#333; border-bottom: 1px solid #9e9e9e; height:3rem; line-height:3rem; font-size:16px; }

/* Shopping Cart : Step 3 : Payment Method */
.pmSubTitle-frame { padding:16px 0.75rem; border-top:solid 1px #d3d3d3; }
.pmSubTitle-frame .sub { font-family:'Roboto Condensed', sans-serif; font-size:16px; font-weight:700; line-height:24px; }
.pmSubTitle-frame .sub-note { font-size:11px; color:#888; }
.pmSubTitle-frame .pmPF { line-height:24px; }

/* Shopping Cart - Popup to choose prev. address */
.popup .popT { color:#333333;  font-weight:bold; font-family:Arial; font-size:12pt; line-height:20px; padding:20px 20px 0; }
.popup .popC { height:260px; padding:0 0.75rem; margin:0 0 10px; overflow:auto; }
.popup .addr-box, .popup .addr-box-noaddr { background-color:#f0f0f0; border:solid 1px #ccc; padding:8px 10px; min-height:10px; line-height:20px;  margin-bottom:10px; position:relative; }
.popup .addr-box .date { position:absolute; top:5px; right:8px; color:#888; font-size:8pt; }
.popup .addr-box:hover { background-color: #ffffe0; cursor: pointer; }
@media screen and (max-width: 680px) {
.popup .addr-box .date { display:none; }
}

/* Shopping Cart - Payment Method */
.pMethodBox { border: solid 1px #cdcdcd; padding: 0px; background-color: #ffffff; height:390px;
              -moz-transition: all 0.5s ease-out 0s;
              -webkit-transition: all 0.5s ease-out 0s;
              -o-transition: all 0.5s ease-out 0s;  }
.pMethodBox2 { border: solid 1px #cdcdcd; padding: 5px; background-color: #ffffff; height:154px;
              -moz-transition: all 0.5s ease-out 0s;
              -webkit-transition: all 0.5s ease-out 0s;
              -o-transition: all 0.5s ease-out 0s;  }
.pMethodBox:hover, .pMethodBox:focus {
              text-decoration:none;
              border: 1px solid #259959;box-shadow: 0px 0px 12px #259959; }  
.pMethodBox-selected { text-decoration:none; border: 1px solid #259959;box-shadow: 0px 0px 12px #259959; }
.pPaymentTitle { border-bottom: solid 1px #cdcdcd; padding: 10px; font-weight:bold; background-color:#f0f0f0; border-radius:10px 10px 0 0; } 
.pMethod { position:relative; border-radius:5px; border:1px solid transparent;
           -moz-transition: all 0.5s ease-out 0s;
           -webkit-transition: all 0.5s ease-out 0s;
           -o-transition: all 0.5s ease-out 0s; }
.pMethod:hover { background-color:#eaeaea; border: 1px solid #259959; box-shadow: 0px 0px 12px #259959;}
.pMethod input[type="radio"] { cursor:pointer; margin-top:-2px; display:none; }
.pMethod .iconTick { display:none; position:absolute; top:-10px; right:-10px; z-index:10; }
.pMethod-selected { background-color:#ABD406 !important; border: 1px solid #259959;box-shadow: 0px 0px 12px #259959; }
.pMethod-selected .iconTick { display:block !important; }
.pMethod .pIcon { display:block; }
.pBT { float:left; text-align:center; padding:16px 16px; }
/* Manual Payment Box*/
#trPMManual .pIcon { width:200px; }
#trPMManual #divBankAcc { width:calc(100% - 200px); padding-left:16px; }
@media screen and (max-width: 680px) {
    #trPMManual .pIcon { width:121px; }
    #trPMManual #divBankAcc { width:calc(100% - 121px); padding-left:16px; }
}
@media screen and (max-width: 460px) {
    #trPMManual .pIcon { width:100px; }
    #trPMManual #divBankAcc { width:100%; padding-left:0; padding-top:10px; }
}

.frame-center2, .frame-center3 { padding:0 0.75rem; }
@media screen and (max-width: 692px) {
    .frame-center2 { width:310px; padding:0; margin:0 auto; }
    .frame-center3 { width:485px; padding:0; margin:0 auto; }
}
@media screen and (max-width: 539px) {
    .frame-center3 { width:330px; padding:0; margin:0 auto; }
}

#pmCreditCard, #pmPaypal, #pmMaybank, #pmCIMB, #pmAMBank, #pmPublic, #pmHongLeong, #pmRHB, #pmUOB, #pmRakyat, #pmIslam, 
#pmAffin, #pmStandardChartered, #pmOCBC, #pmBSN, #pmManual, #pmAccountBalance { display:block; }


/* My Account - Purchase Status */
#divChooseStatus { display:none !important; }
.lineorderstatus { display:none; }
.pur-title-status { display:inline-block; width:120px; border-radius:3px; text-align:center; font-size:14px; font-weight:bold; color:#fff; line-height:28px; margin-left:10px; }
.pur-frame { margin:10px 0 0; border-top:solid 1px #eaeaea; border-bottom:solid 1px #eaeaea; background-color:#f9f9f9; text-align:center; }
.pur-frame .pur-opt { display:inline-block; margin:10px 3px; line-height:30px; min-width:134px; width:14%; border-radius:3px; cursor:pointer;
                      text-align:center; font-size:13px; font-weight:bold; color:#ffffff; text-decoration:none; 
                     -moz-transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; }


@media screen and (max-width: 1046px) {
    .pur-frame .pur-opt { font-size:12px; width:110px !important; min-width:110px; }
}

@media screen and (max-width: 925px) {
    .pur-frame { padding:3px 0; }
}

@media screen and (max-width: 716px) {
    .pur-frame { display:none; }  
    #divChooseStatus { display: inline-block !important; margin-left:10px; font-size:12px; }
    .lineorderstatus { display:block; margin-top:10px; background-color:#eaeaea; height:1px; }
}
.st-unpaid { background-color: rgb(209, 0, 0);
    border: 1px solid rgb(193, 3, 3);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 2px rgba(193, 3, 3, 0.3); }
.st-unpaid:hover, .st-unpaid:focus {
    border: 1px solid rgb(132, 2, 2);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 10px rgb(252, 75, 75); }
.st-unpaid-cur  { background-color: rgb(209, 0, 0); border: 1px solid rgb(0, 0, 0);
    color:#000000 !important;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.3); 
    -moz-box-shadow: 0px 0px 10px rgb(252, 75, 75);
    -webkit-box-shadow: 0px 0px 10px rgb(252, 75, 75);
    box-shadow: 0px 0px 10px rgb(252, 75, 75); }

.st-partiallypaid { background-color: rgb(255, 78, 132);
    border: 1px solid rgb(255, 0, 78);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3); 
    box-shadow: 0px 0px 2px rgba(193, 3, 3, 0.3); }
.st-partiallypaid:hover, .st-partiallypaid:focus {
    border: 1px solid rgb(255, 0, 78);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 10px rgb(255, 78, 132); }
.st-partiallypaid-cur  { background-color: rgb(255, 78, 132);  border: 1px solid rgb(0, 0, 0);
    color:#000000 !important;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.3); 
    -moz-box-shadow: 0px 0px 10px rgb(255, 225, 88);
    -webkit-box-shadow: 0px 0px 10px rgb(255, 225, 88);
    box-shadow: 0px 0px 10px rgb(255, 78, 132); }

.st-paid { background-color: rgb(57, 179, 57);
    border: 1px solid rgb(8, 161, 8);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 2px rgba(8, 161, 8, 0.3); }
.st-paid:hover, .st-paid:focus {
    border: 1px solid rgb(5, 132, 5);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 10px rgb(5, 208, 5); }
.st-paid-cur {  background-color: rgb(57, 179, 57);  border: 1px solid rgb(0, 0, 0);
    color:#000000 !important;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.3); 
    -moz-box-shadow: 0px 0px 10px rgb(39, 244, 39);
    -webkit-box-shadow: 0px 0px 10px rgb(39, 244, 39);
    box-shadow: 0px 0px 10px rgb(5, 208, 5); }

.st-pack { background-color: rgb(255, 156, 0);
    border: 1px solid rgb(255, 139, 4);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 2px rgba(255, 139, 4, 0.3); }
.st-pack:hover, .st-pack:focus {
    border: 1px solid rgb(199, 123, 2);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 10px rgb(255, 120, 0); }
.st-pack-cur  { background-color: rgb(255, 156, 0);  border: 1px solid rgb(0, 0, 0);
    text-shadow: 1px 1px rgba(255, 255, 255, 0.3); 
    color:#000000 !important;
    -moz-box-shadow: 0px 0px 10px rgb(251, 188, 89);
    -webkit-box-shadow: 0px 0px 10px rgb(251, 188, 89);
    box-shadow: 0px 0px 10px rgb(255, 120, 0); }

.st-ship { background-color: rgb(0, 129, 203);
    border: 1px solid rgb(1, 120, 188);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 2px rgba(1, 120, 188, 0.3); }
.st-ship:hover, .st-ship:focus {
    border: 1px solid rgb(0, 110, 173);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 10px rgb(31, 171, 251); }
.st-ship-cur  { background-color: rgb(0, 129, 203); border: 1px solid rgb(0, 0, 0);
    text-shadow: 1px 1px rgba(255, 255, 255, 0.3); 
    color:#000000 !important;
    -moz-box-shadow: 0px 0px 10px rgb(31, 171, 251);
    -webkit-box-shadow: 0px 0px 10px rgb(31, 171, 251);
    box-shadow: 0px 0px 10px rgb(31, 171, 251); }
.st-discard { background-color: rgb(136, 136, 136);
    border: 1px solid rgb(125, 125, 125);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 2px rgba(150, 150, 150, 0.3); }
.st-discard:hover, .st-discard:focus {
    border: 1px solid rgb(125, 125, 125);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 10px rgb(150, 150, 150); }
.st-discard-cur  { background-color: rgb(136, 136, 136); border: 1px solid rgb(0, 0, 0);
    text-shadow: 1px 1px rgba(255, 255, 255, 0.3); 
    color:#000000 !important;
    -moz-box-shadow: 0px 0px 10px rgb(150, 150, 150);
    -webkit-box-shadow: 0px 0px 10px rgb(150, 150, 150);
    box-shadow: 0px 0px 10px rgb(150, 150, 150); }

.pur-row { border-bottom: solid 1px #eaeaea; background-color:#fff; padding: 5px; transition: all 300ms linear 0s; display:block; color:#555555; font-size:14px; font-weight:500; }
.pur-row .c1 { width:calc(100% - 440px); min-width:180px; }
.pur-row .c2 { width:360px; }
.pur-row .el  { float:left; padding:10px; width:160px; min-height:68px; }
.pur-row .elb  { float:left; padding:10px; min-width:190px; }
.pur-row .el .refno { font-size: 18px; font-weight:500; }
.pur-row .el2 { float:left; padding:26px 10px 0; position:relative; min-width:160px; }
.pur-row .el-last { float:left; margin:18px 0 0; color: #888888; font-size: 0.8em; padding:10px; border-radius:6px; text-align:center;
                     border:solid 1px #f0f0f0; transition: all 300ms linear 0s; width:80px; }
.pur-row:hover .el-last { background-color:#000; color:#fff; border-radius:6px; border:solid 1px #000; }

.pur-row.aff { font-weight:normal; }
.pur-row.aff .c2 .el {min-width:180px;}
.pur-row.aff .af-status { float:left; margin:20px 0 0; font-size:0.8em; padding:4px 10px; border-radius:6px; text-align:center; }

@media screen and (max-width: 971px) {
    .pur-row .el-last { display:none; }
    .pur-row .c2 { width:160px; }
    .pur-row.aff .c2 { width:360px; } /*same*/
}

@media screen and (max-width:700px) {
    .pur-row.aff .c1 { width:100%; }

}
@media screen and (max-width: 391px) {
    .pur-row .el  { padding:10px 0; }
    .pur-row .elb { padding:10px 0; }
    .pur-row .el2 { padding:0 0 10px; float:right; width:100%; min-width:unset; }
    
}


.status0-fulfill, .status00-fulfill, .status1-fulfill, .status2-fulfill, .status3-fulfill, .status4-fulfill, 
.status5-fulfill, .status6-fulfill, .status7-fulfill { height:24px; line-height: 24px; display:inline-block; padding:0 5px; width:130px; font-weight:bold; text-align:center; 
                                                       -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

/* Red: Unpaid  */
.status0-fulfill { background-color:#d10000; color:#ffffff; }      
/* Pink: Partially Paid  */
.status00-fulfill { background-color:#ff4e84; color:#ffffff; }      
/* Green: Paid  */
.status1-fulfill { background-color:#39b339; color:#ffffff; }   
/* Yellow: Packed  */   
.status2-fulfill { background-color:#ff9c00; color:#ffffff; }   
/* Red: Partially Shipped  */
.status3-fulfill { background-color:#dc334c; color:#ffffff; }  
/* Blue: Shipped  */
.status4-fulfill { background-color:#0081cb; color:#ffffff; } 
 /* Received  */
.status5-fulfill { background-color:LightSkyBlue; color:#333333; } 
 /* Gray Discared  */
.status6-fulfill { background-color:#888888; color:#ffffff; }      
 /* Pending status  */
.status7-fulfill { background-color:#eaeaea; color:#999999; text-shadow: #fff 0 1px 0; }      

/* My Order Detail box */
.box { background-color:#ffffff; border:solid 1px #eaeaea; padding:10px; }

/* Purchase tracking */
.pur-track { font-size:11px !important; }
.pur-track .st { float:left; text-align:center; height:60px; margin:20px 0; }
.pur-track .st .date {font-size:9px; margin-top:3px }
.pur-track .arrow { height:60px; margin:20px 0; }
.pur-track .arrow i.material-icons { color:#555; }
.pur-track .arrowDown { display:none; }
.pur-track .status0-fulfill, .pur-track .status00-fulfill, .pur-track .status1-fulfill, .pur-track .status2-fulfill, .pur-track .status3-fulfill,
.pur-track .status4-fulfill, .pur-track .status5-fulfill, .pur-track .status6-fulfill, .pur-track .status7-fulfill{ width:120px; }

/* Order header details */
.els1, .els2, .els3 { float:left; margin-right:10px; }
.els1 { width:150px; }
.els2 { width:calc(100% - 360px); }
.els3 { width:180px; }
.els1 .hdr, .els2 .hdr { font-size:20px; line-height:20px; }
@media screen and (max-width: 680px) {
    .els1, .els2, .els3 { float:unset; width:100%; margin-bottom:10px; }
}
/* Self Collect */
.collect-addr { width:50%; padding:0 20px; }
.collect-time { width:30%; }

/* Manual Payment */
.manualpayment { width:50%; }
.manualpayment .step-title { line-height:20px; min-height:20px; }
.manualpayment .step2 { margin-left:20px; }
.manualpayment .stepno, .stepnocheckout { background-color: #259959; border-radius:50%; height:20px; width:20px; line-height:20px; color:#fff; text-align:center; margin-right:5px; display:inline-block; }
.manualpayment .stepcontent { margin-left:25px; }
ul.ulm { padding-left:25px; margin:0; padding-top:0; }

@media screen and (max-width: 480px) {
   .collect-addr { width:calc(100% - 96px); margin-bottom:10px; }
   .collect-time { margin-left:76px; width:100%; }
   .manualpayment { width:100%; }
   .manualpayment .step2 { margin-top:20px; margin-left:0; }
   .discardorder { width:100%; text-align:right; }
   .pur-track .st { max-width:120px; float:unset; height:auto;  margin:5px auto; }
   .pur-track .arrowDown { display:block; text-align:center; }
   .pur-track .arrow { display:none; }
   .pur-track .status0-fulfill, .pur-track .status00-fulfill, .pur-track .status1-fulfill, .pur-track .status2-fulfill, .pur-track .status3-fulfill,
   .pur-track .status4-fulfill, .pur-track .status5-fulfill, .pur-track .status6-fulfill, .pur-track .status7-fulfill { width: 100%; }
}

/* Sender & Shipping Address */
.shipName { background-color:#fafafa; padding-left:13px !important; }
.shipCont { background-color:#fafafa; padding-bottom:10px !important; padding-left:13px !important; }
.shipField { padding-left:13px !important; }
.addressbox { width:50%; }
.addressbox .box { margin-right:10px; }
.addressbox2 { width:100%; }
@media screen and (max-width: 880px) {
    .addressbox { width:100%; }
    .addressbox:first-child { margin-bottom:10px; }
    .addressbox .box { margin-right:0; }
}
/* My Order Items */
.pur-prodlist { padding:16px 10px; border-bottom:solid 1px #eaeaea; }
.pur-prodlist:last-child { border-bottom:0; }
.pur-prodlist:hover { cursor:text; }
.pur-prodlist .td1 { width:80px; }
.pur-prodlist .td1 img { display:block; }
.pur-prodlist .td2 { width:calc(100% - 80px); }
.pur-prodlist .td3 { width:200px; margin-right:10px; float:left; }
.pur-prodlist .td4 { width:330px; float:left; }
.pur-prodlist .status0-fulfill, .pur-prodlist .status00-fulfill, .pur-prodlist .status1-fulfill, .pur-prodlist .status2-fulfill, .pur-prodlist .status3-fulfill,
.pur-prodlist .status4-fulfill, .pur-prodlist .status5-fulfill, .pur-prodlist .status6-fulfill, .pur-prodlist .status7-fulfill { margin-left:10px; }

.pur-combo { margin:10px 0; background-color:#fffbe8; padding:0; border:solid 2px #FFD412; }
.pur-combo .combo-hdr { background-color:#FFD412; padding:8px 10px; }

.trackingno .trackinglogo { float:left; padding-top:6px; padding-right:6px; }
.trackingno .trackingname { float:left; }
@media screen and (max-width: 480px) {
   .trackingno .trackinglogo, .trackingno .trackingname { padding-top:0; float:unset; display:block }
}

@media screen and (max-width: 980px) {
    .pur-prodlist .td2 { width:calc(100% - 80px); }
    .pur-prodlist .td4 { margin-top:10px; float:right; text-align:right; }
}
@media screen and (max-width: 360px) {
    .pur-prodlist .td2 { width:100%; }
    .pur-prodlist .td4 { width:100%; }
    .pur-prodlist .trackingno { display:block; text-align:left; }
    .pur-prodlist .status0-fulfill, .pur-prodlist .status00-fulfill, .pur-prodlist .status1-fulfill, .pur-prodlist .status2-fulfill, .pur-prodlist .status3-fulfill,
    .pur-prodlist .status4-fulfill, .pur-prodlist .status5-fulfill, .pur-prodlist .status6-fulfill, .pur-prodlist .status7-fulfill { display:block; margin-left:0; margin-top:5px; }
}

.pwd-lbl { width:170px; line-height:45px; color:#888; }
.pwd-field { width:calc(100% - 170px); }
@media screen and (max-width: 480px) {
    .pwd-lbl { width:100%; padding-top:10px; }
    .pwd-field { width:100%; }
}

.chipPOP { display: inline-block; height: 40px; font-size: 13px; font-weight: 500; color: rgba(0,0,0,0.6); line-height: 40px; padding: 0 12px; 
           border-radius: 20px;  background-color: #e4e4e4; border:solid 1px #eaeaea; margin-bottom: 5px; margin-right: 5px; transition: all 0.5s ease-out 0s; }
.chipPOP .close { cursor: pointer; float: right; font-size: 16px; line-height: 38px; width:38px; text-align:center; padding: 0 8px 0 16px; margin-left:10px; margin-right:-8px; display:inline-block; }
.chipPOP img { float: left; margin: 1px 0 1px 0px; height: 36px; width: 36px; }

/* Status Dropdown */
#divStatusOptions { border:solid 1px #eaeaea; z-index:100; display:none; }
.ddlStatus { display:block; padding:10px 20px; background-color:#fff; border-bottom:solid 1px #eaeaea; }
.ddlStatus:last-child { border-bottom: 0; }
.ddlStatus:hover { background-color:#c4c4c4; }

/* Product Option color */
.n1 { color:#75A630  !important; }
.n2 { color:#E27C28 !important; }
.n3 { color:#688bc8 !important; }
.n4 { color:#9862b5 !important; }
.n5 { color:#ea4949 !important; }


/* Product List View */
.prodlistview .listrow { padding-top:20px; }
.prodlistview .listrow .img { max-width:70px; width:100%; display:block; }
.prodlistview .listrow .td2 { }
.prodlistview .listrow .td2 .details { margin-bottom:20px; }
.prodlistview .listrow .td2 .details .pn { font-size:16px; color:#333; font-weight:bold; min-height:10px; display:inline-block; }
.prodlistview .listrow .td2 .details .pn:hover, .prodlistview .listrow .td2 .details .pn:focus { text-decoration:underline; cursor:pointer; }
.prodlistview .listrow .td2 .details .po { min-width:124px; line-height:43px; }
.prodlistview .listrow .td2 .details .rowCombo { margin-bottom:16px; }
.prodlistview .listrow .td3, .prodlistview .listrow .td4 { }
.prodlistview .listrow .price { width:80px; display:inline-block; text-align:right; padding-right:14px; font-weight:bold; color:#900; }
.prodlistview .listrow .cqty { position:relative; width:52px; display:inline-block; }
.prodlistview .listrow .cqty select { border: solid 1px #ccc; font-size: 14px; }
.prodlistview .listrow .cqty input { width: 50px; font-size: 13px; text-align: center; margin-bottom: 0; border: solid 1px #cccccc; background-color: #fff; }
.prodlistview .listrow .add { display:inline-block; padding:10px; }

@media screen and (max-width: 420px) {
   .prodlistview .listrow .td2 .details .po { min-width:200px; line-height:28px; }
}

/* Combo */
.combolist .comboitem { float:left; margin-bottom:10px; }
.combolist .comboitem .cell { display:table-cell; vertical-align:middle; height:154px; }
.combolist .comboitem .cell.pd { height:154px; }
.combolist .comboitem .cell.pd .node { width:100px; min-height:100px; position:relative; text-align:center; margin:0 auto; }
.combolist .comboitem .cell.pd .img { width:100px; min-height:100px; }
.combolist .comboitem .cell.pd .node .op { position:absolute; bottom:0; left:0; width:100%; background-color:rgba(0, 0, 0, .5); padding:0 5px; color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); text-align:center; }
.combolist .comboitem .cell img { display:block; border:solid 1px #ccc; border-radius:3px; }
.combolist .comboitem .cell.pg { vertical-align:top; }
.combolist .comboitem .cell.pg img { max-width:80px; max-height:80px; display:block; }
.combolist .comboitem .cell.pg .node { margin-left:16px; margin-top:16px; position:relative; }
.combolist .comboitem .cell.pg .node .qty { position:absolute; bottom:0; left:0; width:100%; background-color:rgba(0, 0, 0, .5); padding:0 5px; color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); text-align:center; }
.combolist .comboitem .cell.pg .node .material-icons { position:absolute; top:-5px; right:-5px; display:none; }
    /* .combolist .comboitem .cell.pg .node:hover .material-icons, .combolist .comboitem .cell.pg .node:focus .material-icons { display:block; } */ /* <-- temp removed. replace by edit icon on top right Combo box*/
.combolist .comboitem .cell.pg .node .material-icons:hover, .combolist .comboitem .cell.pg .node .material-icons:focus { color:#333 !important; cursor:pointer; }
.combolist .comboitem .cell.pg .box { padding:0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); border-radius:2px; width:100%; max-width:440px; }
.combolist .comboitem .cell.pg .boxgroupname { background-color:rgba(0,0,0,.3); color:#fff; padding:10px 12px; height:40px; line-height:20px; position:relative }
.combolist .comboitem .cell.pg .boxscroll { width:440px; min-height:100px; overflow:hidden; }
.combolist .comboitem .cell .imgblank { border:dotted 2px #ccc; background-color:#fcf4ee;user-select: none;}
.combolist .comboitem .cell .imgblank:hover, .combolist .comboitem .cell .imgblank:focus { background-color:#ffffe0; cursor:pointer }
.combolist .comboitem .cell.pd .imgblank { width:100px; height:100px; display:inline-block; }
.combolist .comboitem .cell.pg .imgblank { width:72px; height:72px; }
.combolist .comboprice { float:right; }
.combolist .comboprice .cell.totalprice { padding-left:20px; min-width:300px; text-align:right; }
.combolist .comboprice .atc { width:100%; max-width:396px; }
.comboplus { display:table-cell; vertical-align:middle; height:152px; padding: 0 16px; }
.combocountdown { margin-top:10px; font-size:16px; line-height:24px; display:inline-block; }

@media screen and (max-width: 768px) {
    .combolist .comboitem { float:none; display:block; margin-bottom:10px; }
    .combolist .comboitem .cell { display:block; text-align:center; }
    .combolist .comboitem .cell.pd { height:unset; }
    .combolist .comboitem .cell.pg .box { width:unset; }
    .combolist .comboitem .cell.pg .boxscroll {  width:unset; }
    .combolist .comboprice { float:none; display:block; margin-bottom:10px; }
    .combolist .comboprice .cell.totalprice { padding-left:0; padding:20px 0; }
    .comboplus { display:block; text-align:center; padding-bottom:14px; height:unset; }
}

/* combosearchbox */
.combosearchbox .sbhead { background-color:#ABD406; color:#333; padding:10px 12px; min-height:40px; line-height:20px; }

/* Search wrapper */
.search-wrapper { position:relative; }
.search-wrapper .search-wrapper-input { display:block; width:100%; background-color:#fff; border:solid 1px #ccc; border-radius:3px; height:50px; margin:10px 0; padding:0 40px 0 16px; z-index:100; }
.search-wrapper .search-wrapper-input input { color:#333; margin:0; border-bottom:0; height:50px; z-index:100; }
.search-wrapper .search-wrapper-input input:focus { border-bottom:0 !important; box-shadow:none !important; }
.search-wrapper .search-wrapper-button { display:inline-block; position:absolute; top:6px; right:0px;  z-index:101; width:40px; text-align:center; }
.search-wrapper .search-wrapper-button i { height:50px; line-height:38px; }

.sale-chart, .common-chart { position: relative;  padding-bottom: 36%; height: 0; overflow:hidden; }
.sale-chart #div_areachatSales { position: absolute; top: 0; left: 0; width:100%; height:100%; max-height:300px; }

/* Just Purchase Notification at Individual Product page */
.justPurchase { display:none; position:fixed; left:10px; bottom:-80px; width:320px; background-color:#fcfcfc; box-shadow:0px 0px 2px rgba(0,0,0,0.5); height:80px;
                border-radius:3px; border:solid 1px #259959; font-family:Arial; color:#555; z-index:10000; }
.justPurchase .purchase-text { font-size:0.8rem; color:#555; line-height:18px; max-height:36px; overflow:hidden; }
.justPurchase .purchase-prod { font-size:0.8rem; height:18px; line-height:18px; color:#259959; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; }
.justPurchase .purchase-time { font-size:0.7rem; color:#999; padding-top:3px; height:12px; line-height:12px; }

/* Paste Address */
.if-action { display:inline-block; }
.importFormat { background-color:#f0f0f0; }
.importFormat .ifColor { color:#0097a7; }
.importFormat .pasteFrame { margin:0 16px; border:solid 1px #a0a0a0; border-radius:3px; padding:10px; background-color:#fff; }
.importFormat .materialize-textarea { height:140px; margin-bottom:0; border-bottom-width:0; }
.importFormat .materialize-textarea:focus { border-bottom:0 !important; box-shadow:none !important; }
.importFormat .continue-paste { width:100px; }
.importFormat .copied { position:absolute; top:4px; left:136px; background-color:rgb(45,45,45); color:#fff; padding:0px 5px; height:20px; line-height:20px; border-radius:2px; }

@media screen and (max-width: 480px) {
    .newline { display:block; }
    .importFormat .continue-paste { width:100%; }
}


/* UserControl ucMenuTPCC : top left menu */
/* User Profile */
.profile { display:block; border-bottom: solid 1px rgba(0,0,0,0.14); padding:24px 24px 12px 24px; position:relative; background-color:#fafafa; min-height:86px; }
.profile a { padding:0 !important; }
.profile .img { display:block; position:absolute; top:24px; left:24px; width:50px; height:50px; border-radius:50%;  }
.profile .img.guest { background-color:#999; text-align:center; }
.profile .img.guest .material-icons { color:#fff; font-size:40px; display:inline-flex; vertical-align:middle; }
.profile .info { display:inline-block; padding-left: 60px; width:236px; }
.profile .info { display:block; line-height:16px; }
.profile .info .name { font-weight:500; }
.profile .guest-login { font-weight:600; color:#000; }
.frname .lvlf { display:inline-block; padding:2px 7px 2px 5px; margin:3px 0; border-radius:2px; background-color:rgba(37, 153, 89, 1.0); color:#fff; }
.frname .lvlf .icoGoldStar16, .icoSilverStar16 { margin-bottom:-3px; }
/* UserControl ucMenuTPCC : top left menu */
/* Search */
.search-wrapper-button { position:absolute; top:0px; right:0; }
.search-wrapper-button i { padding:10px; }
.search-wrapper-field { background-color:#fff; border:solid 1px #cacaca; border-radius:3px; padding:0 10px; }
.search-wrapper-field input:focus { box-shadow: 0 0 0 0 #ffffff !important; }

/* Language option */
.lang, .lang a { font-size:12px; }
.lang { text-align:center; padding:10px; }
.lang a { padding:8px 16px; border-radius:2px; }
.lang a.selected { background-color:#259959; color:#fff;  }

.box.box-mobile-padding { padding:16px; }
.step-by-step { padding:2px 6px; font-size:10px;}
@media screen and (max-width: 480px) {
    .box.box-mobile-padding { padding:10px; }
}

/* Update Log (same design as shop admin) */
.viewupdatelog_panel { display: inline-block; background-color: #f0f0f0; color: #999; border-radius: 3px; font-weight: 300; height: 30px; width: 180px;}
.viewupdatelog_panel i {float: left;  margin: 3px 6px;}
.viewupdatelog_panel span {display: inline-block;line-height: 30px;}
.viewupdatelog_panel:hover {text-decoration: none;color: #259959;}

/* New Shopping Cart design */
a.showhide-detailprice { display:block}
a.showhide-detailprice .material-icons {color:#555}
a.showhide-detailprice .showhide-text {width:100px; display:inline-block; font-size:0.76em; color:#555;}
a.showhide-detailprice:hover, a.showhide-detailprice:active {text-decoration:none}
#divDetailPrice { margin:0 10px}

.cartv2-greybg { background-color: #f8f8f8;}
.btn-continue-step { width:100%; max-width:500px; margin:0 auto; height: 48px !important; line-height: 48px !important; font-size: 16px !important; padding: 0 12px !important;  text-transform: unset !important; }
.guest-wrapper { padding-bottom:30px; display:flex; justify-content:space-between; flex-wrap:wrap}
.guest-col1 { width:60%; }
.guest-col2 { width:40%; }
.guest-login { padding: 16px 0.75rem; text-align: right; }
.rslNode { max-width:300px}
.rslNode .rsName { overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
@media screen and (max-width: 786px) {
.guest-col1 { width:100%; order:2 }
.guest-col2 { width:100%; order:1 }
}
@media screen and (max-width: 624px) {
    .guest-login{ padding:0 0.75rem;}
}

input.txtb[type="text"]:not(.browser-default) + label::after { top:58px!important; }
.shippingMethod-wrapper { padding:0 16px 30px; margin:0 -10px; }
.shippingMethod-wrapper .sop { flex: 0 1 400px; margin-left:10px; margin-right:10px; align-items:center; min-height:50px; padding:6px 8px;}
.shippingMethod-wrapper .sop .c1 {width:24px;}
.shippingMethod-wrapper .sop .c2 {width:calc(100% - 48px); padding-left:5px;}
.shippingMethod-wrapper .sop .free {display:none;}
.shippingMethod-wrapper .sop .price {display:none}
.shippingMethod-wrapper .sop .iconTick {display:block}

.alert-box { border:solid 1px #F21414; background-color:#FFE6E0; }


/* Common Radio Button : color black */
[type="radio"]:not(:checked) + span, [type="radio"]:checked + span {
    color: #333 !important;
}

/* Common style for  textbox label color grey */
.readonly input:not([type]).validate + label, input[type="text"]:not(.browser-default).validate + label, input[type="password"]:not(.browser-default).validate + label, input[type="email"]:not(.browser-default).validate + label, input[type="url"]:not(.browser-default).validate + label, input[type="time"]:not(.browser-default).validate + label, input[type="date"]:not(.browser-default).validate + label, input[type="datetime"]:not(.browser-default).validate + label, input[type="datetime-local"]:not(.browser-default).validate + label, input[type="tel"]:not(.browser-default).validate + label, input[type="number"]:not(.browser-default).validate + label, input[type="search"]:not(.browser-default).validate + label, textarea.materialize-textarea.validate + label,
.readonly input:not([type]):disabled + label, input:not([type])[readonly="readonly"] + label, input[type="text"]:not(.browser-default):disabled + label, input[type="text"]:not(.browser-default)[readonly="readonly"] + label, input[type="password"]:not(.browser-default):disabled + label, input[type="password"]:not(.browser-default)[readonly="readonly"] + label, input[type="email"]:not(.browser-default):disabled + label, input[type="email"]:not(.browser-default)[readonly="readonly"] + label, input[type="url"]:not(.browser-default):disabled + label, input[type="url"]:not(.browser-default)[readonly="readonly"] + label, input[type="time"]:not(.browser-default):disabled + label, input[type="time"]:not(.browser-default)[readonly="readonly"] + label, input[type="date"]:not(.browser-default):disabled + label, input[type="date"]:not(.browser-default)[readonly="readonly"] + label, input[type="datetime"]:not(.browser-default):disabled + label, input[type="datetime"]:not(.browser-default)[readonly="readonly"] + label, input[type="datetime-local"]:not(.browser-default):disabled + label, input[type="datetime-local"]:not(.browser-default)[readonly="readonly"] + label, input[type="tel"]:not(.browser-default):disabled + label, input[type="tel"]:not(.browser-default)[readonly="readonly"] + label, input[type="number"]:not(.browser-default):disabled + label, input[type="number"]:not(.browser-default)[readonly="readonly"] + label, input[type="search"]:not(.browser-default):disabled + label, input[type="search"]:not(.browser-default)[readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label {
    color: #9e9e9e !important;
}

/* Commisison Transaction page */
.flex-wrapper.wrap {flex-wrap:wrap; justify-content:flex-start}
.flex-wrapper { display:flex; align-items:center;}
.flex-wrapper.spacing { padding-right:16px}
.flex-wrapper .icoAffiliate { width:20px; height:20px; margin-right:3px}
.flex-wrapper .ico-text { height:14px; line-height:14px; white-space:nowrap}
.flex-wrapper .iconGroupSalePoints {width:20px;height:20px;margin-right:3px}

/* Commission Transactions image & qty grouping */
.pifeeq div { padding-top:5px; margin-right:5px; margin-bottom:5px; position:relative; }
.pifeeq div img {display:block; width:40px; height:40px;}
.pifeeq .fqty { position:absolute; top:-3px; right:-3px; min-width:20px; padding:0 3px; height:20px; line-height:16px; text-align:center; 
      font-size:0.75rem; background-color:#fff; color:#259959; border-radius:50%; border:solid 2px #259959 }


/* Progress bar */
.darkblue {background-color: #2f6eef;}
.lightblue {background-color: #c0d3f1;}
.tracking-bar { display:grid; grid-template-columns:repeat(100,1fr);}
.tracking-bar .row-bar {display:grid;align-items:center}  /**/
.tracking-bar .target-line { border-right:dashed 1px #999}
.tracking-bar .target-line.no-dotted-target-line {border-right-width:0}
.tracking-bar .target-bar { display:grid; justify-content:stretch}
.tracking-bar .bar-height {height:7px;}
.tracking-bar .curve-left {border-top-left-radius:4px;border-bottom-left-radius:4px}
.tracking-bar .curve-right {border-top-right-radius:4px;border-bottom-right-radius:4px}

/* Empire Tree */
.empire-hdr { background-color: #823b9f;color: #fff;font-size: 30px;text-align: center;padding: 8px;}
.empire-hdr .material-icons {font-size: 36px;display: inline-flex;vertical-align: middle;margin-top: -6px;margin-right: 10px;}
.empire-shadow {box-shadow: 0 2px 2px 0 rgba(68, 6, 94, 0.14), 0 1px 5px 0 rgba(68, 6, 94, 0.12), 0 3px 1px -2px rgba(68, 6, 94, 0.2) !important;}
.em-link {margin: 0 auto;width: 1px;height:16px;background-color: rgba(68, 6, 94, 0.3);}
.empire-shadow.child-blacklist {background-color: #ffd7d7 !important;}
.empire-shadow.child-inactive {background-color: #dadada !important;}
.empire-shadow .node-status {position: absolute;bottom: 2px;right: 6px;font-style: italic;}

/* Phone call directly */
.phone-box-small {display: block;background-color: #fff; white-space: nowrap;height: 36px;padding: 0 12px;border-radius: 19px;border: solid 2px #039be5;color: #039be5;}
/* Whatsapp directly */
.whatsapp-box-small {display: block;background-color: #fff;white-space: nowrap;height: 36px;padding: 0 12px;border-radius: 19px;border: solid 2px #77d7c8;color: #1cb39b;}

/* Downline Generation List */
.gen-flex {display:flex; flex-wrap:wrap; align-items:center; padding-bottom:30px; margin:0 -3px}
.gen-flex .gen-box { background-color:#fff; padding:6px; margin:0px; position:relative; border-radius:50%;}
.gen-flex .gen-box:hover { background-color:#ffdd00; cursor:pointer}
.gen-flex .gen-box.displaymore-box:hover { background-color:unset!important; cursor:text}
.gen-flex .img {display:block; background-color:#f0f0f0; width:50px; height:50px; border-radius:50%;}
.gen-flex .gen-box.highlighted {background-color: #ffea00 !important; box-shadow: 0 0 5px 3px #ffea00 !important;}
.gen-flex .img.new { border:solid 3px #FFD412;}

/* Display circle number More Reseller */      
.circle-wrapper {display:block;width:50px; height:50px; border-radius:50%;border:solid 1px #eaeaea}
.circle-wrapper-grid { display: grid; place-items: center; height:50px; line-height:1; text-align:center}
.circle-wrapper-grid .moreNumber {font-size:0.7em; margin-top:-3px}
.circle-wrapper-grid .sqLogoLoading {height:30px; width:30px; display:inline-block}


.gen-upline .gen-box { margin:0 auto; padding:6px; width:92px; display:block;border-radius:50%; background-color:#f0f0f0; }
.gen-upline .img {display:block; background-color:#f0f0f0; width:80px; height:80px; border-radius:50%;}
.gen-upline .gen-box:hover { background-color:#ffea00; cursor:pointer}
.gen-upline .gen-box.myself { background-color:#259959 !important;}
.gen-upline .gen-box.gen-hq {background-color:#823b9f; height:92px; display:grid; place-items:center;}
.gen-upline .gen-box.gen-hq:hover {cursor:text;}

.gen-title {font-family: 'Roboto Condensed', sans-serif; font-size:18px; font-weight:500;}
.gen-title .iconReseller { width:14px; height:14px; margin-bottom:-2px; margin-left:5px;}
   
/* Empire Commision Performance Statistic Chart */
.stat-box {padding-top:6px;padding-bottom:6px;height:74px;margin-top:8px}
.stat-box .sales-amt {font-size:18px;line-height:18px}
.stat-box .iconGroupSalePoints {width:20px;height:20px; margin-right:5px;}
.stat-bg-last-year {background-color:#353289;}
.stat-bg-current-year {background-color:#3CA0EB;}
.stat-bg-month {background-color:#F7545F;}

/* refer Reseller Performance */
.card-tabs .tabs .tab a .wrap-highlight {padding:0 10px; display:inline-block;}
.card-tabs .tabs .tab a.active .grid-bg {display:grid; background-color:#fff; place-items:center;height:48px;}
.card-tabs .tabs .tab a.active .wrap-highlight { background-color:#259959 !important; color:#fff; padding:0 10px; border-radius:3px; line-height:30px; height:30px;
                                                       display:inline-block;}
.card-tabs.toggle-tabs{display:flex; justify-content:space-between; flex-wrap:nowrap}
.card-tabs.toggle-tabs .tabs { display:flex; justify-content:flex-end; width:unset}
.card-tabs.toggle-tabs .tabs a { padding:0 !important; }

.searchresult-flex-wrapper { display:flex;flex-wrap: wrap;justify-content:flex-start;align-items:center}
.searchresult-flex-wrapper .srbox { flex: 1 1 300px; /*  Stretching: */  }
.srbox {color: #333;padding: 8px 0.75rem;height: auto;display: block;}
.srbox .inner-wrap {display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center}
.srbox .onerowcenter {text-align: center;}

/* Custom DropDownList */
.customddl_panel {position: relative;}
.customddl_panel a.ddl_select {border-radius: 2px;border: 1px solid #9e9e9e;cursor: pointer;background-color: #eee !important;padding: 0 30px 0 10px;
            line-height: 42px;display: block; overflow: hidden;color: #333 !important;text-decoration: none;}
.customddl_panel .ddl_pointer {position: absolute;right: 10px;top: 27%;cursor: pointer;}
.customddl_panel i.arrow-dropdown {position: absolute;right: 8px; top:10px !important;cursor: pointer;}
/* Style for ResellerLevel dropdownlist (override above common) */
.customddl_panel a.ddlrs-search {background-color:#fff !important; font-weight:unset !important; padding-left:0;border: 1px solid #cacaca !important; line-height:unset!important; }
.customddl_panel .resellerlevellist-wrapper {border: solid 1px #ccc;list-style: none;box-shadow: 0px 1px 5px #ddd;display: none;
            position: absolute;z-index: 888;margin: 0;padding: 0;background: #fff;overflow: auto; top:45px; left: 0;}
.customddl_panel .resellerlevellist-wrapper .flex-wrapper {display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; max-width:400px;}
.customddl_panel .resellerlevellist-wrapper .flex-wrapper .ddl_optionFlex { flex: 1 1 300px; /*  Stretching: */ min-width:260px; border-bottom: solid 1px #ddd; }
.customddl_panel .resellerlevellist-wrapper .flex-wrapper .ddl_optionFlex:last-child{border-bottom:0px;}
.resellerlevel-inner-grid2col {display: grid;grid-template-columns: 100px 1fr; 
             align-items:center; height:46px;color: #333;cursor: pointer; 
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;}
.resellerlevel-inner-grid2col .icons {padding:0 10px;}
.customddl_panel .resellerlevellist-wrapper .flex-wrapper .ddl_optionFlex:hover{background: #fcf7bb;}


#resellerlevellist.ddl_options {top:45px !important;}
#resellerlevellist .dd_option {padding: 0;height: 46px;min-width: 322px;}
#resellerlevellist .dd_option .icons {position:absolute; left:16px; top:8px; width:80px;}
#resellerlevellist .dd_option .icons { position:absolute; left:16px; top:8px; width:80px;  } /* = 100px */
#resellerlevellist .dd_option .name { position:absolute; left:130px; top:5px; line-height:36px; width:110px; font-weight:bold; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;  } /* = 90px */

/* Infinite Ranks */
.iconInfiniteRank { font-size:1.5rem; }  /* <-- standard size using HTML code */
.irInlineFlexWrapper { display:inline-flex; align-items:center; flex-wrap:nowrap; justify-content:flex-start; padding:0 5px;}
.irInlineFlexWrapper .irRank { line-height:20px; display:inline-flex}
.irInlineFlexWrapper .irName { padding-left:3px; line-height:20px; display:inline-flex}
    
/* Payslip */
.payslip-row { display:flex; flex-wrap:nowrap; justify-content:space-between; padding:16px; align-items:center; border-bottom: solid 1px #eaeaea; background-color:#fff; }
.payslip-row .c1-month {flex: 1 1 200px; /*  Stretching: */ font-size:14px; font-weight:500; color:#2f6bd9; }
.payslip-row .c2-print {flex: 0 1 162px; /*  Stretching: */}
.payslip-row .c2-action { color: #888888; font-size: 0.8em; padding:10px; border-radius:6px; text-align:center;
                     border:solid 1px #f0f0f0; transition: all 300ms linear 0s; width:80px; }
.payslip-row:hover .c2-action { background-color:#000; color:#fff; border-radius:6px; border:solid 1px #000; }
.payslip-row.cb-position-common[type="checkbox"] + span:not(.lever) {  }

.cb-position-common[type="checkbox"] + span:not(.lever) { color:#333; }
.cb-position-common[type="checkbox"].filled-in + span:not(.lever):after {top:3px !important;}
.cb-position-common[type="checkbox"].filled-in + span:not(.lever):before {top:3px !important;}


/* floatmenu - Selection Month dropdown */
.floatmenu-subhdr { padding:0 10px; line-height:3rem; line-height:3rem; color:#333; background-color:#eaeaea; font-weight:bold; }
.selectionmonth .mc { padding:0 20px !important; background-color:#fff !important }
.selectionmonth .mc:hover {color:#555555 !important; background-color:#ddd !important;}
.selectionmonth .mth { display:inline-block; width:66px; }

/* Sticky Header */
#stickyHdr { position:fixed; top:0; left:0; width:100%; z-index:-1; box-shadow: 0px 0px 6px rgba(45, 45, 35, 0.3); opacity:0; 
             -moz-transition: all 0.5s ease 0s;
             -webkit-transition: all 0.5s ease 0s;
             -o-transition: all 0.5s ease 0s;
}
#stickyHdr .in { background: linear-gradient(to bottom, rgb(255,255,255), rgba(253, 255, 247, 0.95)); 
                 box-shadow: 0px 10px 5px -5px rgba(234, 255, 150, 0.4) inset, 0px -10px 10px -10px rgba(234, 255, 150, 0.8) inset;
                 border-bottom: 1px solid rgb(221, 240, 252);}

/* Leaderboard */
.leaderboard-filter-showhide-wrapper {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:0 0.75rem;}
.leaderboard-filter-showhide-wrapper .tabs { background-color:transparent !important; gap:5px;}

/* Leaderboard podium */
.leaderboard-podium-wrapper {box-sizing:border-box; height:440px; position:relative; overflow:hidden;}
.leaderboard-podium-wrapper .podium-background {position:absolute; width:1280px; height:440px;z-index:1; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.leaderboard-podium-wrapper .podium-card {margin:0;font-size:11px;padding:3px 2px; text-align:center; display:flex; flex-direction:column; justify-content:space-between}
.leaderboard-podium-wrapper .podium-card .row-champion-name {display:grid; font-size:12px; line-height:15px; height:30px; place-items:center; overflow:hidden}
.leaderboard-podium-wrapper .podium-card .row-name {display:grid; height:48px; place-items:center; overflow:hidden}
.leaderboard-podium-wrapper .podium-card .row-amount {display:grid; height:20px; place-items:center;}
.leaderboard-podium-wrapper .podium-card .row-resellerlevel{display:grid; height:32px; place-items:center; overflow:hidden;}
.leaderboard-podium-wrapper .podium-card .row-resellerlevel .resellerelvl {display:flex;justify-content:flex-start; align-items:center;}
.leaderboard-podium-wrapper .podium-card .row-resellerlevel .resellerelvl.frname .lvlf { float:unset;margin:0; padding:0 2px 3px;}
.leaderboard-podium-wrapper .podium-card .row-resellerlevel .resellerelvl.frname .lvlf .icoGoldStar16, .icoSilverStar16 { margin-bottom:unset; }
.leaderboard-podium-wrapper .podium-card .row-resellercode {font-size:9px}
/* Leaderboard listing */
.leaderboard-list-wrapper { max-width:375px; margin:0 auto;margin-bottom:20px; padding:0 !important;} 

        
 @media only screen and (max-width: 500px) {
    .leaderboard-filter-showhide-wrapper .card-tabs {padding-bottom:10px;}
    .leaderboard-filter-showhide-wrapper .tabs {height:30px !important;}
    .leaderboard-filter-showhide-wrapper .tabs .tab {height:30px !important;line-height:30px !important;} 
    .leaderboard-filter-showhide-wrapper .tabs .tab a .grid-bg {height:30px !important;line-height:30px !important; display:inline-block}
 }

.leaderboard-ind-rank-wrapper {max-width:375px; margin:0 auto;} 
.leaderboard-ind-rank-wrapper .tblcommon td { vertical-align:middle; }
.leaderboard-ind-rank-wrapper .tblcommon tr {border-bottom: solid 1px #eaeaea;}
.leaderboard-ind-rank-wrapper .tblcommon tr:last-child {border-bottom-width:0 !important;}
.leaderboard-ind-rank-wrapper .myRank {background-color:#faffbb}
.leaderboard-ind-rank-wrapper .td-rank {width:50px}
.leaderboard-ind-rank-wrapper .td-img {width:50px;padding:5px;}
.leaderboard-ind-rank-wrapper .td-reseller {max-width: 0; overflow: hidden; padding:5px 0;height:65px;}
.leaderboard-ind-rank-wrapper .td-reseller .lvlf { margin:0 !important}
.leaderboard-ind-rank-wrapper .td-rankencouragementtext {width:50%; text-align:center}
.leaderboard-ind-rank-wrapper .rank-number { font-size:20px; height:50px; width:50px; display:grid;place-items:center }
.leaderboard-ind-rank-wrapper .reseller-img { width:50px; height:50px; border-radius:50%; display:block; }
.leaderboard-ind-rank-wrapper .resellercode {font-size:0.72em;}
.leaderboard-ind-rank-wrapper .resellername {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.leaderboard-ind-rank-wrapper .showhide-resellername {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.leaderboard-ind-rank-wrapper .showhide-rankamount { width:100px;}
.leaderboard-ind-rank-wrapper .rank-amount-gsp {text-align:right;padding:0 5px}


/* Empire Standard Color */
.empire-purple-bg {background-color: #823b9f !important;}
.empire-purple-text {color: #823b9f !important;}
.empire-purple-border {border:solid 1px #823b9f !important;}
.empire-purple-border.bg-opacity {background-color:rgba(130,59,159,0.01) !important;}
.empire-lightpurple-bg {background-color:#AF4FD6 !important; }
.empire-lightpurple-border {border:solid 1px #AF4FD6 !important; }
.empire-lightpurple-border.bg-opacity {background-color:rgba(175,79,214,0.01) !important;}


/* For MyAccount Dashboard --> */
    /* Dashboard box title */
.dashbaord-box-title {font-family: 'Roboto Condensed', sans-serif; font-weight:700;font-size: 16px;text-transform: uppercase; padding: 14px 16px;padding-bottom: 0;}
.dashboard-sqloading-wrapper { display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; height:45px; }
.dashboard-sqloading-wrapper .sqLogoLoading {height:45px; width:45px;}
.dashboard-bestseller-wrapper {display:none;}  /*<-- initially hide first */
.see-all-next-more{line-height:16px;}

/* Product Performance+ */
.ppplus-wrapper {display:flex; flex-wrap:wrap; gap:16px; }
.ppplus-wrapper .ppplus-box {flex: 1 1 300px;padding:10px 16px; border-width:3px !important; min-height:120px;}
.ppplus-box .dashbaord-box-title {padding:0; padding-bottom:10px;}
.ppplus-box .td-prod-img {width:50px; padding:5px 0;}
.ppplus-box .td-prod-img .img {width:50px; height:50px; background-color:#eaeaea; display:block}
.ppplus-box .opt {max-width: 0; overflow: hidden; padding:0 10px;}
.ppplus-box .opt-bar-width-qty {width:110px;}
.ppplus-box .opt-bar-width-qty .qty-month-trend {display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:5px}
.ppplus-box .opt-bar-width-qty .qty-month-trend .month-trend {min-width:40px;}
.ppplus-bar-wrapper {background-color:#e9e9e9; height:10px; position:relative; border-radius:3px;}
.ppplus-bar-wrapper .bar-indicator {position:absolute;top:0; left:0; height:10px;z-index:2; border-radius:3px 0 0 3px;}
.ppplus-bar-wrapper .bar-indicator.full {border-radius:3px !important;}

/* Upsell */
.box-fulfill { border: solid 1px #eaeaea; padding: 15px; background-color: #fff; transition: all 0.5s ease-out 0s; }
.titleNA { font-size:30px; font-weight:300; margin-bottom:20px; font-family: 'Roboto Condensed', sans-serif; line-height:30px;}


.myaccount_titleheader_flexnowrap {padding:16px; display:flex; flex-wrap:nowrap; gap:15px;align-items:center}
.myaccount_titleheader_flexnowrap .myaccount_iconsize_titleheader {height: 50px; width: 50px}

/* card-reseller-myAccount */
.card-reseller-myAccount { margin:0 16px; padding:0;}

/*.resellerbonus.parent .campaign-wrapper {display:flex;flex-wrap:wrap; justify-content:center;}
.resellerbonus.parent .campaign-wrapper .campaign-cell {flex:1 1 407px; align-items:center;}*/ /* strecthing */
.target-cell .content-wrapper {padding: 8px 12px}
.target-cell .tinyfont{ font-size:0.76rem; }
.target-cell .img {display:block; width:100%; height:100%; max-width:425px;}
.target-cell .track-bar {display:grid; grid-template-columns: repeat(108, 1fr);}
.target-cell .row-bar {display:grid; align-content:center;}
.target-cell .row-bar .target-bar {display:grid; justify-content:stretch;}
.target-cell .row-bar .target-bar.end {display:flex; justify-content:flex-end; align-items:center}
.target-cell .row-bar .target-bar.end .icoArrowNext {height:7px;width:7px; margin-right:5px}
.target-cell .bar-height {height:7px;}
.target-cell .curve-left {border-bottom-left-radius:4px; border-top-left-radius:4px;}
.target-cell .curve-right {border-bottom-right-radius:4px; border-top-right-radius:4px;}
.target-cell .target-line {border-right:dashed 1px #999;}
.target-cell .message-wrapper {height:44px;}
.target-cell .message {text-align:center; font-size:0.86rem; line-height:1rem;}
.target-cell .bonus {width:16px;height:16px; margin-right:3px}

@media screen and (max-width: 480px) {
      .card-reseller-myAccount { margin:0;}

}

/* Box common */
.box-common-fix-width-1-4col {
    position: relative;
    overflow: hidden;
    flex: 0 1 231px; /*max browser width = 924, */
}
.box-common-stretch-width-3-4col {
    position: relative;
    overflow: hidden;
    flex: 1 1 693px; /*max browser width = 924, */
}
.box-common-fix-width-1-3col {
    position: relative;
    overflow: hidden;
    flex: 0 1 308px; /*max browser width = 924, */
}
.box-common-stretch-width-2-3col {
    position: relative;
    overflow: hidden;
    flex: 1 1 616px; /*max browser width = 924, */
}
.box-common-stretching-width {
    position: relative;
    overflow: hidden;
    flex: 1 1 300px;
} 
@media screen and (max-width: 1235px) {
     .box-common-fix-width-1-4col {flex: 1 1 924px; /*max browser width = 924, */}
   
     .auto-demote-left-days-width {width:100% !important}
}


/* My Progression Style ::
       used at 2 places :: My Progression Page & My Progression Demo page */
.autopromotedemote-grid-content { display: grid; grid-template-columns: 200px 1fr; align-items: center; padding: 20px 16px; }
.autodemote-grid-content{ display: grid; grid-template-columns: 200px 1fr; align-self: center; }
/* Auto Demote Left-Days Pie Chart */
.auto-demote-fixed-height {height:200px;}
.auto-demote-left-days-width {width:231px}
@media screen and (max-width: 500px) {
    .autopromotedemote-grid-content { display: grid; grid-template-columns: unset;}
    .autodemote-grid-content{display: grid;grid-template-columns: 130px 1fr;align-self:start;}

}

/* Squarelet AI Style */
.keytrend-sqai-right-wrapper {display:grid;  grid-template-columns:25px 1fr; align-items:center}
.sqai-generated-wrapper {display:flex;gap:3px}
.sqai-icon-style {display:grid; height:20px; width:20px; place-items:center; font-family: 'Roboto', Arial, sans-serif;}