/* #49176d */
body {background: white;font-family: 'Open Sans';font-size: 15px;color: #000;padding: 0px;margin: 0px; font-weight: 500; }
input {font-family: 'Open Sans';}
.container {width: 1200px;margin-left: auto;margin-right: auto;vertical-align: top;}
.containerFlex {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.containerFooter {max-width: 1400px;margin-left: auto;margin-right: auto;vertical-align: top;}
a {color: blue; }
.k-primary {background-color: rgb(0,37,65); border-radius: 0px; }
input[type=text], input[type=number], input[type=password], textarea {border-radius: 8px; padding: 8px; border-width: 1px; border-color: #ccc; outline: 0px; font-family: 'Montserrat', sans-serif; box-sizing:border-box !important; }
input:read-only, textarea:read-only {background-color: #eee;}
.windowDialogMessage {text-align: center;}
ul, ol {  list-style-position: inside;}

/*********************************************/
/*   Promotion Sub Banner  */
/*********************************************/
.divPromoFlyerArea { margin-top: 30px; }
.divPromotionSubBannerOuterArea { display: flex; margin-bottom: 50px; margin-top: 30px; justify-content: center; gap: 20px;  }
.divPromotionSubBannerArea { border-radius: 10px; overflow: hidden; background-color: #f7f5f5; max-width: 400px; }
.divPromotionSubBannerImg { margin-bottom: 15px; width: 100%; }
.divPromotionSubBannerInfoArea { display: flex; }
.divPromotionSubBannerInfoTextArea { margin-right: 10px; padding-bottom: 10px; padding-left: 20px; flex:1; }
.divPromotionSubBannerTitle { font-weight: bold; }
.divPromotionSubBannerSubTitle { color: #666; font-size: 12px; }
.divPromotionSubBannerButton { background-color: #1560a7; display: inline-block; color: white; text-decoration: none; border-radius: 20px; margin-right: 20px; padding: 5px 15px; font-size: 12px; margin-bottom: 10px; }
/* Promotion Online Banner */
.divWebPromotionOnlinBannerMainArea { margin-bottom: 50px; }
.divWebPromotionOnlineBannerTitle { text-align: center; margin-bottom: 30px; }
.divWebPromotionOnlineBannerOuterArea { display: flex; justify-content: center; gap: 20px; }
.divWebPromotionOnlineBannerArea { max-width: 400px; }
.divWebPromotionOnlineBannerImage { width: 100%; }

/*********************************************/
/*   General -Input Area + Button  */
/*********************************************/
.divTnCArea ul, .divTnCArea ol { margin-left: 25px; }
.buttonUploadProofPurchase { margin-top: 25px; }
.divWebRedeemCaption { font-size: 14px; line-height: 18px; }
.divcheckboxTnC { font-size: 15px; line-height: 19px; }
.divTnCArea { font-size: 15px; line-height: 19px; }
.k-button.buttonSubmit { padding: 13px; font-size: 18px; line-height: 22px; border-radius: 25px; margin-top: 15px;  }
.divWebRedeemRowCol.marginRight { margin-right: 20px; }
.divWebBookingDataConfirmTitle { font-size: 25px;  }
.divWebBookingDataConfirmSubTitle { font-size: 18px; }
.divWebBookingConfirmCaption { font-size: 18px; margin-bottom: 10px; }
.divWebBookingConfirmEmailCaption {font-size: 22px;  margin-top: 25px; margin-bottom: 25px; }
#divSlickHomePage { margin-bottom: 15px; }
.imgWebHeaderPhoto { width: 100%; margin-bottom: 10px; }
.colorActive { color: green; }
.colorDeactive { color: red; }
.divMobileShow {display: none; }
.divWebDataArea { padding-bottom: 30px; }
.divListImage { max-height: 80px; width: 105px; object-fit: contain;  }
.divListLargeImage { max-height: 120px; width: 165px; object-fit: contain;  }
.divWebMobileToggleIcon {display: none; }
.divWebHeaderNavMenuArea { flex:1; display: flex; justify-content:center;align-items: center; }
.divWebHeaderNav { text-align: center; padding: 0px 20px; transition: 0.3s; font-size: 12px; color: white; cursor: pointer; text-decoration: none; border-right: 1px solid white; }
.divWebHeaderNav:hover {color: #9f9f9f; }
.divWebHeaderNavMenuArea > *:last-child {border-right: 0px; }
.divWebHeaderHavClose {color: black; text-align: right; font-size: 12px; }
.divWebHeaderHavClose i {font-size: 20px; padding-left: 6px;}
.divWebFooterNavArea {display: flex; font-size: 14px; }
.divWebFooterNavSubArea {flex: 1; padding-right: 10px;padding-bottom: 35px; padding-top: 35px; }
.divWebFooterCopyRightArea { padding: 10px 0px; border-top: 1px solid #ccc; font-size: 12px; }
.divWebFooterTitle {font-size: 16px; padding-bottom: 25px; font-weight: bold;  }
.divWebBreadcrumb {color: #0D2EA0; text-decoration: none; display: inline-block; margin-left: 8px; margin-right: 8px; }
.divWebBreadcrumbFirst {margin-left: 0px; }
.divWebBreadcrumb:hover { color: #2a50d5; }
.divWebBookingMainOuterArea {display: flex; margin-bottom: 100px;}
.divWebBookingBookingInfoArea {width: 300px; margin-right: 15px; padding: 15px; border-radius: 8px; background-color: #0D2EA0; color: white;}
.divWebBookingBookingDataArea {flex:1; padding: 15px; border: 1px solid #888; border-radius: 8px;}
.divWebBookingInfoTitle {text-align: center; margin-bottom: 15px; max-width: 250px; }
.divWebBookingBottomButtonArea {display: flex; padding-top: 12px; }
.divWebBookingBottomButtonLeftArea, .divWebBookingBottomButtonRightArea {flex: 1; }
.divWebBookingSubCaption { margin-bottom: 10px;}
.divWebBookingClassImage {width: 100%; object-fit: contain; }
.divWebAppointmentRow {display: flex;}
.divWebAppointmentDataArea {flex:1; display: flex; margin-bottom: 15px; align-items:center; }
.divWebAppointmentDataArea.paddingRight { padding-right: 15px; }
.divProductGroupArea.noPhoto {min-height: 345px; }
.divProductGroupCaptionArea { background-color: #0D2EA0; text-align: center; padding: 10px; color: white; font-size: 18px; font-weight: bold; width: 100%;  }
.divProductGroupArea {flex-basis: calc(50% - 5px); text-decoration: none; display: flex; align-items: center; flex-direction:column; justify-content:center; height: 100%; margin-right: 10px; margin-bottom: 10px; cursor: pointer; position: relative; }
.divProductGroupImage { position: relative; width: 100%; transition: transform .5s ease; }
.divWebBreadcrumbs {font-size: 14px; }
.divProductGroupArea {margin-bottom: 40px;}
.divButtonProductBook { position: absolute; bottom: -24px; background-color: #335ff4; color: white; border-radius: 10px; font-size: 16px; font-weight: bold; padding: 12px 35px; }


.inputDataArea { padding-bottom: 10px; }
.caption {font-weight: bold; padding-bottom: 5px;}
.inputData {width: 100%; max-width: 250px; }
.inputDataText, .inputDataSelect { }
.divButtonArea {margin-top: 10px;}
.k-button { padding: 7px 50px; font-size: 15px; line-height: 18px; }
.buttonPrimary { background-color: rgb(13,46,161); border-color: rgb(13,46,161); color: white; }
.k-button.buttonPrimary:hover {background-color: rgb(3 35 149); color: white; }
.iconAvailable {font-size: 24px; color: green; }
.iconUnavailable {font-size: 24px; color: red; }
.divHeaderLogoCaption {color: white; display: inline-block; vertical-align: top; font-size: 25px; padding-top: 10px; padding-left: 8px;}
.divMainContentArea { padding: 10px; padding-left: 230px;   }
.divButtonArea {padding-left: 10px; margin-top: 0px;}
.divReportCaption {display: inline-block; margin-right: 10px;}
.divReportFilterRow {display: flex; margin-bottom: 5px; align-items:center;}
.colorSubTotal { color: rgb(13,46,161); }
.k-grid-header th.k-header>.k-link {font-weight: bold;}
/* ToolTip */
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; }
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }
.tooltip:hover .tooltiptext { visibility: visible;}

/*********************************************/
/*   General -Table  */
/*********************************************/
.divPageSearchOuterArea {display: inline-block; margin-bottom: 5px;}
.divTableHeaderArea {display: flex; padding: 0px 10px;}
.divTableHeaderSubtitle {width: 100%; max-width: 300px; padding: 10px; border-radius: 8px; display: flex;}
.divTableHeaderSearchArea i {font-size: 20px; color: #ccc; margin-left: 0px; margin-right: 8px;}
.divTableHeaderSearchArea {width: 100%; max-width: 300px; padding: 10px; border-radius: 8px; background-color: white; border-color: rgb(231,233,238); display: flex;}
.divTableHeaderSearchArea.divSearchAreaGrey {background-color: #eee; margin-right: 10px; }
.divTableHeaderSearchBox { font-size: 14px; line-height: 14px; border: 0px; outline: 0px; width: 100%; background-color: transparent; }
.divFilterKendoDropdown {background-color: transparent; width: 90%; max-width: 230px;}
.divTableHeaderSelect { padding: 5px 10px; margin-left: 10px; min-width: 250px; }
.divTableHeaderButtonArea { width: 30%; text-align: right; display: flex; align-items: self-end; }
.divTableHeaderButtonAreaSubtitle {font-size: 10px; color: #aaa; line-height: 12px;}
.divTableHeaderLeftArea {width: 50%; text-align: left; }
.divTableHeaderRightArea {width: 50%; text-align: right; display: flex; justify-content: end;}
.divTableHeaderDateRange {font-size: 14px; line-height: 14px; background-color: transparent;}
.divPOSTableArea {margin: 10px;}
.divListRight {text-align: right; }
.divOrderProductAreaHeader {display: flex; }
.divOrderProductTotalPrice { width: 165px; text-align: right; box-sizing: border-box; font-weight: bold; padding-right: 10px; display: flex; align-items: center; }
#divOrderProductListArea .divOrderProductTotalPrice { padding: 5px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divOrderProductNo { width: 50px; box-sizing: border-box; text-align: center; border-right: 1px solid #888; border-bottom: 1px solid #888; border-left: 1px solid #888; display: flex; align-items: center; justify-content:center; }
.divOrderProductItem {flex: 1; padding-right: 10px; }
.divOrderProductUnitPrice { width: 165px; box-sizing: border-box; text-align: right; display: flex; align-items: center; padding: 5px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divOrderProductQuantity { width: 120px; box-sizing: border-box; text-align: center; display: flex; align-items: center; padding: 5px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divOrderProductAreaHeader .divOrderProductRemove {border-right: 1px solid #888; box-sizing: border-box; }
.divOrderProductArea {display: flex; }
.divOrderProductRemove {width: 100px; display: flex; align-items: center; justify-content:center; box-sizing: border-box; padding: 12px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divOrderProductAreaHeader .divOrderProductRemove {width: 101px;}
.divSummaryAddressOuterArea {display: flex;}
.divSummaryProductArea {display: flex;  }
.divSummaryProductName { border-top: 1px solid #888; }
.divSummaryProductNo { width: 40px; text-align: center; padding: 8px; border-left: 1px solid #888; border-top: 1px solid #888; border-right: 0px solid #888; }
.divSummaryProductDescription {flex:1; font-weight: bold; padding: 8px; border-left: 1px solid #888; border-top: 1px solid #888; border-right: 1px solid #888;}
.divSummaryProductUnitPrice, .divSummaryProductTotalPrice { width: 120px; padding: 8px;text-align: right; border-top: 1px solid #888; border-right: 1px solid #888;}
.divSummaryProductUnitPrice { width: 160px; }
.divSummaryProductQuantity { width: 80px; text-align: center; padding: 8px;border-top: 1px solid #888; border-right: 1px solid #888;}
.divOrderAddressAreaRow {display: flex;}
.divOrderAddressArea {flex: 1; padding: 0px; border: 1px solid #888; }
.divSummaryProductArea {display: flex;  }
.divTableOrderHistoryRow {display: flex;}
.divOrderAddressArea .divViewOrderCaption { padding-left: 5px; }
.divOrderAddressArea .divViewOrderData { width: calc(100% - 150px); }
.divTableOrderHistoryDate {flex:1; padding: 8px; border-left: 1px solid #888; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderHistoryStatus {flex:1; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderHistoryComment {flex:6; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divOrderProductItem { padding: 5px; border-right: 1px solid #888; border-bottom: 1px solid #888; }

.divTableOrderProductShipUpdateDate {flex:1; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderProductShipCheckbox {width: 30px; text-align: center; padding: 8px; border-left: 1px solid #888; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderProductShipNo { width: 40px; text-align: center; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderProductShipSOBDate {flex:1; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderProductShippedOrderQuantity {flex:1; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderProductShipOrderQuantity {flex:1; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }
.divTableOrderProductShipOrderProductName {flex:5; padding: 8px; border-right: 1px solid #888; border-bottom: 1px solid #888; }

/*********************************************/
/*   General - Data Input  */
/*********************************************/
.divPageTitle {margin-bottom: 15px;}
.divPageSubTitle {font-size: 16px;}
.divPOSSettingArea.first {margin-top: 15px;}
.divPOSSettingArea {margin-bottom: 15px; padding: 0px 0px;}
.divPOSSettingCaption {padding-bottom: 8px;}
.divPOSSettingValue {width: 100%;}
input.divPOSSettingValue, select.divPOSSettingValue, textarea.divPOSSettingValue {padding: 8px; font-size: 12px; line-height: 14px; box-sizing: border-box;}
.divPOSSettingButtonArea {border-top: 1px solid #ddd; padding: 20px 20px; text-align: right; padding-bottom: 0; }
.divPOSSettingButton {font-size: 15px; line-height: 18px; padding: 10px 25px; background-color: #1a75ff; color: white;  }
.k-button { background-color: #1a75ff; color: white; }
.divPOSSettingButton:hover { background-color: #196dec; color: white; }
.k-button:hover { background-color: #196dec; color: white; }
.divOrderPageOrderNumber {font-weight: bold; color: #c1946a; }
.divFlexArea {display: flex;}
.divFlex50 {width: 50%; }
.divFlexFit {flex: 1; }
.marginRight {margin-right: 10px;}

/*************************/
.divListData {line-height: 14px;}
.btnGreen {background-color: green;}
.btnRed {background-color: red;}
.divLoginForgotPassword {margin-top: 15px; display: inline-block;}
.btnNormal {padding-left: 20px; padding-right: 20px;}
.divAvailableCredit {font-size: 28px; color: blue;}
.divAvailableCredit.noCredit {color: red;}

.divInputArea {text-align: left; margin-bottom: 5px;}
.divInputCaption {color: #888;}
.divInputValueArea {color: black; width: 100%;}
.divInputAreaMulti{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.divInputArea50 {width: 50%; display: inline-block; }
.divInputAreaMulti .divInputArea50:first-child {margin-right: 10px;}
.DataCaption {width: 180px; text-align: left;}

/*************************/
.divDesktopLogoArea {display: inline-block; box-sizing: border-box;}
.divHeaderTitle {margin: 0px; margin-top: 12px; width: 220px; font-size: 35px; color: rgb(0,37,65); margin-left: 20px; display: inline-block; vertical-align: top; box-sizing: border-box;}
.headerLogo {margin: 10px; margin-left: 50px; display: inline-block;}
.divHeaderInfo {text-align: right;padding-top: 10px; padding-right: 10px; position: relative; display: block; margin-left: 100px;}
.divHeaderCaption {display: inline-block; color: white;}
.imgQRHeaderLogo {height: 50px;margin-top: 10px;object-fit: contain;}
.headerWithMenu.headerQRWithMenu {background-color: white; height: 70px;}
.headerWithMenu.headerQRWithMenu a {text-decoration: none;}
.divQRFooter {background: black;color: #ddd;}
.divFooterCopyright {color: #ddd; display: inline-block;}
.divFooterCopyright a {color:#ff2700; transition: 0.3s;}
.divFooterCopyright a:hover {color: white;}
.divFooterPrivacyArea {float: right; }
.divFooterLink {display: inline-block; text-decoration: none; color: #ff2700; transition: 0.3s; padding-right: 15px; padding-left: 15px; font-size: 12px; border-right: 1px solid #ddd;}
.divFooterTerms {border-right: 0px;}
.divFooterLink:hover {color: white;}

/*************************/
.headerLogo {margin: 10px; margin-left: 50px; display: inline-block;}
.headerWithMenu {background-color: rgb(0,0,45); position: fixed; width: 100%; z-index: 9; height: 50px; }
.divHeaderInfo {text-align: right;padding-top: 10px; padding-right: 10px; position: relative; display: block; margin-left: 100px;}
.divHeaderCaption {display: inline-block; color: white;}
.divFilterArea {display: inline-block;vertical-align: top; margin-right: 8px; margin-bottom: 5px;}
.divFilterText {width: 200px; padding: 0px 4px;}
.divFilterSelect {width: 200px; padding: 4px 4px;}

.imgHeaderLogo {width: 100%; max-width: 300px; height: auto; object-fit: contain;}
/***************************************/
/************  GENERAL  ****************/
.imgNewsListPhoto {height: 75px; width: 200px; object-fit: contain;}
.imgNewsPhoto {height: 150px; width: 400px; object-fit: contain;}
* {margin: 0; padding: 0; box-sizing: border-box;}
.colorIEC {color: rgb(0,0,45) !important;}
.dataArea {padding: 10px 20px; display: inline-block; width: 100%;}
.linkTableEdit, .link {color: blue; text-decoration: underline; cursor: pointer;}
.linkWhite {color: white; text-decoration: underline; cursor: pointer;}
.divFilter {margin-top: 10px; margin-bottom:5px;}
.btnFilter {padding-left: 18px; padding-right: 18px;}
.inputSearchUsername {padding: 0px 4px; width: 200px;}
.k-overlay {cursor: pointer;}
.divLanguageChi, .divLanguageEn {cursor: pointer; border-bottom: 1px solid white;}
.divCurrentLanguage {cursor: initial; border-bottom: 0px;}
.divMemberSlide {margin-top: 20px; margin-left: 5px;}
.divWebsiteHeaderWithMenu .divHeaderLanguageArea {background: transparent; position: absolute; z-index: 2; width: 100%;}
.divDesktopHeaderLogo {display: inline-block; position: absolute; left: 15px; top: 15px; }
.divDesktopHeaderLogo .imgHomeDesktopLogo {width: 250px;}
.divDesktopMenu {position: absolute; right: 0px; padding: 20px 20px; background: rgb(0,37,65); color: white; font-size: 15px; top: 40px; padding-right: 170px; height: 60px; }
.desktopMenuLink {border-right: 1px solid white; padding-right: 15px; padding-left: 15px; padding-top: 0px; padding-bottom: 0px; display: inline-block;}
.desktopMenuLink.last {border-right: 0px solid white;}
.desktopMemberLink {color: rgb(0,150,186); padding-left: 20px;}
.desktopMenuLink:hover {color: rgb(0,150,186);}
.desktopMemberLink:hover {color: white;}
.divWebsiteHeaderWithMenu .divHeaderLanguage {position: absolute; top: 40px;z-index: 99; width: 140px; right: 0px; height: 60px; padding-top: 20px; }
.divWebsiteTitle {text-align: center;}
.divWebsiteFooter {background: rgb(0,150,186); text-align: right; margin-top: 20px;}
.divDesktopFooterLogo .imgHomeDesktopLogo {width: 100px; display: inline-block; margin: 10px 30px; }
.divProjectArea {margin-left: 50px; margin-right: 50px; margin-top: 10px;}
.divProject {width: calc(20% - 3px); display: inline-block; margin-bottom: 10px;}
.divProject img {width: 100%; height: 300px; object-fit: contain; cursor: pointer; }
.divProject .title {text-align: center; font-size: 15px;}

/**************************************/
/************  POPUP  *****************/
div.k-window {border-width: 0px!important;}
#windowRefer{position: relative; padding: 0px; margin: 0px;z-index: 1000005;}
.windowReferPopupArea {position: relative; }
#imgWindowPopupReferBackground {object-fit: contain;width: 100%;}
.windowReferPopupTextArea {position: relative; text-align: center; padding: 10px 10px;}
.windowReferPopupTextArea .title {font-size: 30px; color: #49176d; line-height: 30px; letter-spacing: 2px; font-weight: bold; padding: 0px 40px; margin-bottom: 10px;}
.windowReferPopupTextArea .title.smaller {font-size: 20px;line-height: 25px;}
.windowReferPopupTextArea .subTitle {font-size: 13px; color: black; margin-bottom: 12px; line-height: 22px;}
.windowReferPopupTextArea .referCode {font-size: 25px; color: #49176d; letter-spacing: 2px;font-weight: bold; line-height: 22px;}
.windowReferPopupTextArea .copyCode {font-size: 12px;color: #9e65c7;}
.windowReferPopupTextArea .showNow {font-size: 14px;color: white; background: #49176d; padding: 7px 30px; display: inline-block; cursor: pointer; margin-bottom: 10px;}
.windowReferPopupTextArea .showNow:hover {opacity: 0.7;}
.windowReferPopupTextArea .description {font-size: 10px; color: black;margin-bottom: 10px;}
.windowReferPopupTextArea .terms {font-size: 10px; text-decoration: underline; color: black;cursor: pointer;}
.windowReferPopupTextArea .terms:hover {opacity: 0.7;}
#windowFirst{position: relative; padding: 0px; margin: 0px;z-index: 1000005;}
.windowFirstPopupArea {position: relative; line-height: 0px; overflow: hidden;}
.windowFirstPopupExit {position: absolute; display: inline-block;right: 8px;top: 5px;font-size: 20px; cursor: pointer; color: white;}
.windowFirstPopupBtnSignUp {position: absolute; bottom: 105px; left: 20px; font-size: 15px; line-height: 20px; padding: 10px 20px; background: yellow; color: #333; font-weight: bold; cursor: pointer; }
.windowFirstPopupBottomLink {position: absolute; bottom: 20px; font-size:11px; line-height: 15px; width: 100%; color: yellow; }
.windowFirstPopupLinkNothanks {position: absolute; bottom: 0px; left: 20px; border-bottom: 1px solid yellow; cursor: pointer; }
.windowFirstPopupLinkRight {position: absolute; bottom: 0px; right: 20px; }
.windowFirstPopupLinkSignIn {border-bottom: 1px solid yellow; cursor: pointer; display: inline-block;}
.imgWindowPopupBg {object-fit: contain;}
#windowSecond {position: relative; padding: 0px; margin: 0px;border-radius: 50%; border: 3px solid rgb(197, 4, 128); background: rgb(243, 160, 226);}
.windowSecondPopupExit {display: inline-block; position: absolute; right: 30px; top: 40px; padding: 10px; font-size: 18px; color: white; font-weight: normal; cursor: pointer;}
.windowFindMyFitPopupExit {display: inline-block; position: absolute; right: 30px; top: 25px; padding: 10px; font-size: 15px; color: white; font-weight: normal; cursor: pointer;}
.windowTransparent {background:transparent; background-color: transparent!important; box-shadow: none !important;}
.windowSecondPopupArea {position: relative; }
.windowSecondPopupTextArea {position: relative; top: 80px; padding:0 20px; text-align: center; color: #49176d;}
.windowSecondPopupTextArea .title {font-size: 13px;}
.windowSecondPopupTextArea .mainTitle {font-size: 25px; margin-bottom: 15px; margin-top: 8px;}
.windowSecondPopupNo {color: white; border-bottom: 1px solid white; cursor: pointer; display: inline-block; padding-bottom: 3px; margin-bottom: 5px; font-size: 13px;}
.windowSecondPopupYes {color: rgb(238, 73, 156); border-bottom: 1px solid rgb(238, 73, 156);cursor: pointer; display: inline-block; padding-bottom: 3px; }

/***************************************/
/************  HEADER  *****************/
header{background-color: white;}
.headerPromotion {font-size: 11px;background-color: #49176d;color:white;text-align: center;padding-top: 3px;padding-bottom: 3px;word-spacing: 2px;letter-spacing: 3px;}
.divheaderSearch {display: inline-block;width: 30%;text-align: left;vertical-align: top;}
#searchButton {margin: 0px; margin-top: 4px;width: 25px;height: 25px; cursor: pointer; opacity: 0.6;}
#searchButton:hover {opacity: 1;}
.divheaderLogo {display: inline-block;width: 35%;text-align: center;vertical-align: top;object-fit: contain;}
.divheaderInfo {display: inline-block;width: 30%;text-align: right;vertical-align: top;}
.divHeaderCart {margin-left: 15px;}
.divHeaderAccount ,.divHeaderCart {display: inline-block;font-weight: bold;color: #49176d;cursor: pointer;}
.divHeaderAccount img, .divHeaderCart img {height: 18px;width: 18px; object-fit: contain;}
.divHeaderAccount span, .divHeaderCart span {vertical-align: top;display: inline-block;margin-top: 0px;margin-left: 0px;}
.inputSearchOuter {display: inline-block; vertical-align: top;width: 280px;border-bottom: 1.4px solid #666; padding-bottom: 2px;}
.inputSearch {vertical-align: top;width: calc(100% - 60px); padding: 7px 2px; border: 0px; outline: 0px; display: inline-block;}
.imgSearchIconOut, .closeSearchButton {height: 25px; width: 25px; cursor: pointer;}
.closeSearchButton {height: 20px; width: 20px; margin-top: 5px;}
.imgSearchIconOut {margin-top: 4px; opacity: 0.6;}
.imgSearchIconOut:hover {opacity: 1;}
.divheaderCurrencies {display: inline-block; margin-right: 10px;}
.divheaderCurrencies .k-widget.k-dropdown{box-shadow: none; border: 0px;}
.divheaderCurrencies .k-dropdown-wrap {border: 0px;}
#m_HeaderCurrencies_listbox .k-state-selected, #m_HeaderCurrencies_listbox .k-list>.k-state-selected {background-color: #49176d!important; border-color: #49176d!important; }
.divMobileMenu {display: none;}

.divPointOuterArea {padding-top: 20px;}
.divPointOuterArea1 {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; }
.divPointOuterArea2 {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; }
.divPointArea {width: 33.3%; padding: 19px 8px; box-sizing: border-box; font-size: 15px; line-height: 21px; color: rgb(252,238,33); display: inline-block; border-top: 1px solid white; margin: 0px; margin-left: 5px; text-align: center;}
.divPointArea:first-of-type {margin-left: 5px;}
.divPointValue {font-size: 18px; color: white;}


/***********************************************************/
/******************  POPUP - MESSAGE  *********************/
#windowMessage, #windowTransfer, #windowCoinTrade, #windowSessionTimeout {padding: 10px 15px;}
#divWindowMessageExit, #divWindowTransferExit, #divWindowCoinTradeExit, #divWindowSessionTimeoutExit {position: absolute; top: 5px; right:8px; cursor: pointer; }
#windowMessageMessage, #windowTransferMessage, #windowSessionTimeoutMessage {margin-top: 15px; margin-bottom: 10px;}
#windowMesasgeOk, #windowMesasgeCancel {display: inline-block;cursor: pointer; background-color: rgb(0,0,45); color: white; box-shadow: 1px 1px 1px 1px rgb(171, 192, 251); padding: 10px 30px; border-radius: 3px;}
#windowTransferCancel, #windowTransferOk {display: inline-block;cursor: pointer; padding: 6px 30px; }
#windowTransferOk {color: white; background-color: rgb(0,0,45);}
#windowTransferAmount {width: 100%; box-sizing: border-box; padding: 3px; text-align: left;}

#windowSessionTimeoutCancel, #windowSessionTimeoutOk {display: inline-block;cursor: pointer; padding: 6px 30px; color: white; background-color: rgb(0,0,45); padding: 10px 30px; border-radius: 3px;}
#windowCoinTradeSubmitPaymentProof, #windowCoinTradeRelease {display: inline-block;cursor: pointer; padding: 6px 30px; }
#windowCoinTradeSubmitPaymentProof, #windowCoinTradeRelease {color: white; background-color: rgb(0,0,45);}
.divCoinTradeCaption {color: #aaa;}
.divCoinTradeData {}
.divCoinTradeQRCode {width: 50px; height: 50px; object-fit: contain;}
.divCoinTradePaymentProof {width: 100px; height: 100px; object-fit: contain;}

.divPopupPurchased {background: #49176d;width: 300px; position: fixed;bottom: 0;height: 110px;left: 40px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.divPopupPurchasedProductImage {width: 90px; margin: 10px;}
.divPopupPurchasedProductImage .productImage {width: 90px; height: 90px; object-fit: contain; }
.divPopupPurchased .divProductInfoArea {width: calc(100% - 110px); }
.divPopupPurchased .divProductInfoArea .divRemove {text-align: right; line-height: 15px; }
.divPopupPurchased .divProductInfoArea .divRemove i {color: #888888; font-size: 15px; margin-top: 8px; margin-right: 8px; cursor: pointer; line-height: 15px;}
.divPopupPurchased .divProductInfoArea .divProductInfo {color: white; letter-spacing: 1px; padding-left: 10px; padding-right: 10px; font-size: 11px; line-height: 15px;}
.divPopupPurchased .divProductInfoArea .divProductInfo .divProductName {color: rgb(249,204,209); font-size: 12px; line-height: 15px;}
.divPopupPurchased .divProductInfoArea .divPurchasedTime {color: #888888; padding-left: 10px; padding-right: 10px; font-size: 9px; line-height: 13px; }

/********************************************************/
/******************  POPUP - IMAGE  *********************/
#divImagePopupArea {border-radius: 5px;cursor: pointer; transition: 0.3s;}
.modal {display: none;position: fixed; z-index: 9; padding-top: 100px;left: 0;top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
.modal-content { margin: auto;display: block; width: 80%; max-width: 700px;}
#caption {margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;}
.modal-content, #caption {animation-name: zoom; animation-duration: 0.6s;}
@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}
.close {position: absolute; top: 15px; right: 35px;color: #f1f1f1; font-size: 40px; font-weight: bold;transition: 0.3s;}
.close:hover, .close:focus {color: #bbb; text-decoration: none; cursor: pointer;}
@media only screen and (max-width: 700px){
    .modal-content {width: 100%;}
}

/**********************************************/
/************  PAGE NOT FOUND  *****************/
.imgPageNotFound {text-align: center;margin-top: 50px;margin-bottom: 30px;}
.divPageNotFound {text-align: center;color: #49176d;margin-bottom: 150px;}

/**********************************************/
/************  PLACE HOLDER  *****************/
::-webkit-input-placeholder {color: #ccc;}
::-moz-placeholder {color: #ccc;}
:-ms-input-placeholder {color: #ccc;}
:-moz-placeholder {color: #ccc;}

/***************************************/
/************  MENU  *****************/
/*.sidenav {width: 250px; display: inline-block; position: absolute; background-color: rgb(0,0,45); color: white; height: calc(100% - 60px); overflow-x: hidden; transition: 0.5s;}*/
.headerImage {height: 40px; }
.menuDivider {content: "";border-top: 1px solid #555;}
.divMenuOuter {margin-top: 0px;text-align: center;}
.divMenuMainLayer:hover, .divMenuMainLayer.hovered {color: #49176d;}
.divMenuMainLayer {cursor: pointer;display: inline-block;min-width: 110px;text-align: center;font-weight: normal; }
.divMenuMainLayer:after {display:block;content: '';border-bottom: solid 1px #49176d;  transform: scaleX(0); transition: transform 250ms ease-in-out;}
.divMenuMainLayer:hover:after { transform: scaleX(1); }
.divMenuMainItem {padding-top: 10px; padding-bottom: 10px;}
.divMenuMainLayer > .divMenuMainItem > a {width: 100%;padding-top: 10px;padding-bottom: 10px;display: inline-block;}
.divMenuSale {color: #c01515;}
.divMenuPopup {background-color: white;position: absolute;width: 900px;z-index: 999;color: #555;box-shadow: 1px 1px 1px 1px #888888;padding: 20px;cursor: initial; margin-left: 150px;}
.divMenuPopup4 {width: 31%;}
.divMenuPopup2, .divMenuPopup3 {padding-left: 20px;}
.divMenuPopup1, .divMenuPopup2 {border-right: 1px solid #555;}
.divMenuPopup1, .divMenuPopup2, .divMenuPopup3 {min-width: 23%;text-align: left;font-weight: normal; padding-right: 15px;}
.divMenuPopupHeader {color: #49176d;font-weight: bold;padding-bottom: 10px;}
.divMenuPopupLayer:hover{color: #49176d;text-decoration: underline;}
.divMenuPopupLayer a {display: block; padding: 4px 0px;}
.stickyParent #stickyMenu {box-shadow: 0 0 3px 1px rgba(0,0,0,.2);}
#stickyMenu {padding-top: 10px;background-color: white;}
.sticky {position: fixed;top: 0;width: 100%;border-bottom: 1px solid #bbb;z-index: 999;}
.sticky .divMenuOuter {margin-top: 0px;}
.sticky .divMenuMainLayer > .divMenuMainItem > a {padding-top: 3px;padding-bottom:3px;}
.stickyParent + .ContentBody {padding-top: 120px;}
.imgMenuPopupImage {width: 90%;object-fit: contain;}
.divMobileMenuBack {position: fixed; width: 100%; height: 100%; background: #777; opacity: 0.8; z-index: 9998;}
.divMobileMenuArea {position: fixed; width: 80%; height: 100%; text-align: left; background: #49176d; z-index: 9999;}
.divMobileMenuArea .social .div3 {text-align: center; margin-top: 15px;}
.divMenuSocial {width: 30px; height: 30px; background: white; border-radius: 50%; display: inline-block; margin: 0px 15px; text-align: center; vertical-align: middle; }
.divMenuSocial img {width: 70%; height: 70%; object-fit: contain; margin-top:5px;}
.divMobileMenuArea .emailCaption {margin-top: 20px;}
.divMobileMenuArea .emailCaption, .divMobileMenuArea .emailData {text-align: center; color: white;}
.divMobileMenuArea .logo {text-align: center; padding-top: 15px; padding-bottom: 8px; border-bottom: 1px solid #888;}
.divMobileMenuArea .logo .imgLogo {width: 120px; object-fit: contain;}
.divMobileMenuArea .searchArea {padding: 8px 0px; padding-left: 15px;border-bottom: 1px solid #888;}
.divMobileMenuArea .inputSearchMobile {width: 200px; background: transparent; box-shadow: none; outline: none; border-width: 0px;}
.divMobileMenuArea .searchIconMobile {float: right; margin-right: 15px; margin-top: 3px; width: 18px; height: 18px; object-fit: contain;}
.divMobileMenuArea .menu {color: white; border-bottom: 1px solid #888; font-size: 10px;}
.divMobileMenuArea .menu a, .divMobileMenuArea .menu div {width: 100%; padding: 5px 0px; padding-left: 15px; display: inline-block; box-sizing: border-box;}
.divMobileMenuArea .menu i {margin-left: 10px;}
.divMobileMenuArea .menu.SubMenu {padding-left: 20px;}

/***********************************************************/
/************************  PAGE ****************************/
.btnTransfer {margin-top: 5px;}

/**************************************************************/
/************************  GEOLOGY ****************************/
.treeGenealogy ul {display:inline-block; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s;-moz-transition: all 0.5s;}
.treeGenealogy li {list-style-type: none;position: relative;	padding: 10px 0 0 25px; width:102%;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;}
.treeGenealogy .geoItem::before {content: '';position: absolute; left: 8px;border-bottom: 1px solid rgb(0,0,45);	width: 17px; height:.5em;}
.treeGenealogy li::after{right: auto; left: 50%;	border-left: 1px solid black;}
.treeGenealogy ul ul::before{content: '';position: absolute; top: 0; left: 7px;	border-left: 1px solid rgb(0,0,45);width: 0; height: 100%; padding-bottom: 10px;}
.treeGenealogy li .geoItem{min-width: 230px; border: 1px solid #ccc;padding: 5px 10px;text-decoration: none;color: #666;font-size: 14px; line-height:18px; display: inline-block;	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;}
.treeGenealogy li > ul {display:block}
.treeGenealogy > ul > li > .geoItem:before {width: 0px;}
.treeGenealogy > ul > li {padding-top: 0px; padding-left: 3px;}
.geoItem .package {color: #808080; font-size: 11px; line-height: 13px;}
.geoItem .kickout {color: #ff2e00;}
.geoItem .asset {color: #393eff;}
.geoItem .reward {color: #393eff;}
.geoItem.clickable:hover {background-color: #ccc;cursor: pointer;}
.data {font-weight: bold; color: black;}
.description {color: #808080; font-weight: normal;}

/**********************************************************************/
/************************  MY ACCOUNT PAGE ****************************/
.divProfileTable thead td {text-align: center; color: #888;}
.divProfileTable {border-collapse:collapse;width:100%;border-top:1px solid #dddddd;border-left:1px solid #dddddd;margin-bottom:20px}
.divProfileTd {border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;text-align:left;padding:7px;color:#222222; line-height: 18px;}
.divProfileTd a {text-decoration: underline;}

/*************************************************************/
/************************  TABLE ****************************/
.divTable {margin-top: 10px;}
.divTableRow {border: 1px solid #ccc; border-bottom:0px ; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.divTableRow:last-of-type {border-bottom: 1px solid #ccc;}
.divTableCaption {padding: 7px 7px; display: inline-block; width: 200px; text-align: left; vertical-align: middle; border-right: 1px solid #ccc; color: #888; font-size: 12px;}
.divTableData {padding: 7px 7px; width: calc(100% - 200px); text-align: left;}

/***** HEADER Lanauge ****/
/* background: rgb(0,150,186) */
/* rgb(0,37,65) */
.divHomeTitle {font-size: 25px; line-height: 35px; color: rgb(0,37,65); margin-top: 20px; font-weight: bold; }
.slick-dotted.slick-slider {margin-bottom: 0px;}
.slick-prev:before, .slick-next:before {font-family: 'Montserrat', sans-serif; font-size: 40px; color: #fff; font-weight: 100;}
.slick-prev:before {content:"❮"}
.slick-next:before {content:"❯"}
.slick-next {right: 10px;z-index: 1;}
.slick-prev {left: 10px;z-index: 1;}
.slick-dots li button:before {font-size: 10px; opacity: 1; color: #C6C4BE;}
.slick-dots {text-align: center; bottom: 15px; right: 15px; display: inline-block !important; width: auto; left: 0px;}
#mySidenav {display: block;}
.divHeaderLanguageArea {background: rgb(0,37,65); text-align: right;}
.divHeaderLanguage {color: white; background: rgb(0,150,186); display: inline-block; margin-right: 0px; padding: 15px 30px; font-size: 17px;}
.divLoginArea {border: 1px solid rgb(179, 179, 179); border-radius: 6px; padding: 28px 25px; width: 420px; text-align: center; display: inline-block; background-color: white; margin-top: 20px;}
#SubmitButton {font-size: 17px; font-weight: bold; width: 100%; margin-top: 10px; }
.divMobileToggleIcon {display: block;}
.divHomeProfile {margin-right: 10px; margin-left: 10px; width: 400px; display: inline-block; background-color: red; vertical-align: top; margin-top: 20px; background: white; border: 1px solid #777; padding: 20px 20px;}
.divHomeDataArea {width: calc(100% - 444px); display: inline-block; }
.divHomeArea {padding-top:50px; }
.headerBalance {right: 10px; font-size: 15px; color: rgb(0,150,186); margin-top: 3px; font-weight: lighter;}
.headerBalance .divDesktopHomeNameLink {color: rgb(0,150,186);}
.sideBackground {display:none; position: fixed; height: 100%; width: 100%; background-color: rgba(33,33,33,0.4);transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;z-index: 10; cursor: pointer;}
.divPointOuterArea1 .divPointArea {background-color: rgb(0,150,186); }
.divPointOuterArea2 .divPointArea {background-color: rgb(0,109,143); }
.linkHomeDesktopLogo {display: inline-block;}
.imgHomeDesktopLogo {width: 100px; height: 100px; object-fit: contain; margin-bottom: 20px; }
.divDesktopHomeName {color: rgb(0,37,65); font-size: 18px; }
.divDesktopHomeNameLink {color: rgb(0,37,65); }
.divDesktopHomeNameLink:hover {text-decoration: underline;}

.sidenav {height: 100%; width:230px; position: fixed; z-index: 100;top:50px;left: 0; background-color: white; overflow-x: auto; transition: 0.5s; padding-top: 0px; }
.sidenav .closebtn { position: absolute;top: 21px;left: 0;}
.sidenav .mobileSideMenuLink.active, .sidenav .mobileSideMenuLink:hover, .dropdown-btn:hover {background-color: rgb(235, 239,246); color: rgb(7,42,112); font-weight: bold; opacity: 1;}
.sidenav .mobileSideMenuLink, .dropdown-btn { padding: 15px 0px 15px 8px; border-radius: 0px; opacity: 0.5; text-decoration: none; font-size: 13px; color: rgb(0,37,65); display: block; border: none; background: none; width: 100%;text-align: left; cursor: pointer; outline: none; box-sizing: border-box; transition: 0.3s;  }
.sidenav i.iconLeft {margin-right: 5px; font-size: 15px; font-weight: 900; }
.active { background-color: rgb(235, 239,246); color: rgb(7,42,112); opacity: 1;}
.dropdown-btn.active:hover {background-color: rgb(235, 239,246); color: rgb(7,42,112); opacity: 1;}
.dropdown-container { display: none; background-color: #f3f2f2; padding-left: 0px;}
.sidenav .divMenuCaption {padding-left: 3px; font-size: 11px; color: #007dc5; padding-top: 12px; padding-bottom: 3px;}
.sidenav .dropdown-container a {padding-left: 18px;}

.desktopSideNav {height: calc(100% - 60px);width:100%; margin-top: 20px; margin-bottom: 0px;}
.desktopSideNav .closebtn { position: absolute;top: 21px;left: 0;}
.desktopSideNav a:hover, .dropdown-btn:hover {background-color: #eee; color: rgb(0,0,45); font-weight: bold;}
.desktopSideNav a, .desktopSideNav .dropdown-btn { padding: 16px 0px 16px 8px; text-decoration: none; font-size: 15px; color:rgb(0,37,65); display: block; border: none; background: none; width: 100%;text-align: left; cursor: pointer; outline: none; box-sizing: border-box; transition: 0.3s; border-top: 1px solid #ccc; }
.desktopSideNav .dropdown-container { display: none; background-color: #f3f2f2; padding-left: 0px; transition: all 0.5s; }
.desktopSideNav .dropdown-container a {padding-left: 27px;}
.divDesktopHomeLogoutBtn {color: white; padding: 18px; width: 100%; display: inline-block; font-size: 16px; background:rgb(0,150,186); text-align: center; }
.divDesktopHomeLogoutBtn:hover {background: rgb(0,37,65);}

.divStoreArea {width: 100%; padding: 12px 5px;}
.divStoreItemPhoto {width: 300px; height: auto; display: inline-block;}
.divStoreItemDetail {width: calc(100% - 305px); display: inline-block; vertical-align: top; padding-left: 10px;}
.divStoreItemName {font-size: 30px; font-weight: bold;}
.divStoreItemDateTime {font-size: 20px;}
.divStoreItemDateTime .divDate, .divStoreItemDateTime .divTime {font-weight: bold;}
.divStoreItemLocation {font-size: 16px; color: #888;}

.divItemPhoto {width: 100%;margin-top: 10px; margin-bottom: 10px;}
.divItemDescription {margin-top: 10px;}
.divItemSubTitle {font-size: 15px;margin-top: 10px; margin-bottom: 3px; font-weight: bold;}
.divItemPhotoSeat {width: 100%; margin-top: 15px; }

#divItemRequiredPoint.invalid {color: red;}
.divItemPurchaseArea {margin-bottom: 50px; margin-top: 20px; font-size: 15px;}
.divItemPurchaseArea select {font-size: 14px; width: 200px;}
.divItemCaption {margin-bottom: 8px;}
.buttonItemPurchase {padding: 10px 30px; font-size: 20px; text-align: center; cursor: pointer; background-color: rgb(0,150,186); color: white; }
.buttonItemPurchase:hover {background-color:rgb(0,37,65); }

/******************************************************/
.zmrcntr {display: none;}
.divImportantArea {background: #f7d94a; padding: 10px; text-align: center; margin-top: 10px;}
.divImportantArea .title {font-size: 20px; font-weight: bold; margin-bottom: 20px;}
.divImportantArea .message {font-size: 15px;}
#treeNew {  }
#treeNew .divGenealogyNode {padding: 4px 5px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background-color:rgb(0,109,143);border: 1px solid #000;width: 200px;color:#ddd;}
#treeNew .divGenealogyNode .divGeoUsername {color: white; font-size: 14px;}
#treeNew .divGenealogyNode .divRegister {color: white; text-align: center; text-decoration: underline; font-size: 15px; padding: 10px 0px; }
.disabled {background: #ddd; border: none; outline: none; }