@charset "UTF-8";

:root {
  --primary: #281a70;
  --secondary: #ffd259;
  --color-success: #40d0cb;
  --color-danger: #ff5959;
  --color-warning: #ffd259;
  --color-info: #00b5ff;
  /* --content-bg: #281a70; */
  --pop-bg: rgba(0, 0, 0, .4);
  --pop-bg-content: #281a70;
  --pop-bg-shadow: rgba(0, 0, 0, .05);
  --pop-mask-bg: color-mix(in srgb, var(--pop-bg), transparent 30%);
  --nav-icon-normal-bg: #222222;
  --nav-icon-active-bg: #ffb80c;
  --menu-icon-normal-bg: #222222;
  --menu-icon-active-bg: #ffffff;
  --icon-all-provider-bg: #ffb80c;
  --icon-bonus-wallet-bg: #222222;
  /* --member-menu-icon-bg: #222222; */
  --left-menu-icon-bg: #222222;
  --left-menu-head-icon-highlight-bg: #222222;
  --color-title: #ffffff;
  --color-text: #878e92;
  --color-text-strong: #79a5fc;
  --color-muted: rgba(34, 34, 34, .5);
  --offset-shadow: #281a70;
  --inset-shadow: #ffffff;
  --text-shadow: #834c00;
  --gradient-red: linear-gradient(to bottom, #da1a1a 35%, #f26969 100%);
  --gradient-orange: linear-gradient(135deg, #ffae12 0%, #ff7e00 100%);
  --gradient-yellow: linear-gradient(to right, #ffd259 0%, #ffd259 100%);
  --gradient-green: linear-gradient(135deg, #86cc4e 0%, #3dac3c 100%);
  --gradient-blue: linear-gradient(135deg, #698af2 0%, #3356cd 100%);
  --color-content-bg: #ebebeb;
  --custom-font: "Jost";
  --custom-serif: sans-serif;
  --header-bg: var(--primary);
  --header-bg-tab: #342e80;
  --header-bg-none: transparent;
  --header-bg-gradient: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
  --header-bg-active: var(--primary);
  --header-burger-icon-color: #79a5fc;
  --header-back-icon-color: #ffffff;
  --header-logout-icon-color: #ffffff;
  --header-service-icon-color: #ffffff;
  --header-filter-icon-color: #ffffff;
  --header-layout-icon-color: #ffffff;
  --header-title: var(--color-title);
  --header-vip-title: #ffffff;
  --header-vip-bg-active: var(--header-bg-active);
  --header-vip-title-active: var(--header-vip-title);
  --header-slot-bg-active: #281a70;
  --header-slot-title: #ffffff;
  --header-badge-bg: #cd1818;
  --header-badge-txt: #ffffff;
  --header-login-btn-bg: transparent;
  --header-login-btn-shadow: transparent;
  --header-login-btn-txt: transparent;
  --header-register-btn-bg: transparent;
  --header-register-btn-shadow: transparent;
  --header-register-btn-txt: transparent;
  --header-deposit-btn-bg: transparent;
  --header-deposit-btn-txt: transparent;
  --header-exp-btn-bg: #e62626;
  --header-exp-btn-txt: #ffffff;
  --header-refresh-icon-color: #ffffff;
  --header-close-icon: grey;
  --btn-main-bg: var(--secondary);
  --btn-main-txt: #ffffff;
  --btn-secondary-bg: var(--secondary);
  --btn-secondary-txt: #ffffff;
  --btn-main-bg-disabled: #7e6367;
  --btn-main-txt-disabled: #b1a0a3;
  --btn-secondary-bg-disabled: #79a5fc;
  --btn-secondary-txt-disabled: #ffffff;
  --btn-main-txt-shadow-disabled: transparent;
  --btn-loading-border: #ffffff;
  /* --form-box-bg: #363285; */
  --form-txt: var(--color-title);
  /* --form-input-bg: #444796; */
  /* --form-input-border: var(--form-input-bg); */
  /* --form-input-txt: var(--color-title); */
  /* --form-input-txt-placeholder: rgba(255, 255, 255, .3); */
  --form-input-border-focus: #ffd259;
  /* --form-input-bg-disabled: var(--form-input-bg); */
  /* --form-input-border-disabled: var(--form-input-bg-disabled); */
  /* --form-input-txt-disabled: #ffffff; */
  --form-select-item-bg: var(--primary);
  --form-clear-icon: url(/assets/images/icon-set/icon-cross-type09.svg);
  --form-clear-icon-color: #ffd259;
  --form-eyes-close-icon: url(/assets/images/icon-set/icon-eye-close-type03.svg);
  --form-eyes-open-icon: url(/assets/images/icon-set/icon-eye-open-type03.svg);
  --form-eyes-icon-color: #ffffff;
  --form-select-triangle: #ffffff;
  --form-refresh-icon: url(/assets/images/icon-set/icon-refresh-type01.svg);
  --form-refresh-icon-color: #ffffff;
  --form-upload-bg: var(--form-input-bg);
  --form-upload-border: rgba(255, 255, 255, .3);
  --form-upload-camera-icon: url(/assets/images/icon-set/player/kyc/upload.svg);
  --form-upload-camera-icon-color: #a0a2ca;
  --form-upload-txt: #a0a2ca;
  --form-upload-mask-bg: rgba(0, 0, 0, .7);
  --form-upload-retry-btn-bg: var(--secondary);
  --form-upload-retry-btn-txt: #ffffff;
  --form-upload-file-bg: var(--primary);
  --form-uncheck-color: rgba(255, 255, 255, .5);
  --form-input-crypto-unit: #ffae12;
  --form-input-crypto-unit-txt: #ffffff;
  /* --tab-header-bg: #342e80; */
  --tab-line-txt: rgba(255, 255, 255, .6);
  --tab-line-txt-active: #ffd259;
  --tab-line-underline: #ffd259;
  --tab-line-badge-bg: #ffd259;
  --tab-line-badge-txt: #281a70;
  --tab-btn-txt: #ffffff;
  --tab-btn-txt-shadow: #834c00;
  --tab-btn-bg: #342e80;
  --tab-btn-bg-active: #ffd259;
  --tab-btn-txt-active: var(--tab-btn-txt);
  --tab-btn-active-shadow: var(--primary);
  --tab-btn-bar-bg: var(--primary);
  /* --radio-bg: #444796; */
  /* --radio-txt: #ffffff; */
  /* --radio-bg-checked: linear-gradient(180deg, #6e4a85 0%, #3d1f97 100%); */
  --radio-border-checked: linear-gradient(190deg, #ff9fa2 0%, #6d25f4 100%);
  --radio-txt-checked: #ffffff;
  --checkbox-bg-checked: linear-gradient(180deg, #6d4985 0%, #3e1f97 100%);
  --checkbox-bg-color: #222222;
  --checkbox-bg-color-checked: #ffffff;
  --checkbox-tick: #222222;
  --checkbox-border: #222222;
  --checkbox-border-checked: #ffffff;
  --checkbox-check-icon: url(/images/rain/h5/check.svg);
  --switch-bg: var(--radio-bg);
  --switch-bg-checked: var(--radio-border-checked);
  --switch-target-txt: rgba(255, 255, 255, .8);
  --switch-target-btn-icon: #000000;
  --switch-target-btn-bg: #333333;
  --switch-target-knob: #ffffff;
  --switch-target-race-track-bg: #032682;
  --date-picker-calendar-bg: linear-gradient(to bottom, var(--form-box-bg) 0%, var(--content-bg) 100%);
  --date-picker-calendar-shadow: rgba(#000000, .1);
  --date-picker-calendar-shadow-inset: transparent;
  --date-picker-calendar-border: transparent;
  --date-picker-calendar-selected-bg: var(--primary);
  --date-picker-calendar-selected-txt: var(--color-text);
  --date-picker-calendar-selected-shadow: rgba(#000000, .3);
  --date-picker-calendar-selected-shadow-inset: transparent;
  --date-picker-calendar-table-title: #ffffff;
  --date-picker-calendar-table-txt: var(--color-text);
  --date-picker-calendar-today-txt-disabled: var(--color-muted);
  --date-picker-calendar-today-border: var(--primary);
  --date-picker-calendar-arrow-icon: var(--date-picker-calendar-table-txt);
  --pop-title: #ffffff;
  --pop-close-icon-color: var(--pop-title);
  --pop-lock-close-icon-color: #ffffff;
  --pop-txt: rgba(255, 255, 255, .7);
  --pop-notshow-bg: rgba(0, 0, 0, .2);
  --pop-notshow-txt: var(--pop-title);
  --pop-notshow-check-bg: rgba(0, 0, 0, .7);
  --pop-notshow-check-border: var(--pop-title);
  --pop-refresh-amount-bg: var(--pop-bg-content);
  --pop-refresh-amount-txt: var(--pop-title);
  --popup-page-main-bg: var(--pop-bg-content);
  --popup-page-main-shadow: #000;
  --popup-page-main-container-bg: var(--content-bg);
  /* --popup-page-main-header-bg: var(--header-bg); */
  --toolbar-bg: var(--header-bg);
  --toolbar-shadow: rgba(0, 0, 0, .5);
  --toolbar-txt: #ffffff;
  --toolbar-txt-active: var(--toolbar-txt);
  --toolbar-border-shadow: var(--toolbar-shadow);
  --toolbar-border-bg: var(--toolbar-bg);
  --toolbar-icon: rgba(255, 255, 255, .7);
  --toolbar-icon-active: var(--content-bg);
  --toolbar-icon-bg-front: var(--header-login-btn-bg);
  --toolbar-icon-bg-back: var(--header-login-btn-bg);
  --mode-txt: #ffffff;
  --mode-tips-bg: #444796;
  --mode-tips-txt: #ffffff;
  --pagination-bullet-bg: #ffb80c;
  --pagination-bullet-bg-active: #ffffff;
  --pop-bonus-txt: linear-gradient(to top, #ffffff 15%, #bacfe7 50%, #ffffff 70%);
  --pop-bonus-border-inside: linear-gradient(to top, #ffffff 0%, #8da5c0 50%, #ffffff 100%);
  --pop-bonus-border-outside: linear-gradient(to top, #a5bad1 0%, #ffffff 50%, #8da5c0 100%);
  --btn-voucher-txt: #ffffff;
  --btn-voucher-txt-value: #ff3a3a;
  --btn-voucher-bg: rgba(34, 34, 34, .9);
  --btn-voucher-bg-border: #494949;
  --sidenav-mask: rgba(0, 0, 0, .5);
  --sidenav-close-icon-color: #79a5fc;
  --sidenav-member-close-icon-color: var(--sidenav-close-icon-color);
  --sidenav-info-bg: linear-gradient(135deg, rgba(0, 236, 255, .6) 0%, rgba(98, 48, 213, .6) 40%, rgba(78, 92, 255, .6) 60%, rgba(0, 187, 230, .6) 100%);
  --sidenav-info-bottom-bg: linear-gradient(45deg, rgba(68, 50, 164, .7) 0%, rgba(57, 135, 215, .7) 100%);
  --sidenav-title-txt: #ffffff;
  --sidenav-profile-txt: #b9c9ff;
  --sidenav-info-title-bottom: #ffffff;
  /* --sidenav-info-login-icon-color: #ffd259; */
  /* --sidenav-info-register-icon-color: #00b5ff; */
  /* --sidenav-wallet-txt: #b9c9ff;
  --sidenav-wallet-amount: #ffffff; */
  --sidenav-wallet-icon-bg: rgba(255, 255, 255, .1);
  /* --sidenav-shortcut-txt: #b9c9ff; */
  --sidenav-shortcut-icon-bg: rgba(255, 255, 255, .1);
  --sidenav-shortcut-icon-txt: #ffffff;
  --sidenav-category-bg: linear-gradient(45deg, #48509c 0%, #473f8d 100%);
  --sidenav-category-columns-bg: linear-gradient(45deg, rgba(123, 138, 225, .9) 0%, #473f8d 100%);
  --sidenav-category-txt: #ffffff;
  --sidenav-category-shadow: #241d60;
  --sidenav-category-bg-active: rgba(161, 160, 255, .3);
  --sidenav-category-txt-active: #ffffff;
  --sidenav-info-points-bg: rgba(204, 204, 204, .2);
  --sidenav-info-points-txt: #b9c9ff;
  --sidenav-info-points-number: #ffe51d;
  /* --sidenav-bg: var(--primary); */
  --sidenav-set-shortcut-icon: url(/assets/images/menu/member-menu/icon-setting.svg) no-repeat center / 100%;
  --sidenav-set-shortcut-icon-bg: rgba(100, 125, 202, .5);
  --sidenav-set-shortcut-icon-color: #281a70;
  --sidenav-set-shortcut-edit-icon: url(/assets/images/menu/member-menu/icon-setup.svg) no-repeat center / 100%;
  --sidenav-set-shortcut-edit-icon-bg: #79a5fc;
  --sidenav-set-shortcut-edit-icon-color: #4e4eb0;
  --sidenav-set-shortcut-set-icon-color: #79a5fc;
  --sidenav-set-shortcut-add-icon-bg: #ffd259;
  --sidenav-set-shortcut-add-icon-color: #4e4eb0;
  /* --sidenav-category-area-bg: #363285; */
  /* --sidenav-category-icon-bg: var(--sidenav-wallet-icon-bg); */
  --sidenav-category-real-time-bonus-notice-bg: var(--sidenav-set-shortcut-add-icon-bg);
  --sidenav-category-real-time-bonus-notice-txt: var(--sidenav-set-shortcut-add-icon-color);
  --sidenav-category-icon-withdrawal: url(/assets/images/menu/icon-withdrawal.svg);
  --sidenav-category-icon-bonuses: url(/assets/images/menu/icon-bonuses.svg);
  --sidenav-category-icon-inbox: url(/assets/images/menu/icon-inbox.svg);
  --sidenav-service-title: var(--color-title);
  --sidenav-service-txt: var(--color-title);
  --index-login-btn-bg: var(--header-login-btn-bg);
  --index-login-btn-txt: var(--header-login-btn-txt);
  --index-login-btn-shadow: transparent;
  --index-login-btn-shadow-inset: transparent;
  --index-register-btn-bg: var(--header-register-btn-bg);
  --index-register-btn-txt: var(--header-register-btn-txt);
  --index-register-btn-shadow: transparent;
  --index-register-btn-shadow-inset: transparent;
  --language-bg: linear-gradient(180deg, #f1f0f0 0%, #dcdcdc 100%);
  --language-txt: #000000;
  --pop-language-header-bg: var(--pop-bg-content);
  --pop-language-title: var(--pop-title);
  --pop-language-content-bg: var(--content-bg);
  --pop-language-item-bg: rgba(54, 50, 133, .6);
  --pop-language-txt: #ffffff;
  --pop-language-btn: rgba(54, 50, 133, .8);
  --pop-language-btn-txt: #ffffff;
  --pop-language-btn-bg-active: linear-gradient(180deg, #6e4a85 0%, #3d1f97 100%);
  --pop-language-btn-border: linear-gradient(245deg, #ff9fa2 0%, #6d25f4 100%);
  --pop-language-close-icon-color: var(--pop-close-icon-color);
  --board-before-bg: linear-gradient(120deg, color-mix(in srgb, #9bc7ff, transparent 100%) 0%, #9bc7ff 100%);
  --board-before-shadow: #19066c;
  --board-login-bg: linear-gradient(220deg, #ff9fa2 0%, #7900e2 100%);
  --board-login-btn-bg: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
  /* --board-login-btn-txt: #ffffff; */
  --board-login-btn-txt-shadow: #f364bc;
  --board-register-bg: linear-gradient(220deg, #63e9ec 0%, #7900e2 100%);
  --board-register-btn-bg: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
  /* --board-register-btn-txt: #ffffff; */
  --board-register-btn-txt-shadow: #281a70;
  --board-btn-shadow: #8800da;
  --board-after-bg: var(--board-before-bg);
  --board-deposit-btn-bg: var(--board-register-btn-bg);
  --board-deposit-btn-txt: var(--board-register-btn-txt);
  --board-deposit-btn-txt-shadow: var(--board-register-btn-txt-shadow);
  --board-wallet-txt: #a0a2ca;
  --board-wallet-amount: var(--sidenav-wallet-amount);
  --board-wallet-refresh-icon-color: #a0a2ca;
  /* --announvement-bg: var(--primary); */
  --announvement-icon: url(/assets/images/icons/announcement-icon.svg);
  /* --announvement-icon-color: #6f87d6; */
  /* --announvement-txt: #6f87d6; */
  --nav-bg: #393485;
  --nav-category-bg: linear-gradient(162deg, #948acc 0%, #353390 100%);
  --nav-category-shadow: #7878a2;
  --nav-category-inset-shadow: #222071;
  --nav-category-txt: #ffffff;
  --nav-category-bg-active: linear-gradient(to bottom, #ff9fa2 0%, #6d25f4 80%);
  --nav-category-bg-active-circle: rgba(0, 0, 0, 0);
  --nav-category-txt-active: #ffffff;
  --nav-underline: linear-gradient(to right, #7801db 0%, #63e9ec 80%);
  --nav-item-bg: #393485;
  --nav-item-bg-shadow: #281a70;
  --sa-maintenance-bg: #ffffff;
  --sa-maintenance-icon-color: #ffb80c;
  --sa-maintenance-txt: #222222;
  --sa-maintenance-info-bg: #ffffff;
  --sa-maintenance-info-icon-color: #878e92;
  --sa-maintenance-info-tooltips-bg: #222222;
  --sa-maintenance-info-tooltips-txt: #ffffff;
  --sa-back-to-cricket-bg: var(--sa-maintenance-bg);
  --sa-back-tocricket-tap-icon-color: var(--sa-maintenance-icon-color);
  --sa-loader-circle: #ffb80c;
  --event-title: var(--color-title);
  --event-border: var(--secondary);
  --event-slick-dot: rgba(255, 255, 255, .5);
  --event-slick-dot-active: #79a5fc;
  --footer-bg: var(--content-bg);
  --footer-title: #647dca;
  --footer-txt: #ffffff;
  --footer-border: #ffffff;
  --footer-area-bg: rgba(255, 255, 255, .08);
  --footer-link: #79a5fc;
  --footer-seo-content-wrapper-bg: linear-gradient(to top, var(--footer-bg) 10%, color-mix(in srgb, var(--footer-bg), transparent 100%) 100%);
  --footer-seo-content-wrapper-title: #ffffff;
  --footer-seo-content-wrapper-txt: #878e92;
  --footer-seo-content-wrapper-fold-btn: var(--btn-main-bg);
  --footer-seo-content-wrapper-fold-btn-txt: var(--btn-main-txt);
  --footer-btn-bg: var(--form-box-bg);
  --footer-btn-txt: #ffffff;
  --footer-btn-border: #454749;
  --footer-btn-arrow: var(--footer-btn-txt);
  --footer-gradient-mask: linear-gradient(transparent, var(--footer-bg));
  --footer-parthers-title: color-mix(in srgb, var(--color-text), transparent 20%);
  --footer-parthers-subtitle: color-mix(in srgb, var(--color-text), transparent 20%);
  --lobby-bg: var(--content-bg);
  --lobby-loading-bg: var(--content-bg);
  --lobby-title: var(--color-title);
  --lobby-border: var(--secondary);
  --lobby-arrow: #ffffff;
  --lobby-item-bg: #342e80;
  --lobby-item-title: #b9c9ff;
  --lobby-item-new-tag-bg: #ffd259;
  --lobby-item-new-tag-txt: #ffffff;
  --login-forgetpassword-btn-border: #79a5fc;
  --login-forgetpassword-btn-txt: var(--login-forgetpassword-btn-border);
  /* --login-txt: #ffffff; */
  --login-link: #79a5fc;
  --alert-login-fail-tips-bg: color-mix(in srgb, var(--color-danger), transparent 80%);
  --alert-login-fail-tips-border: var(--color-danger);
  --alert-login-fail-tips-txt: var(--color-danger);
  --pop-login-fail-bg: var(--pop-bg-content);
  --pop-login-fail-title: var(--color-danger);
  --pop-login-fail-txt: #ffffff;
  --biometric-btn: #393485;
  --biometric-btn-txt: #ffffff;
  --biometric-wave-line-ani: var(--primary);
  --biometric-wave-line-cirle: #79a5fc;
  --biometric-wave-line-gradient-start: #ffd259;
  --biometric-wave-line-gradient-end: #ffd259;
  --biometric-switch-bg: #79a5fc;
  --biometric-txt: #ffffff;
  --biometric-wave-color-1: #ffffff;
  --biometric-wave-color-2: #673ab7;
  --biometric-wave-color-3: #79a5fc;
  --biometric-face-bg: linear-gradient(180deg, #284296 0%, #392290 100%);
  --biometric-title: #ffffff;
  --biometric-content: rgba(255, 255, 255, .7);
  --reset-password-txt: var(--color-title);
  --register-affiliate: #ffd259;
  --register-affiliate-txt: var(--content-bg);
  --register-success-check-icon: #4caf50;
  --register-success-check-icon-clip: transparent;
  --register-fail-check-icon: #ff5959;
  --register-fail-check-icon-clip: transparent;
  --register-question-tip-txt: #ffffff;
  --register-question-tip-bg: #8c8c8c;
  --pop-register-success-mask: #333333;
  --pop-register-success-bg: #393485;
  --pop-register-success-title: var(--color-success);
  --pop-register-success-subtitle: #ffffff;
  --pop-register-success-txt: rgba(255, 255, 255, .7);
  --pop-register-success-home-btn-txt: #ffffff;
  --pop-register-fail-title: var(--color-danger);
  --search-bg: #281a70;
  --search-item-bg: #342e80;
  --search-item-txt: #ffffff;
  --search-item-bg-active: #79a5fc;
  --search-item-txt-active: #ffffff;
  --search-search-icon-color: #ffffff;
  --pop-search-header-bg: #281a70;
  --pop-search-back-icon-color: var(--search-search-icon-color);
  --pop-search-input-bg: #281a70;
  --pop-search-input-txt: #ffffff;
  --pop-search-search-icon-color: var(--pop-search-back-icon-color);
  --pop-search-input-placeholder: rgba(255, 255, 255, .3);
  --pop-search-clear-txt: var(--color-text);
  --pop-search-title: var(--color-title);
  --pop-search-inner-bg: #ffffff;
  --search-btn: var(--search-bg);
  --slot-tag-new-bg: #ffd259;
  --slot-tag-new-txt: #ffffff;
  --slot-card-bg: var(--nav-item-bg);
  --slot-card-title: var(--color-title);
  --slot-card-txt: var(--color-text);
  --slot-card-number: var(--secondary);
  --slot-jackpot-total: #ffffff;
  --slot-jackpot-amount: #ffef3c;
  --pop-transfer-bg: #281a70;
  --pop-transfer-btn-take-back: var(--gradient-blue);
  --pop-transfer-btn-other-account: var(--gradient-green);
  --pop-transfer-btn-other-renew: var(--gradient-orange);
  --pop-transfer-txt: #ffffff;
  --pop-transfer-bonus-bg: rgba(255, 255, 255, .8);
  --pop-transfer-bonus-border: #ffffff;
  --pop-transfer-bonus-txt: #281a70;
  --pop-transfer-title: var(--color-title);
  --pop-transfer-border: var(--secondary);
  --pop-transfer-tips: var(--color-title);
  --pop-transfer-amount-fade: #444796;
  --pop-transfer-wallet-refresh-icon-color: #ffffff;
  --slot-empty-bg: #342e81;
  --slot-empty-txt: var(--color-title);
  --pop-bonuswallet-txt: rgba(255, 255, 255, .8);
  --pop-bonuswallet-title: #ffffff;
  --pop-bonuswallet-card-bg: linear-gradient(180deg, rgba(54, 50, 133, .8) 0%, rgba(78, 85, 162, .8) 100%);
  --pop-bonuswallet-card-title: var(--color-title);
  --pop-bonuswallet-card-border: var(--secondary);
  --pop-bonuswallet-card-date: rgba(255, 255, 255, .6);
  --pop-bonuswallet-card-detail: #b9c9ff;
  --pop-bonuswallet-card-amount: #ffd259;
  --pop-bonuswallet-card-start-btn: linear-gradient(230deg, #ffd259 0%, #ffd259 100%);
  --pop-bonuswallet-card-start-txt: #ffffff;
  --pop-bonuswallet-tips: var(--color-text);
  --promotion-bonuswallet-label-normal: var(--color-success);
  --promotion-bonuswallet-label-running: var(--primary);
  --promotion-bonuswallet-label-disabled: #777;
  --color-walletcard-txt: #ffffff;
  --color-walletcard-start-txt: var(--color-walletcard-tx);
  --color-walletcard-start-btn: linear-gradient(to bottom, #eed29f 0%, #cca967 100%);
  --color-walletcard-cancel-txt: var(--color-walletcard-tx);
  --color-walletcard-cancel-btn: linear-gradient(to bottom, #d15454 0%, #cb4141 100%);
  --color-walletcard-receive-txt: var(--color-walletcard-tx);
  --color-walletcard-receive-btn: linear-gradient(to bottom, #9fd562 0%, #7cb43e 100%);
  --color-walletcard-disabled-btn: linear-gradient(to bottom, #d8d8d8 0%, #bfbfbf 100%);
  --color-walletcard-disabled-border: #444444;
  --color-walletcard-disabled-txt: #444444;
  --color-walletcard-working-btn: linear-gradient(to bottom, #d8d8d8 0%, #bfbfbf 100%);
  --color-walletcard-working-border: #6481cd;
  --color-walletcard-working-txt: #6481cd;
  --pop-bonuswallet-lvup-back-icon-color: #ffffff;
  --pop-bonuswallet-lvup-check: #ffd259;
  --pop-bonuswallet-lvup-tips-bg: linear-gradient(180deg, #363285 0%, #363285 100%);
  --pop-bonuswallet-lvup-tips-title: #ffffff;
  --pop-bonuswallet-lvup-tips-txt: #b9c9ff;
  --pop-bonuswallet-lvup-tips-date-icon-color: var(--pop-bonuswallet-lvup-tips-txt);
  --new-slot-search-bg: var(--content-bg);
  --new-slot-search-border: rgba(255, 255, 255, .2);
  --new-slot-search-icon-color: #ffffff;
  --new-slot-provider-bg: var(--new-slot-search-bg);
  --new-slot-provider-border: #79a5fc;
  --new-slot-provider-shadow: #79a5fc;
  --new-slot-provider-border-active: #ffd259;
  --new-slot-provider-shadow-active: #ffd259;
  --new-slot-input-bg: transparent;
  --new-slot-input-txt: #ffffff;
  --new-slot-clear-icon: url(/assets/images/icon-set/icon-cross-type09.svg);
  --new-slot-clear-icon-color: rgba(255, 255, 255, .4);
  --new-slot-cancel-txt: rgba(255, 255, 255, .8);
  --new-slot-cancel-border: rgba(51, 51, 51, .08);
  --new-slot-search-area-bg: var(--content-bg);
  --new-slot-recently-played: url(/assets/images/slotgame/recently-played.png);
  --new-slot-recently-played-bg: linear-gradient(180deg, #98b9fb 0%, #8bb1fb 100%);
  --new-slot-my-favorites: url(/assets/images/slotgame/my-favorites.png);
  --new-slot-my-favorites-bg: linear-gradient(0deg, #c671e4 0%, #9c4fd8 100%);
  --new-slot-category-title: #ffffff;
  --new-slot-radio-bg: var(--radio-bg);
  --new-slot-radio-txt: var(--radio-txt);
  --new-slot-radio-border-checked: var(--radio-border-checked);
  --new-slot-radio-txt-checked: var(--radio-txt-checked);
  --new-slot-history-clock-icon-color: rgba(255, 255, 255, .5);
  --new-slot-history-clear-icon-color: rgba(255, 255, 255, .5);
  --new-slot-history-border: rgba(255, 255, 255, .1);
  --new-slot-search-btn-txt: var(--btn-main-txt);
  --new-slot-results-title: #ffffff;
  --new-slot-results-layout-icon-color: #ffffff;
  --new-slot-ranking-txt: rgba(121, 165, 252, .4);
  --new-slot-ranking-txt-border: #ffffff;
  --new-slot-ranking-img-border: url(/assets/images/slotgame/hexagon.svg);
  --new-slot-ranking-img-shadow: rgba(0, 0, 0, .5);
  --new-slot-ranking-mask: url(/assets/images/slotgame/hexagon-mask.svg);
  --new-slot-recommend-txt: #ffffff;
  --new-slot-game-list-title: #ffffff;
  --new-slot-game-list-subtitle: rgba(255, 255, 255, .5);
  --new-slot-game-list-star-icon: url(/assets/images/slotgame/icon-dark-star.svg);
  --new-slot-game-list-btn-bg: rgba(255, 255, 255, .1);
  --new-slot-game-list-btn-txt: #ffffff;
  --new-slot-game-list-btn-bg-active: linear-gradient(0deg, #ff9fa2 0%, #6d25f4 100%);
  --new-slot-game-list-btn-txt-active: #ffffff;
  --new-slot-game-list-shadow: var(--content-bg);
  --new-slot-game-list-circle-star-icon: url(/assets/images/slotgame/icon-white-circle-star.svg);
  --new-slot-details-game-grid-shadow: var(--content-bg);
  --new-slot-details-date-txt: #ffffff;
  --new-slot-details-date-txt-shadow: #ffffff;
  --new-slot-details-date-border: #ffffff;
  --new-slot-details-select-date-bg: #382b7b;
  --new-slot-details-select-date-week-txt: rgba(255, 255, 255, .3);
  --new-slot-details-select-date-txt: #ffffff;
  --new-slot-details-select-date-txt-active: #ffffff;
  --new-slot-details-select-date-ball: linear-gradient(0deg, #6d25f4 0%, #ff9fa2 100%);
  --new-slot-details-pop-bg: var(--pop-bg-content);
  --new-slot-details-pop-btn-bg: #393485;
  --new-slot-details-pop-btn-txt: #ffffff;
  --new-slot-details-pop-btn-border: #ffffff1c;
  --new-slot-details-loading-color-1: #4e55a2;
  --new-slot-details-loading-color-2: #6481cd;
  --new-slot-details-empty-txt: #ffffff;
  --promotion-bg: #393485;
  --promotion-info-bg: #8dbdff;
  --promotion-info-txt: #ffffff;
  --promotion-card-title: var(--color-title);
  --promotion-card-txt: color-mix(in srgb, var(--color-title), transparent 20%);
  --pop-bonuswallet-tips-txt: rgba(255, 255, 255, .5);
  --promotion-clock-icon-color: rgba(255, 255, 255, .5);
  --promotion-deposit-btn-bg: var(--color-success);
  --promotion-tag-free-bg: #ff777c;
  --promotion-tag-free-txt: #ffffff;
  --promotion-tag-bonus-bg: #40d0cb;
  --promotion-tag-bonus-txt: #ffffff;
  --pop-promotion-close-icon-color: #ffffff;

  /* --pop-promotion-title-bg: #342e80; */
  --pop-promotion-title: #ffffff;
  --pop-promotion-clock-icon-color: #5c567a;
  --pop-promotion-table-title-bg: #342e80;
  --pop-promotion-table-title-txt: #ffffff;
  --pop-promotion-table-content-bg: #efeef6;
  --pop-promotion-table-content-title-bg: var(--pop-promotion-table-title-bg);
  --pop-promotion-table-content-title-txt: var(--pop-promotion-table-title-txt);
  --pop-promotion-table-content-txt: #5c567a;
  --pop-promotion-table-content-border: rgba(255, 255, 255, .2);
  --pop-promotion-link: var(--color-text-strong);
  --pop-promotion-bonuswallet-title: #ffffff;
  --pop-promotion-bonuswallet-wallet-bg: rgba(255, 255, 255, .1);
  --pop-promotion-bonuswallet-wallet-txt: #a0a2ca;
  --pop-promotion-bonuswallet-wallet-number: #ffffff;
  --pop-promotion-bonuswallet-deposit-now-border: rgba(160, 162, 202, .4);
  --pop-promotion-bonuswallet-deposit-now-bg: var(--pop-bg-content);
  --pop-promotion-bonuswallet-link: #79a5fc;
  --btn-status-txt: #ffffff;
  --btn-attend-bg: #00cc66;
  --btn-request-bg: #ff3233;
  --btn-joined-bg: #ffad00;
  --btn-apply-bg: #027aff;
  --btn-detail-bg: var(--btn-main-bg);
  --btn-deposit-bg: var(--btn-secondary-bg);
  --btn-request-status-txt: #878e92;
  --btn-joined-status-txt: #878e92;
  --btn-apply-status-txt: var(--btn-status-txt);
  --btn-detail-status-txt: var(--btn-main-txt);
  --btn-deposit-status-txt: var(--btn-secondary-txt);
  --btn-before-bg: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 100%);
  --form-inputgroup-btn-bg: var(--primary);
  --form-inputgroup-btn-txt: var(--btn-status-txt);
  --form-inputgroup-input-bg: hsla(229, 44%, 7%, 1);
  --form-inputgroup-input-txt: #fff;
  --form-inputgroup-input-border: var(--form-input-border);
  --form-inputgroup-input-border-focus: var(--form-inputgroup-btn-bg);
  --form-inputgroup-input-txt-placeholder: var(--form-input-txt-placeholder);
  --form-inputgroup-input-title: var(--color-text);
  --limit-title: #ffffff;
  --limit-txt: #ffffff;
  --limit-ip-txt: #a0a2ca;
  --limit-timezone-txt: #79a5fc;
  --limit-time-txt: #b9c9ff;
  --gotop-bg: radial-gradient(circle at 1.2% 1.2%, #00ecff 0%, #6230d5 48%, #4e5cff 81%, #00bbe6 139%, #ffffff 139%);
  --gotop-icon: #ffffff;
  --chat-bg: radial-gradient(circle at 1.2% 1.2%, #ff9fa2 0%, #a372e2 48%, #6d25f4 81%, #ff9fa2 139%, #ff9fa2 139%);
  --chat-icon: #ffffff;
  --app-download-bg: linear-gradient(to top, #281a70 0%, #281a70 50%);
  --app-download-primary: #ff9fa2;
  --app-download-header-bg: rgba(40, 26, 112, .4);
  --app-download-txt: linear-gradient(to bottom, #ff9fa2 0%, #ff9fa2 50%);
  --app-download-btn-bg: linear-gradient(160deg, #ff9fa2 0%, #6d25f4 80%);
  --app-download-btn-txt: #ffffff;
  --app-download-btn-shadow: rgba(255, 217, 218, .5);
  --app-download-side-bg: rgba(40, 26, 112, .95);
  --app-download-close-icon: #ffffff;
  --launch-bg: #ffffff;
  --launch-linear-bg: linear-gradient(135deg, var(--launch-bg) 0%, color-mix(in srgb, var(--launch-bg), transparent 70%) 50%);
  --launch-menu-highlight-shadow-color01: #b0dbff;
  --launch-menu-highlight-shadow-color02: rgba(255, 255, 255, .5);
  --launch-btn-bg: linear-gradient(180deg, #515151 0%, #000000 100%);
  --launch-home-btn-icon: #ffffff;
  --launch-home-btn-icon-color: #ffffff;
  --launch-home-btn-bg: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%);
  --launch-nodeposit-btn-bg: linear-gradient(180deg, rgba(71, 78, 120, 0) 0%, rgba(71, 78, 120, 0));
  --lanuch-stop-color: #ffffff;
  --lanuch-end-color: #b1b1b1;
  --lanuch-site-bg: linear-gradient(180deg, #000000 40%, color-mix(in srgb, #000000, transparent 100%) 100%);
  --launch-game-header-bg: linear-gradient(135deg, #00ecff 0%, #6230d5 40%, #4e5cff 60%, #00bbe6 100%);
  --launch-game-btn-bg: radial-gradient(circle at 1.2% 1.2%, #4e5cff 0%, #6230d5 48%, #4e5cff 81%, #6230d5 139%, #4e5cff 139%);
  --launch-game-logo-shadow: rgba(0, 0, 0, .5);
  --launch-game-icon-color: #ffffff;
  --launch-info-border-left: rgba(255, 255, 255, .1);
  --launch-info-title: #ffffff;
  --launch-info-value: #ffffff;
  --thirdparty-bg: var(--pop-register-success-bg);
  --thirdparty-h3: var(--color-success);
  --thirdparty-highlight-span: var(--secondary);
  --thirdparty-title: var(--color-title);
  --thirdparty-txt: var(--color-text);
  --thirdparty-close-btn: var(--thirdparty-h3);
  --thirdparty-close-txt: var(--thirdparty-bg);
  --game-filter-title: var(--search-item-txt);
  --game-filter-border: var(--primary);
  --game-filter-dropdown-txt: var(--search-item-txt);
  --game-filter-dropdown-toggle-bg: var(--search-bg);
  --game-filter-dropdown-item-bg: var(--search-bg);
  --game-filter-dropdown-item-bg-active: var(--search-item-bg-active);
  --game-filter-dropdown-item-txt-active: var(--search-item-txt-active);
  --game-filter-dropdown-arrow-icon: var(--search-item-txt);
  --color-card-bg: lighten(var(--color-content-bg), 7%);
  --tips-content-info-tag: #409fff;
  --tips-document-info-tag: #ff777c;
  --tips-document-choose-one-info-tag: #ef67ab;
  --tips-info-supporting-txt-tag: #d8a845;
  --third-party-primary: #ffb80c;
  --third-party-error: var(--color-danger);
  --third-party-check: #70b267;
  --third-party-txt-default: #222222;
  --third-party-txt-secondary: #ffffff;
  --third-party-txt-fourth: #222222;
  --third-party-txt-disabled: var(--form-input-txt-disabled);
  --third-party-icon-default: #878e92;
  --third-party-icon-secondary: #090d1a;
  --third-party-shadow-default: #06080f;
  --third-party-shadow-primary: #ffb80c;
  --third-party-shadow-secondary: transparent;
  --third-party-border-default: transparent;
  --third-party-border-secondary: transparent;
  --third-party-input-default: #f2f2f2;
  --third-party-input-disabled: var(--form-input-bg-disabled);
  --third-party-bg-default: #ebebeb;
  --third-party-bg-disabled: var(--form-input-bg-disabled);
  --third-party-gradient-primary-light: #ffc331;
  --third-party-gradient-primary-dark: #ffb80c;
  --third-party-gradient-secondary-light: #333333;
  --third-party-gradient-secondary-dark: #222222;
  --third-party-gradient-tertiary-light: #f2f2f2;
  --third-party-gradient-tertiary-dark: #f2f2f2;
  --third-party-password-txt-success: var(--third-party-check);
  --third-party-password-icon-success: var(--third-party-password-txt-success);
  --third-party-password-txt-error: var(--third-party-error);
  --third-party-password-icon-error: var(--third-party-password-txt-error);
  --third-party-password-txt-default: #878e92;
  --third-party-password-icon-default: var(--third-party-password-txt-default);
  --third-party-login-content-bg: var(--third-party-bg-default);
  --third-party-login-banner-dot: color-mix(in srgb, var(--third-party-primary), transparent 50%);
  --third-party-login-banner-dot-active: var(--third-party-primary);
  --third-party-login-form-txt: var(--third-party-txt-fourth);
  --third-party-login-form-txt-active: var(--third-party-txt-fourth);
  --third-party-login-form-input-bg: var(--third-party-input-default);
  --third-party-login-form-input-border: var(--third-party-border-default);
  --third-party-login-form-input-txt: var(--form-input-txt);
  --third-party-login-form-input-txt-placeholder: var(--form-input-txt-placeholder);
  --third-party-login-form-input-border-focus: var(--third-party-primary);
  --third-party-login-form-input-bg-disabled: var(--third-party-input-disabled);
  --third-party-login-form-input-border-disabled: var(--third-party-border-secondary);
  --third-party-login-form-input-txt-disabled: var(--third-party-txt-disabled);
  --third-party-login-form-eyes-icon-color: rgba(34, 34, 34, .5);
  --third-party-login-form-clear-icon-color: rgba(34, 34, 34, .5);
  --third-party-login-puzzle-box-bg: var(--third-party-input-default);
  --third-party-login-puzzle-box-border: var(--third-party-border-default);
  --third-party-login-puzzle-box-txt: var(--third-party-txt-fourth);
  --third-party-login-puzzle-box-refresh-icon-color: var(--third-party-txt-default);
  --third-party-login-puzzle-box-slider-bg: var(--third-party-bg-default);
  --third-party-login-puzzle-box-slider-border: var(--third-party-border-default);
  --third-party-login-puzzle-box-slider-btn-bg: linear-gradient(90deg, var(--third-party-gradient-primary-light) 0%, var(--third-party-gradient-primary-dark) 50%);
  --third-party-login-puzzle-box-slider-btn-inner-shadow: var(--third-party-shadow-primary);
  --third-party-login-puzzle-box-slider-btn-arrow-icon-color: #222222;
  --third-party-login-puzzle-box-tips-txt: var(--third-party-txt-default);
  --third-party-login-puzzle-box-slider-bg-success: color-mix(in srgb, var(--third-party-check), transparent 70%);
  --third-party-login-puzzle-box-slider-border-success: var(--third-party-check);
  --third-party-login-puzzle-box-slider-btn-bg-success: var(--third-party-check);
  --third-party-login-puzzle-box-slider-btn-inner-shadow-success: var(--third-party-check);
  --third-party-login-puzzle-box-slider-btn-arrow-icon-color-success: var(--third-party-txt-secondary);
  --third-party-login-puzzle-box-tips-txt-success: var(--third-party-check);
  --third-party-login-puzzle-box-slider-bg-error: color-mix(in srgb, var(--third-party-error), transparent 70%);
  --third-party-login-puzzle-box-slider-border-error: var(--third-party-error);
  --third-party-login-puzzle-box-slider-btn-bg-error: var(--third-party-error);
  --third-party-login-puzzle-box-slider-btn-inner-shadow-error: var(--third-party-error);
  --third-party-login-puzzle-box-slider-btn-arrow-icon-color-error: var(--third-party-txt-secondary);
  --third-party-login-puzzle-box-tips-txt-error: var(--third-party-error);
  --third-party-login-btn-main-bg: linear-gradient(to right, var(--third-party-gradient-primary-light) 0%, var(--third-party-gradient-primary-dark) 50%);
  --third-party-login-btn-main-txt: var(--third-party-txt-default);
  --third-party-login-btn-main-bg-shadow: #06080f;
  --third-party-login-btn-main-bg-inner-shadow: var(--third-party-shadow-primary);
  --third-party-login-btn-main-bg-disabled: var(--btn-main-bg-disabled);
  --third-party-login-btn-main-txt-disabled: var(--btn-main-txt-disabled);
  --third-party-login-txt: var(--third-party-txt-default);
  --third-party-login-biometric-btn: var(--third-party-primary);
  --third-party-login-biometric-btn-txt: var(--third-party-bg-default);
  --third-party-login-color-danger: var(--third-party-error);
  --third-party-login-findpassword-txt: var(--third-party-primary);
  --third-party-login-tab-txt: var(--third-party-txt-default);
  --third-party-login-tab-txt-active: var(--third-party-primary);
  --third-party-login-tab-line-active: var(--third-party-primary);
  --third-party-verification-code-txt: var(--third-party-txt-default);
  --third-party-verification-tips-txt: var(--third-party-verification-code-txt);
  --third-party-verification-code-txt-highlight: var(--third-party-primary);
  --third-party-verification-code-link: var(--third-party-primary);
  --third-party-register-title: var(--third-party-primary);
  --third-party-register-btn-main-bg: linear-gradient(180deg, --third-party-gradient-primary-light 0%, --third-party-gradient-primary-dark 100%);
  --third-party-register-btn-main-bg-inner-shadow: var(--third-party-shadow-primary);
  --third-party-register-btn-main-txt: var(--third-party-txt-default);
  --third-party-register-btn-secondary-bg: linear-gradient(135deg, var(--third-party-gradient-secondary-light) 0%, var(--third-party-gradient-secondary-dark) 50%);
  --third-party-register-btn-secondary-bg-inner-shadow: var(--third-party-shadow-secondary);
  --third-party-register-btn-secondary-txt: var(--third-party-txt-secondary);
  --third-party-register-btn-tertiary-bg: linear-gradient(135deg, var(--third-party-gradient-tertiary-light) 0%, var(--third-party-gradient-tertiary-dark) 50%);
  --third-party-register-btn-tertiary-bg-inner-shadow: transparent;
  --third-party-register-btn-tertiary-txt: var(--third-party-txt-default);
  --third-party-register-tips-txt: var(--third-party-txt-default);
  --third-party-register-link: var(--third-party-primary);
  --third-party-register-footer-tips-txt: var(--third-party-txt-default);
  --third-party-register-affiliate: var(--third-party-txt-default);
  --third-party-register-form-select-triangle: var(--third-party-txt-default);
  --third-party-register-form-select-item-bg: var(--third-party-login-form-input-bg);
  --third-party-register-form-select-item-hover: color-mix(in srgb, var(--third-party-register-form-select-item-bg), white 20%);
  --third-party-register-form-check-icon-color: var(--third-party-primary);
  --third-party-register-form-tips-txt: var(--third-party-txt-default);
  --third-party-register-form-tips-highlight: var(--third-party-primary);
  --third-party-register-succes-title: var(--color-success);
  --third-party-register-success-subtitle: var(--third-party-primary);
  --third-party-register-success-txt: var(--third-party-txt-default);
  --third-party-register-success-copy-icon-color: var(--third-party-primary);
  --third-party-register-success-input-border: var(--third-party-border-default);
  --third-party-register-success-input-copy-btn-bg: var(--third-party-border-default);
  --third-party-personal-item-title: var(--third-party-txt-fourth);
  --third-party-personal-item-icon-color: var(--third-party-primary);
  --third-party-personal-item-icon-color-border: var(--third-party-border-default);
  --third-party-personal-item-tag-txt: var(--third-party-primary);
  --third-party-personal-item-tag-bg: color-mix(in srgb, var(--third-party-primary), transparent 90%);
  --third-party-personal-item-tag-tips: var(--third-party-txt-default);
  --third-party-personal-item-status-bg: transparent;
  --third-party-personal-item-status-border: transparent;
  --third-party-personal-item-status-txt: var(--third-party-check);
  --third-party-personal-item-status-error-bg: var(--third-party-error);
  --third-party-personal-item-status-error-border: transparent;
  --third-party-personal-item-status-error-txt: #ffffff;
  --third-party-personal-membername-wrap-bg: transparent;
  --third-party-personal-membername-wrap-txt: var(--third-party-txt-default);
  --third-party-personal-vip-membername-txt: var(--third-party-txt-default);
  --third-party-personal-membername-wrap-tips: var(--third-party-icon-default);
  --third-party-personal-membername-wrap-level-bg: linear-gradient(105deg, #c8c3b2 2%, #80795a 100%);
  --third-party-personal-membername-wrap-level-txt: #ffffff;
  --third-party-personal-myvip-txt: var(--third-party-primary);
  --third-party-personal-tips-info-border: #51699e;
  --third-party-personal-tips-info-border-top: color-mix(in srgb, var(--third-party-txt-fourth), transparent 80%);
  --third-party-personal-tips-info-icon: var(--third-party-txt-fourth);
  --third-party-personal-tips-info-txt: var(--third-party-txt-fourth);
  --third-party-personal-tips-info-txt-i: #ffd268;
  --third-party-personal-tips-info-toggle-btn: var(--third-party-txt-fourth);
  --third-party-personal-add-phone-bg: transparent;
  --third-party-personal-add-phone-txt: var(--third-party-txt-default);
  --third-party-personal-add-phone-border: var(--third-party-txt-default);
  --quick-register-entry-btn-wrap-bg: darken(var(--third-party-input-default), 5%);
  --quick-register-entry-btn-active-shadow: var(--third-party-register-btn-main-bg-inner-shadow);
  --quick-register-entry-btn-active-bg: linear-gradient(180deg, var(--third-party-gradient-primary-light) 0%, var(--third-party-gradient-primary-dark) 100%);
  --quick-register-entry-btn-bg: var(--third-party-input-default);
  --quick-register-entry-btn-border: var(--third-party-border-default);
  --quick-register-entry-btn-name: rgba(var(--third-party-txt-fourth) .5);
  --quick-register-entry-btn-icon: rgba(var(--third-party-txt-fourth) .5);
  --quick-register-entry-invitation-code-bg: #586e9b;
  --quick-register-entry-invitation-code-border: #707fac;
  --quick-register-entry-btn-icon-active: var(--quick-register-entry-btn-bg);
  --quick-register-entry-btn-txt: var(--third-party-primary);
  --quick-register-entry-btn-txt-active: var(--third-party-primary);
  /* --page-main-header-bg: var(--popup-page-main-header-bg); */
  --page-main-close-color: var(--color-title);
  --color-banner-bg: var(--primary);
  --event-slick-dot-register: #ffffff;
  --slick-slide-shadow: rgba(0, 0, 0, .3);
  --color-card-title: #333333;
  --color-card-label-text: #3f2200;
  --color-card-label-bg: #fff7dc;
  --color-card-label-border: #ffeeb0;
  --fast-register-success-bg: #ffffff;
  --fast-register-success-cont-text: #555555;
  --svg-register-success-editor: var(--primary);
  --third-party-menubox-bg: #ffffff;
  --third-party-btn-mask-bg: linear-gradient(to right, #005fbe 0%, #252b73 50%);
  --third-party-btn-mask-bg-shadow: #005fbe;
  --third-party-pop-success-bg: rgba(255, 255, 255, .8);
  --third-party-pop-success-txt: #70b267;
  --desktop-searchpage-border: hsla(250, 62%, 37%, 1);
  --lighten-third-party-btn-mask-bg-shadow-1: hsla(210, 100%, 67%, 1);
  --lighten-third-party-btn-mask-bg-shadow-2: hsla(210, 100%, 77%, 1);
  --tab-btn-bar-line-shadow: hsla(20, 0%, 10%, 1);
  --loading-animation-card-banner: hsla(250, 62%, 32%, 1)
}

:root {
  --profile-vip-title: var(--color-title);
  --profile-vip-number: var(--secondary);
  --profile-vip-btn-bg: #79a5fc;
  --profile-vip-btn-txt: var(--color-title);
  --profile-vip-arrow-icon-color: #ffffff;
  --profile-txt: rgba(255, 255, 255, .3);
  --profile-name: #ffd259;
  --profile-tips-txt: var(--color-title);
  --profile-tips-link: #b9c9ff;
  --profile-member-menu-point-bg: #ffffff;
  --pop-getvcode-btn: #79a5fc;
  --pop-getvcode-btn-txt: #ffffff;
  --pop-getvcode-countdown-txt: #ffffff;
  --pop-getvcode-resend-txt: #79a5fc;
  --bonuswallet-card-bg: linear-gradient(0deg, #464998 0%, #342e81 100%);
  --bonuswallet-title: var(--color-title);
  --bonuswallet-zone: rgba(255, 255, 255, .3);
  --bonuswallet-border: var(--secondary);
  --bonuswallet-amount: #ffd259;
  --bonuswallet-amount-complete: #ffd259;
  --bonuswallet-amount-disable: rgba(255, 210, 89, .5);
  --bonuswallet-progress-bar-bg: rgba(255, 255, 255, .1);
  --bonuswallet-progress-bar-bg-shadow: #999999;
  --bonuswallet-progress-bar-bg-active: linear-gradient(90deg, #734b07 0%, #916d21 25%, #b69942 50%, #dbc463 75%, #f8e67d 100%);
  --bonuswallet-progress-bar-bg-active-shadow: #734b07;
  --bonuswallet-progress-bar-txt: #a0a2ca;
  --bonuswallet-dot: rgba(255, 255, 255, .5);
  --bonuswallet-detail-txt: #b9c9ff;
  --voucher-card-bg: var(--bonuswallet-card-bg);
  --voucher-title: var(--bonuswallet-title);
  --voucher-border: var(--bonuswallet-border);
  --voucher-tag-bg: var(--pop-bonuswallet-card-start-btn);
  --voucher-dealline: var(--pop-bonuswallet-card-date);
  --voucher-zone: var(--bonuswallet-zone);
  --voucher-detail: var(--pop-bonuswallet-card-detail);
  --voucher-dot: var(--recommend-dot);
  --voucher-amount: var(--bonuswallet-amount);
  --voucher-txt: var(--bonuswallet-detail-txt);
  --voucher-start-btn-bg: var(--color-walletcard-start-btn);
  --voucher-start-btn-txt: var(--color-walletcard-txt);
  --voucher-disabled-btn-bg: var(--color-walletcard-disabled-btn);
  --voucher-disabled-btn-txt: var(--color-walletcard-disabled-txt);
  --vip-bg: linear-gradient(245deg, #281a70 0%, #281a70 25%, #281a70 100%);
  --vip-card-bg: linear-gradient(120deg, rgba(0, 236, 255, .5) 0%, rgba(98, 48, 213, .5) 40%, rgba(78, 92, 255, .5) 80%, rgba(0, 187, 230, .5) 100%);
  --vip-card-shadow: #ffffff;
  --vip-card-title: #ffffff;
  --vip-card-history-btn-bg: #ffd259;
  --vip-card-history-icon-color: #ffffff;
  --vip-card-progress-bar-bg: rgba(255, 255, 255, .2);
  --vip-card-progress-bar-bg-active: linear-gradient(to right, #b69942 0%, #cfaa47 25%, #ffd259 50%, #ffd259 75%, #cfaa47 100%);
  --vip-card-progress-bar-bg-active-shadow: #e6c86d;
  --vip-card-bar-dot: #ffffff;
  --vip-card-tips: rgba(255, 255, 255, .8);
  --vip-card-bottom-bg: rgba(255, 255, 255, .1);
  --vip-card-bottom-more-txt: rgba(255, 255, 255, .8);
  --vip-total-ttile: rgba(255, 255, 255, .6);
  --vip-total-num: #ffffff;
  --vip-total-txt: var(--vip-total-ttile);
  --vip-total-txt-bg: rgba(0, 0, 0, .2);
  --vip-total-record-btn-bg: var(--vip-card-history-btn-bg);
  --vip-total-record-icon-color: var(--vip-card-history-icon-color);
  --vip-convert-title: rgba(255, 255, 255, .8);
  --vip-convert-border: var(--secondary);
  --vip-refresh-txt: var(--vip-convert-title);
  --vip-refresh-icon-color: #ffd259;
  --vip-cash-point-bg: linear-gradient(180deg, rgba(40, 137, 243, .5) 0%, rgba(98, 50, 215, .5) 100%);
  --vip-cash-point-def: #ffd259;
  --vip-cash-point-grey: #9c9c9c;
  --vip-cash-point-title: var(--vip-total-ttile);
  --vip-cash-point-requirement-txt: var(--vip-total-ttile);
  --vip-cash-point-input-placeholder: rgba(255, 255, 255, .3);
  --vip-cash-point-input-txt: #ffd259;
  --vip-cash-point-input-error: var(--color-danger);
  --vip-cash-point-input-error-icon: #ffffff;
  --vip-cash-point-input-bg: rgba(0, 0, 0, .2);
  --vip-cash-point-tips: var(--vip-convert-title);
  --vip-cash-point-default-btn-bg: linear-gradient(90deg, #2f51b1 0%, #4528a5 100%);
  --vip-cash-point-default-btn-txt: var(--btn-main-txt);
  --vip-cash-point-default-btn-txt-shadow: none;
  --vip-cash-point-allow-btn-bg: #ffd259;
  --vip-cash-point-allow-btn-bg-box-shadow: rgba(102, 97, 73, .5);
  --vip-cash-point-allow-btn-bg-txt-shadow: none;
  --vip-ani-title: #ffffff;
  --vip-history-year: rgba(255, 255, 255, .8);
  --vip-history-month: var(--vip-refresh-icon-color);
  --vip-detail-lv1-bg: #ddd8c7;
  --vip-detail-lv2-bg: #dfdfdf;
  --vip-detail-lv3-bg: #e2dab5;
  --vip-detail-lv4-bg: #dae4f2;
  --vip-detail-lv5-bg: #dae4f2;
  --vip-detail-lv-bottom-bg: #282467;
  --vip-detail-lv-txt: #ffffff;
  --vip-detail-title-bg-lv1: linear-gradient(90deg, #bcb8a8 0%, #80795a 100%);
  --vip-detail-title-bg-lv2: linear-gradient(90deg, #c4c4c4 0%, #a2a2a2 100%);
  --vip-detail-title-bg-lv3: linear-gradient(90deg, #ccbb6f 0%, #a69234 100%);
  --vip-detail-title-bg-lv4: linear-gradient(90deg, #a7bcda 0%, #7596c5 100%);
  --vip-detail-title-bg-lv5: linear-gradient(90deg, #a7bcda 0%, #7596c5 100%);
  --vip-detail-box-bg: linear-gradient(180deg, #332d80 0%, #474998 100%);
  --vip-detail-box-bg-shadow: #281a70;
  --vip-detail-highlight-txt: #ffd259;
  --vip-detail-txt: #ffffff;
  --vip-detail-border: #281a70;
  --vip-detail-card-bg: linear-gradient(45deg, #48509c 0%, #473f8d 100%);
  --vip-detail-card-bg-shadow: rgba(0, 0, 0, .2);
  --vip-detail-card-txt: #b9c9ff;
  --vip-detail-link: #a0a2ca;
  /* --vip-points-table-head-bg: #393485; */
  --vip-points-table-head-txt: #ffffff;
  --vip-points-table-head-border: rgba(255, 255, 255, .4);
  --vip-points-table-head-zone: rgba(255, 255, 255, .3);
  --vip-points-table-body-bg: var(--content-bg);
  --vip-points-table-body-record-bg: var(--vip-points-table-body-bg);
  --vip-points-table-body-txt: #ffffff;
  --vip-points-table-body-border: rgba(255, 255, 255, .15);
  --vip-points-table-body-top-border: var(--vip-points-table-body-bg);
  /* --accordion-bg: #363285; */
  --accordion-title-bg: #363285;
  --accordion-title: #ffffff;
  --accordion-info-icon-color: var(--accordion-title);
  --accordion-arrow-icon-color: #ffffff;
  --accordion-dot: rgba(255, 255, 255, .4);
  --accordion-txt: #a0a2ca;
  --accordion-color-bg-title: #ffffff;
  --accordion-add-bank-card-title-bg: #444796;
  --accordion-triangle: #ffffff;
  --accordion-review: var(--color-info);
  --accordion-success: var(--color-success);
  --accordion-failed: var(--color-danger);
  --pop-verification-link: var(--secondary);
  --wallet-title-border: var(--secondary);
  --wallet-recommond-tag-bg: #79a5fc;
  --wallet-recommond-tag-icon-color: #ffffff;
  --wallet-bouns-tag-bg: var(--color-danger);
  --wallet-bouns-tag-txt: #ffffff;
  --wallet-maintain-bg: rgba(40, 26, 112, .8);
  --wallet-maintain-border: rgba(255, 255, 255, .2);
  --wallet-maintain-txt: rgba(255, 255, 255, .8);
  --wallet-account-info-bg: var(--form-input-bg);
  --wallet-account-info-txt: var(--color-title);
  --wallet-account-info-border: rgba(255, 255, 255, .2);
  --wallet-account-info-copy-icon-color: #ffffff;
  --wallet-account-info-copy-tooltips-bg: #ffffff;
  --wallet-account-info-copy-tooltips-txt: rgba(0, 0, 0, .5);
  --wallet-account-info-copy-tooltips-txt-shadow: rgba(0, 0, 0, .5);
  --wallet-bank-card-bg: linear-gradient(135deg, #00ecff 0%, #6230d5 20%, #4e5cff 70%, #00bbe6 100%);
  --wallet-bank-card-shadow: rgba(0, 0, 0, .3);
  --wallet-bank-card-txt: #ffffff;
  --wallet-bank-card-copy-icon-color: var(--wallet-bank-card-txt);
  --wallet-bank-card-amount: #ffea00;
  --wallet-bank-card-copy-active: rgba(0, 0, 0, .2);
  --wallet-bank-card-copy-tooltips-bg: var(--wallet-account-info-copy-icon-color);
  --wallet-bank-card-copy-tooltips-txt: var(--wallet-account-info-copy-tooltips-txt);
  --wallet-crypto-switch-icon-color: #ffffff;
  --wallet-crypto-tips-txt: rgba(255, 255, 255, .3);
  --wallet-crypto-tips-highlight: #ffffff;
  --wallet-qrcode-icon: #ffffff;
  --wallet-top-bg: #281a70;
  --wallet-top-txt: #ffffff;
  /* --tips-info-bg: var(--accordion-bg); */
  --tips-info-title: var(--accordion-title);
  --tips-info-icon-color: var(--tips-info-title);
  --tips-info-arrow-icon-color: #ffffff;
  --tips-info-border: rgba(255, 255, 255, .4);
  --tips-info-personal-txt: #70b267;
  --tips-info-personal-bg: color-mix(in srgb, var(--tips-info-personal-txt), transparent 85%);
  --tips-info-content-txt: #409fff;
  --tips-info-content-bg: color-mix(in srgb, var(--tips-info-content-txt), transparent 85%);
  --tips-info-document-txt: #ff777c;
  --tips-info-document-bg: color-mix(in srgb, var(--tips-info-document-txt), transparent 85%);
  --tips-info-document-choose-one-txt: #ef67ab;
  --tips-info-document-choose-one-bg: color-mix(in srgb, var(--tips-info-document-choose-one-txt), transparent 85%);
  --tips-info-supporting-txt: #d8a845;
  --tips-info-supporting-bg: color-mix(in srgb, var(--tips-info-supporting-txt), transparent 85%);
  --wallet-pending-transactions-bg: #342e80;
  --wallet-pending-transactions-title: #ffffff;
  --wallet-pending-transactions-arrow-icon-color: var(--wallet-pending-transactions-title);
  --wallet-pending-transactions-number: var(--tips-info-title);
  --wallet-pending-transactions-date: #a0a2ca;
  --wallet-pending-transactions-amount: var(--tips-info-title);
  --wallet-pending-transactions-btn-bg: var(--radio-bg-checked);
  --wallet-pending-transactions-btn-border: var(--radio-border-checked);
  --wallet-pending-transactions-btn-txt: var(--radio-txt-checked);
  --wallet-free-tag-bg: var(--secondary);
  --wallet-free-tag-txt: #281a70;
  --wallet-super-fast-bg: linear-gradient(60deg, #32d5cf, #00b5ff, #a4ff80, #00b5ff);
  --wallet-express-bg: linear-gradient(60deg, #ff61a1, #ff9fa2, #ffcc59, #ff59bd);
  --wallet-select-bank-card-txt: var(--wallet-top-txt);
  --wallet-bankcard-bg: var(--radio-bg);
  --wallet-bankcard-bg-checked-bg: var(--radio-bg-checked);
  --wallet-bankcard-bg-checked-border: #db85b7;
  --wallet-bankcard-swift-bg: rgba(0, 0, 0, .2);
  --wallet-otp-send-btn-bg: #79a5fc;
  --wallet-otp-send-btn-txt: #ffffff;
  --wallet-otp-sending-btn-bg: #928670;
  --wallet-otp-resend-txt: #ffd259;
  --wallet-amount-info-icon: #ffae12;
  --wallet-amount-info-icon-txt: var(--form-box-bg);
  --wallet-amount-info-txt: var(--wallet-amount-info-icon);
  --bank-card-frost-mask: rgba(234, 234, 234, .8);
  --bank-card-frost-txt: var(--content-bg);
  --bank-card-frost-icon: var(--content-bg);
  --bank-card-frost-btn: hsla(250, 62%, 27%, 1);
  --bank-card-frost-btn-txt: #ffffff;
  --wallet-kyc-verify-mask-bg: rgba(47, 47, 47, .4);
  --wallet-kyc-verify-mask-txt: #ffffff;
  --wallet-kyc-verify-mask-txt-shadow: rgba(0, 0, 0, .6);
  --transaction-pop-processing-cont-border-color: var(--form-input-border);
  --transaction-pop-state-bg: var(--secondary);
  --transaction-pop-state-icon-bg: #ffffff;
  --transaction-pop-processing-title: var(--secondary);
  --transaction-pop-processing-txt: var(--color-text);
  --transaction-pop-amount-cont-txt-strong: var(--secondary);
  --transaction-pop-amount-cont-txt: var(--color-text);
  --transaction-pop-info-list-title: var(--color-title);
  --transaction-pop-info-list-title-bg: var(--form-input-bg-disabled);
  --transaction-pop-info-list-txt: var(--color-text-strong);
  --transaction-pop-info-list-txt-bg: var(--form-input-bg);
  --transfer-ani-txt: #ffffff;
  --transfer-ani-default-tips-bg: #889fa5;
  --transfer-ani-default-tips-border: #dadde2;
  --transfer-ani-platform-bg: #363285;
  --transfer-ani-platform-darken-color: #281a70;
  --transfer-ani-platform-lighten-color: #444796;
  --transfer-ani-platform-logo-border: #c5c5c5;
  --transfer-ani-platform-secondary-darken-color: #ffd259;
  --transfer-ani-platform-secondary-lighten-color: #ffd96f;
  --transfer-ani-account-bg: linear-gradient(180deg, rgba(216, 216, 216, .8) 0%, rgba(255, 255, 255, .8) 100%);
  --transfer-ani-account-darken-color: #889fa5;
  --transfer-ani-account-lighten-color: #dadde2;
  --transfer-ani-account-logo-border: #dadde2;
  --transfer-ani-default-bg: #b1bdc5;
  --transfer-ani-default-light-bg: #82a0aa;
  --transfer-ani-default-circle-bg: #a3cfcd;
  --transfer-ani-default-circle-shadow: #82a0aa;
  /* --filter-bg: var(--search-bg); */
  --filter-title: #ffffff;
  --filter-item-bg: var(--search-item-bg);
  --filter-item-txt: var(--search-item-txt);
  --filter-item-bg-active: var(--search-item-bg-active);
  --filter-item-txt-active: var(--search-item-txt-active);
  --filter-btn: var(--search-btn);
  --transaction-record-filter-icon-color: var(--search-search-icon-color);
  --transaction-record-table-body-date-bg: var(--content-bg);
  --transaction-record-table-body-date: rgba(255, 255, 255, .3);
  --transaction-record-calendar-icon-color: rgba(255, 255, 255, .3);
  --transaction-record-table-body-zone: rgba(255, 255, 255, .3);
  --transaction-record-pending: var(--color-warning);
  --transaction-record-revert: var(--color-info);
  --transaction-record-negative: var(--color-danger);
  --transaction-record-positive: var(--color-success);
  --transaction-record-pending-bg: color-mix(in srgb, var(--transaction-record-pending), transparent 10%);
  --transaction-record-revert-bg: color-mix(in srgb, var(--transaction-record-revert), transparent 10%);
  --transaction-record-negative-bg: color-mix(in srgb, var(--transaction-record-negative), transparent 10%);
  --transaction-record-positive-bg: color-mix(in srgb, var(--transaction-record-positive), transparent 10%);
  --transaction-record-status-txt: #ffffff;
  --pop-transaction-details-bank-name-bg: #281a70;
  --pop-transaction-details-bank-name-txt: var(--color-title);
  --pop-transaction-details-header-bg: #281a70;
  --pop-transaction-details-header-txt: var(--color-title);
  --pop-transaction-details-close-icon-color: #ffffff;
  --pop-transaction-details-tab-bg: transparent;
  --pop-transaction-details-title: #ffffff;
  --pop-transaction-details-date: rgba(255, 255, 255, .4);
  --pop-transaction-details-message-bg: #363285;
  --pop-transaction-details-message-current-txt: #ffffff;
  --pop-transaction-details-message-txt: color-mix(in srgb, var(--pop-transaction-details-message-current-txt), transparent 40%);
  --pop-transaction-details-table-bg: #393485;
  --pop-transaction-details-table-bg-even: #444796;
  --pop-transaction-details-table-txt: #ffffff;
  --pop-transaction-details-tips-txt: #ffffff;
  --pop-transaction-details-timer: var(--btn-main-txt-disabled);
  --pop-transaction-details-btn-area-bg: #281a70;
  /* --transaction-record-table-body-empty-bg: var(--form-box-bg); */
  --betting-record-positive-txt: var(--color-success);
  --betting-record-negative-txt: var(--color-danger);
  --betting-details-table-head-bg: #4d4891;
  --betting-details-table-head-border: #776cb1;
  --betting-record-table-head-title: #ffffff;
  --betting-record-table-head-txt: rgba(255, 255, 255, .8);
  --betting-record-table-date-area-bg: transparent;
  --betting-record-table-zone: #4d4891;
  --betting-record-tooltips-icon-color: rgba(255, 255, 255, .3);
  --betting-record-tooltips-bg: #4d4891;
  --betting-record-tooltips-border: var(--betting-record-tooltips-bg);
  --betting-record-tooltips-txt: #ffffff;
  --betting-record-tooltips-revocation: #79a5fc;
  --betting-record-tooltips-void: #ffd259;
  --betting-record-tooltips-refund: #ff5959;
  --cricket-betting-details-total-bg: var(--primary);
  --cricket-betting-details-total-title-bg: var(--color-title);
  --cricket-betting-details-totalt-title: var(--primary);
  --cricket-betting-details-total-platform-bg: var(--cricket-betting-details-total-title-bg);
  --cricket-betting-details-total-platform: #ffffff;
  --cricket-betting-details-total-txt: var(--color-title);
  --cricket-betting-details-title: var(--color-title);
  --cricket-betting-details-tag-bg: var(--primary);
  --cricket-betting-details-tag-txt: var(--color-title);
  --cricket-betting-details-date-txt: var(--color-muted);
  --cricket-betting-details-collapse-arrow-color: var(--cricket-betting-details-title);
  --cricket-betting-details-avg-odds-circle: var(--primary);
  --cricket-betting-details-avg-odds-icon-color: var(--color-title);
  --cricket-betting-details-turnover-circle: var(--color-title);
  --cricket-betting-details-turnover-icon-color: var(--primary);
  --cricket-betting-details-stake-circle: var(--cricket-betting-details-turnover-circle);
  --cricket-betting-details-stake-icon-color: var(--cricket-betting-details-turnover-icon-color);
  --cricket-betting-details-profit-circle: var(--cricket-betting-details-avg-odds-circle);
  --cricket-betting-details-profit-icon-color: var(--cricket-betting-details-avg-odds-icon-color);
  --cricket-betting-details-value-title: var(--color-muted);
  --cricket-betting-details-value: var(--color-title);
  --cricket-betting-details-sub-item-bg: var(--form-input-bg);
  --cricket-betting-details-sub-item-sport-icon-color: var(--color-title);
  --cricket-betting-details-sub-item-vs-txt: var(--color-title);
  --cricket-betting-details-sub-item-title: var(--color-muted);
  --cricket-betting-details-sub-item-txt: var(--color-title);
  --cricket-betting-details-sub-item-win-txt: #ffffff;
  --cricket-betting-details-sub-item-lose-txt: #ffffff;
  --cricket-betting-details-sub-item-cancel-txt: var(--color-title);
  --cricket-betting-details-sub-item-voided-txt: var(--cricket-betting-details-value);
  --cricket-betting-details-sub-item-table-bg: var(--form-box-bg);
  --cricket-betting-details-sub-item-value-title: var(--cricket-betting-details-value-title);
  --cricket-betting-details-sub-item-value: var(--cricket-betting-details-value);
  --cricket-betting-details-profit-amount: var(--color-danger);
  --mail-notice-icon-circle-bg: linear-gradient(220deg, #63e9ec 0%, #7900e2 100%);
  --mail-date-bg: var(--content-bg);
  --mail-date-txt: rgba(255, 255, 255, .3);
  --mail-date-calendar-icon-color: var(--mail-date-txt);
  --mail-date-zone: rgba(255, 255, 255, .3);
  --mail-list-bg: var(--content-bg);
  --mail-list-title: var(--color-title);
  --mail-list-txt: rgba(255, 255, 255, .3);
  --mail-list-border: var(--vip-points-table-body-border);
  --mail-editor-icon-color: #ffffff;
  --mail-editor-pop-bg: var(--pop-bg-content);
  --mail-editor-pop-txt: #ffffff;
  --mail-editor-choose-icon-color: rgba(255, 255, 255, .4);
  --mail-editor-choose-icon-active: #79a5fc;
  --mail-editor-pop-check-bg: #79a5fc;
  --mail-editor-pop-check-txt: #ffffff;
  --recommend-gift-bg: linear-gradient(270deg, #6481cd 0%, #a1b6ee 80%);
  --recommend-title: var(--color-title);
  --recommend-border: #ffd259;
  --recommend-txt: var(--vip-detail-card-txt);
  --recommend-input-border: #6e8ad2;
  --recommend-input-btn: linear-gradient(270deg, #79a5fc 0%, #79a5fc 80%);
  --recommend-share-btn: linear-gradient(60deg, #79a5fc 0%, #79a5fc 100%);
  --recommend-share-txt: #ffffff;
  --recommend-dot: var(--accordion-dot);
  --recommend-condition-title: #b9c9ff;
  --recommend-condition-dot: #ffd259;
  --recommend-condition-bg: #342e81;
  --recommend-terms-link: #6481cd;
  --recommend-input-bg: #393485;
  --recommend-complete-txt: #b9c9ff;
  --state-expired: #ff595a;
  --turnover-card-bg: linear-gradient(180deg, rgba(54, 50, 133, .8) 0%, rgba(78, 85, 162, .8) 100%);
  --turnover-card-bg-completed: var(--turnover-card-bg);
  --turnover-card-title: var(--color-title);
  --turnover-card-border: var(--secondary);
  --turnover-card-date: var(--pop-bonuswallet-card-date);
  --turnover-card-detail: var(--pop-bonuswallet-card-detail);
  --pop-turnover-table-bg: rgba(255, 255, 255, .1);
  --pop-turnover-table-txt: #ffffff;
  --pop-turnover-arrow-icon-color: var(--primary);
  --pop-turnover-check-icon: url(/assets/images/icon-set/icon-check-type01.svg);
  --verify-otp-txt: var(--color-title);
  --verify-otp-phone-txt: var(--primary);
  --verify-otp-mail-icon-color: var(--btn-main-txt);
  --verify-otp-mail-icon-disabled: var(--btn-main-txt-disabled);
  --pop-verify-add-success-close-icon: #ffffff;
  --realtime-bonus-available-bg: linear-gradient(to bottom, var(--content-bg) 0%, var(--form-box-bg) 100%);
  --realtime-bonus-available-title: #ffffff;
  --realtime-bonus-available-title-icon: var(--realtime-bonus-available-title);
  --realtime-bonus-available-amount: var(--color-title);
  --realtime-bonus-available-tips-txt: var(--color-warning);
  --realtime-bonus-available-btn-bg: var(--btn-main-bg);
  --realtime-bonus-available-btn-txt: var(--btn-main-txt);
  --realtime-bonus-claimed-title: var(--color-text);
  --realtime-bonus-claimed-value: var(--primary);
  --realtime-bonus-summary-tab-btn-bg: var(--search-item-bg);
  --realtime-bonus-summary-tab-btn-txt: var(--search-item-txt);
  --realtime-bonus-summary-tab-btn-bg-active: var(--search-item-bg-active);
  --realtime-bonus-summary-tab-btn-txt-active: var(--search-item-txt-active);
  --realtime-bonus-summary-list-header-bg: var(--form-input-bg);
  --realtime-bonus-summary-list-header-title: var(--color-title);
  --realtime-bonus-summary-list-header-arrow-icon: var(--realtime-bonus-summary-list-header-title);
  --realtime-bonus-summary-list-header-total-bg: var(--form-box-bg);
  --realtime-bonus-summary-list-header-total-rebate-title: var(--color-muted);
  --realtime-bonus-summary-list-header-total-rebate-amount: var(--primary);
  --realtime-bonus-summary-list-header-total-claimed-title: var(--color-muted);
  --realtime-bonus-summary-list-header-total-claimed-amount: var(--color-title);
  --realtime-bonus-summary-list-header-total-expired-title: var(--realtime-bonus-summary-list-header-total-claimed-title);
  --realtime-bonus-summary-list-header-total-expired-amount: var(--realtime-bonus-summary-list-header-total-claimed-amount);
  --realtime-bonus-summary-list-content-bg: var(--form-box-bg);
  --realtime-bonus-summary-list-content-border: var(--realtime-bonus-summary-list-header-bg);
  --realtime-bonus-summary-list-content-title: var(--color-title);
  --realtime-bonus-summary-list-content-txt: var(--color-text);
  --pop-realtime-bonus-number: var(--primary);
  --realtime-bonus-game-type-accordion-header-bg: #e5e5e5;
  --realtime-bonus-game-type-accordion-title: var(--pop-txt);
  --realtime-bonus-game-type-accordion-title-active: var(--color-title);
  --realtime-bonus-game-type-accordion-content-bg: var(--form-input-bg);
  --realtime-bonus-game-type-list-separator: rgba(0, 0, 0, .05);
  --realtime-bonus-vendor-title: var(--color-text);
  --realtime-bonus-vendor-detail: var(--color-muted);
  --about-us-bg: var(--content-bg);
  --about-us-title: var(--color-title);
  --about-us-table-bg: transparent;
  --about-us-table-title: var(--color-title);
  --about-us-table-title-txt: rgba(255, 255, 255, .6);
  --about-us-table-title-bg: #79a5fc;
  --about-us-table-title-border: var(--about-us-table-title-bg);
  --about-us-mail-link: #79a5fc;
  --tips-info-txt: var(--color-title);
  --tips-info-i: var(--tips-info-txt);
  --tips-personal-info-tag: #70b267;
  --tips-content-info-tag: #409fff;
  --tips-document-info-tag: #ff777c;
  --tips-document-choose-one-info-tag: #ef67dd;
  --tips-info-supporting-txt-tag: #d8a845;
  --color-ticket-deco-border: #cccccc;
  --bonuswallet-progress-bar-bg-mine: linear-gradient(to right, #f26969, #cd3336);
  --bonuswallet-progress-bar-bg-shadow-mine: #f26969;
  --color-pop-select-bg: #ffffff;
  --color-pop-btn-border: var(--pop-promotion-table-content-border);
  --color-pop-repair: #eeeeee;
  --color-player-form-border: rgba(255, 255, 255, .05);
  --color-player-form-upload: #999999;
  --color-input-form-disabled: rgba(255, 255, 255, .5);
  --color-record-item-text: var(--color-title);
  --color-rf-statusbox-input-date-text: #a0a2ca;
  --color-rf-status-pending-text: #ffd259;
  --color-rf-status-expired-text: #ff5959;
  --upload-icon-shadow: rgba(0, 0, 0, .5);
  --form-tag-recommand-border: hsla(220, 96%, 43%, 1);
  --game-hall-primary: #186db9;
  --game-hall-text-primary: #ffffff;
  --game-hall-btn-shadow: #0a68bf;
  --game-hall-header-bg: #0f212e;
  --game-hall-header-text: var(--game-hall-text-primary);
  --game-hall-header-back-btn: var(--game-hall-primary);
  --game-hall-header-item-bg: #253b49;
  --game-hall-content-bg: #071825;
  --game-hall-nav-icon: #fff;
  --game-hall-nav-btn: linear-gradient(180deg, #1562a4 0%, #12243c 100%);
  --game-hall-nav-bar-btn-icon: #878e92;
  --game-hall-nav-bar-btn: #2b3944;
  --game-hall-nav-bar-btn-icon-active: #fff;
  --game-hall-nav-bar-btn-active: linear-gradient(180deg, #1562a4 0%, #12243c 100%);
  --game-hall-nav-bar-btn-shadow: rgba(#0a68bf, .5);
  --game-hall-nav-bar-bg: #202f3b;
  --game-hall-card-control-btn: #202f3b;
  --game-hall-card-control-btn-icon: #e9e9e9;
  --game-hall-card-control-btn-border: #415768;
  --game-hall-card-title: var(--game-hall-text-primary);
  --game-hall-card-title-games-number-bg: #263a49;
  --game-hall-card-title-games-number-text: #fff;
  --game-hall-card-title-games-btn-text: #fff;
  --game-hall-search-back-btn: var(--game-hall-primary);
  --game-hall-search-arrow-btn: #fff;
  --game-hall-searchpage-results-leaderboard-list: #f60044;
  --game-hall-searchpage-results-game-text: #fff;
  --game-hall-searchpage-results-vendor-text: #fff
}

:root {
  --primary: #f4b600;
  --header-close-icon: #ffffff;
  --secondary: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --color-success: #0dd183;
  --color-danger: #ff5757;
  --color-warning: #feb032;
  --color-info: #3976ff;
  /* --content-bg: #ebebeb; */
  --pop-bg: rgba(0, 0, 0, .4);
  --pop-bg-content: #ebebeb;
  --pop-bg-gradient: transparent;
  --nav-icon-normal-bg: #2254ba;
  --nav-icon-active-bg: #f4b600;
  --menu-icon-normal-bg: #2254ba;
  --menu-icon-active-bg: #ffffff;
  --icon-all-provider-bg: #f4b600;
  --icon-bonus-wallet-bg: #2254ba;
  /* --member-menu-icon-bg: #2254ba; */
  --left-menu-icon-bg: #2254ba;
  --left-menu-head-icon-highlight-bg: #2254ba;
  --color-title: #0e2749;
  --color-text: #0e2749;
  --color-text-strong: #054ea1;
  --color-muted: rgba(14, 39, 73, .5);
  --event-title: #0e2749;
  --offset-shadow: #ebebeb;
  --text-shadow: #f4b600;
  --inset-shadow: transparent;
  --custom-font: "Source Sans 3";
  --header-bg: linear-gradient(180deg, #2254ba 0%, #163e90 100%);
  --header-bg-tab: #2254ba;
  --header-bg-active: #2254ba;
  --header-burger-icon-color: #ffffff;
  --header-back-icon-color: #ffffff;
  --header-title: #ffffff;
  --header-vip-title: #ffffff;
  --header-vip-bg-active: #2254ba;
  --header-vip-title-active: #ffffff;
  --header-slot-bg-active: #2254ba;
  --header-login-btn-bg: #f4b600;
  --header-login-btn-txt: #0f2649;
  --header-register-btn-bg: linear-gradient(180deg, #e5e5e5 0%, #a4a4a4 100%);
  --header-register-btn-txt: #0e2749;
  --header-refresh-icon-color: #ffffff;
  --header-deposit-btn-bg: #f4b600;
  --header-deposit-btn-txt: #0e2749;
  --pop-verify-add-success-close-icon: #222222;
  --btn-main-txt: #0e2749;
  --btn-secondary-bg: #054ea1;
  --btn-secondary-txt: #ffffff;
  --btn-main-bg-disabled: #cfcfcf;
  --btn-main-txt-disabled: #0e2749;
  --btn-main-txt-shadow-disabled: #cfcfcf;
  /* --form-box-bg: #ffffff; */
  --form-txt: #0e2749;
  /* --form-input-bg: #f2f2f2; */
  /* --form-input-txt: #0e2749; */
  /* --form-input-txt-placeholder: rgba(14, 39, 73, .5); */
  --form-input-border-focus: #f4b600;
  /* --form-input-bg-disabled: #e5e5e5; */
  /* --form-input-txt-disabled: rgba(14, 39, 73, .6); */
  --form-clear-icon-color: #7e919e;
  --form-eyes-icon-color: #7e919e;
  --form-select-triangle: #7e919e;
  --form-refresh-icon-color: #7e919e;
  --form-upload-bg: #f2f2f2;
  --form-upload-camera-icon-color: rgba(14, 39, 73, .2);
  --form-upload-txt: #0e2749;
  --form-upload-retry-btn-txt: #0e2749;
  --form-uncheck-color: #7e919e;
  --form-drop-down-menu-btn-bg: #7e919e;
  /* --tab-header-bg: #2254ba; */
  --tab-line-txt: #a4b5da;
  --tab-line-txt-active: #f4b600;
  --tab-line-underline: #f4b600;
  --tab-line-badge-bg: #e41a43;
  --tab-line-badge-txt: #0e2749;
  --tab-btn-txt: #0e2749;
  --tab-btn-txt-shadow: transparent;
  --tab-btn-bg: #2254ba;
  --tab-btn-bg-active: #f4b600;
  --tab-btn-active-shadow: transparent;
  --tab-btn-bar-bg: #ebebeb;
  --tab-btn-txt-active: #0e2749;
  /* --radio-bg: #f2f2f2; */
  /* --radio-txt: #0e2749; */
  /* --radio-bg-checked: #f9eecd; */
  --radio-border-checked: #f4b600;
  --radio-txt-checked: #0e2749;
  --checkbox-bg-checked: #f9eecd;
  --checkbox-bg-color: #18417c;
  --checkbox-bg-color-checked: #f4b600;
  --checkbox-tick: #222222;
  --checkbox-border: #f4b600;
  --checkbox-border-checked: #f4b600;
  --switch-bg: #ffffff;
  --switch-target-btn-bg: #f4b600;
  --date-picker-calendar-table-title: #0e2749;
  --pop-title: #0e2749;
  --pop-close-icon-color: #7e919e;
  --pop-txt: rgba(14, 39, 73, .8);
  --toolbar-bg: #054ea2;
  --toolbar-icon-active: #0e2749;
  --toolbar-shadow: rgba(0, 0, 0, .2);
  --mode-txt: #0e2749;
  --mode-tips-bg: #ffffff;
  --mode-tips-txt: #0e2749;
  --pagination-bullet-bg: rgba(0, 0, 0, .3);
  --pagination-bullet-bg-active: #f4b600;
  --sidenav-close-icon-color: #ffffff;
  --sidenav-info-bg: #054ea1;
  --sidenav-info-bottom-bg: #4b6cb6;
  --sidenav-title-txt: #ffffff;
  --sidenav-profile-txt: #f4b600;
  --sidenav-info-title-bottom: #0e2749;
  /* --sidenav-info-login-icon-color: #ffffff; */
  /* --sidenav-info-register-icon-color: #f4b600; */
  /* --sidenav-wallet-txt: #ffffff;
  --sidenav-wallet-amount: #ffffff; */
  --sidenav-wallet-icon-bg: rgba(255, 255, 255, .6);
  /* --sidenav-shortcut-txt: #0e2749; */
  --sidenav-shortcut-icon-bg: #ffffff;
  /* --sidenav-shortcut-icon-txt: #0e2749; */
  --sidenav-category-bg: linear-gradient(45deg, #ffffff 0%, #f2f2f2 100%);
  --sidenav-category-columns-bg: linear-gradient(45deg, #f2f2f2 0%, #e0e0e0 100%);
  --sidenav-category-txt: #0e2749;
  --sidenav-category-shadow: rgba(0, 0, 0, .2);
  --sidenav-category-bg-active: rgba(246, 249, 255, .2);
  --sidenav-category-txt-active: #ffffff;
  --sidenav-info-points-bg: rgba(14, 39, 73, .15);
  --sidenav-info-points-txt: #f4b600;
  --sidenav-info-points-number: #ffffff;
  /* --sidenav-bg: #efeff0; */
  --sidenav-set-shortcut-icon-bg: #f4b600;
  --sidenav-set-shortcut-icon-color: #ebebeb;
  --sidenav-set-shortcut-edit-icon-bg: #0e2749;
  --sidenav-set-shortcut-edit-icon-color: #f4b600;
  --sidenav-set-shortcut-set-icon-color: #f4b600;
  --sidenav-set-shortcut-add-icon-bg: #054ea1;
  --sidenav-set-shortcut-add-icon-color: #f4b600;
  /* --sidenav-category-area-bg: #ffffff; */
  /* --sidenav-category-icon-bg: #f2f2f2; */
  --sidenav-service-title: #0e2749;
  --sidenav-service-txt: #0e2749;
  --nextevent-title-txt: #0e2749;
  --footer-top-txt: #0e2749;
  --recommend-friends-prompt-txt: #7e919e;
  --marquee-wrapper-bg: #ebebeb;
  --main-wrapper-bg: #ebebeb;
  --pop-language-header-bg: linear-gradient(180deg, #2254ba 0%, #163e90 100%);
  --pop-language-item-bg: #ffffff;
  --pop-language-title: #ffffff;
  --pop-language-txt: #0e2749;
  --pop-language-btn: #f2f2f2;
  --pop-language-btn-txt: #0e2749;
  --pop-language-btn-bg-active: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --pop-language-btn-border: transparent;
  --pop-language-close-icon-color: #ffffff;
  /* --board-login-btn-txt: #ffffff; */
  /* --board-register-btn-txt: #f4b600; */
  --board-register-btn-txt-shadow: #ffd259;
  /* --announvement-bg: transparent; */
  /* --announvement-icon-color: #052753; */
  /* --announvement-txt: #052753; */
  --nav-bg: linear-gradient(179deg, #f4b600 0%, #ffb80c 100%);
  --nav-category-txt: #054ea1;
  --nav-category-bg-active-circle: #054ea1;
  --nav-category-txt-active: #f4b600;
  --nav-underline: transparent;
  --nav-item-bg: #ffffff;
  --sa-maintenance-bg: #ffffff;
  --sa-maintenance-icon-color: #f4b600;
  --sa-maintenance-info-bg: #ffffff;
  --sa-maintenance-info-icon-color: #7e919e;
  --sa-maintenance-info-tooltips-bg: rgba(5, 78, 161, .8);
  --sa-maintenance-info-tooltips-txt: #0e2749;
  --event-border: #f4b600;
  --event-slick-dot: #999999;
  --event-slick-dot-active: #f4b600;
  --footer-title: #0a3f83;
  --footer-area-bg: #ffffff;
  --footer-link: #0a3f83;
  --footer-txt: #0e2749;
  --login-forgetpassword-btn-border: #123ea1;
  /* --login-txt: #0e2749; */
  --login-link: #123ea1;
  --pop-login-fail-txt: #0e2749;
  --biometric-btn: #f4b600;
  --biometric-btn-txt: #0e2749;
  --biometric-wave-line-ani: #f4b600;
  --biometric-wave-line-cirle: #f4b600;
  --biometric-wave-line-gradient-start: #ffcf42;
  --biometric-wave-line-gradient-end: #f4b600;
  --biometric-switch-bg: #f4b600;
  --biometric-txt: #0e2749;
  --biometric-wave-color-1: #054ea1;
  --biometric-wave-color-2: #0a3f83;
  --biometric-wave-color-3: #123ea1;
  --biometric-face-bg: #ebebeb;
  --biometric-title: #0e2749;
  --biometric-content: rgba(14, 39, 73, .5);
  --register-affiliate: #f4b600;
  --pop-register-success-bg: #ffffff;
  --pop-register-success-subtitle: #0e2749;
  --pop-register-success-txt: #0e2749;
  --pop-register-success-home-btn-txt: #0e2749;
  --search-bg: #ffffff;
  --search-item-bg: #ebebeb;
  --search-item-txt: #0e2749;
  --search-item-bg-active: #f4b600;
  --search-item-txt-active: #0e2749;
  --search-search-icon-color: #0e2749;
  --pop-search-header-bg: #2254ba;
  --pop-search-input-bg: #ffffff;
  --pop-search-input-txt: #0e2749;
  --pop-search-input-placeholder: #7e919e;
  --pop-search-clear-txt: #f4a000;
  --search-btn: #f4b600;
  --pop-search-inner-bg: #ffffff;
  --pop-search-back-icon-color: #ffffff;
  --pop-search-search-icon-color: #ffffff;
  --slot-tag-new-bg: #f4b600;
  --slot-tag-new-txt: #0e2749;
  --slot-card-bg: #ffffff;
  --pop-transfer-bg: #054ea1;
  --pop-transfer-btn-take-back: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --pop-transfer-bonus-bg: #054ea1;
  --pop-transfer-bonus-border: #f4b600;
  --pop-transfer-bonus-txt: #f4b600;
  --pop-transfer-tips: #0e2749;
  --pop-transfer-amount-fade: #f4b600;
  --slot-empty-bg: #ffffff;
  --pop-bonuswallet-txt: rgba(14, 39, 73, .5);
  --pop-bonuswallet-title: #0e2749;
  --pop-bonuswallet-card-bg: #ffffff;
  --pop-bonuswallet-card-date: #7e919e;
  --pop-bonuswallet-card-detail: #054ea1;
  --pop-bonuswallet-card-amount: #f4b600;
  --pop-bonuswallet-card-start-txt: #0e2749;
  --pop-bonuswallet-tips: #7e919e;
  --promotion-bonuswallet-label-running: #f4b600;
  --promotion-bonuswallet-label-disabled: #878e92;
  --color-walletcard-txt: #0e2749;
  --color-walletcard-start-btn: #f4b600;
  --color-walletcard-cancel-btn: #ff5757;
  --color-walletcard-cancel-txt: #0e2749;
  --color-walletcard-receive-btn: #09ac6b;
  --color-walletcard-receive-txt: #0e2749;
  --color-walletcard-disabled-btn: #cfcfcf;
  --color-walletcard-disabled-border: #cfcfcf;
  --color-walletcard-disabled-txt: #0e2749;
  --color-walletcard-working-border: #054ea1;
  --color-walletcard-working-txt: #ffffff;
  --color-walletcard-working-btn: #054ea1;
  --pop-bonuswallet-lvup-back-icon-color: #0e2749;
  --pop-bonuswallet-lvup-check: #f4b600;
  --pop-bonuswallet-lvup-tips-bg: #ffffff;
  --pop-bonuswallet-lvup-tips-title: #0e2749;
  --pop-bonuswallet-lvup-tips-txt: rgba(14, 39, 73, .5);
  --pop-bonuswallet-lvup-tips-date-icon-color: #f4b600;
  --new-slot-details-game-grid-shadow: #ebebeb;
  --new-slot-details-date-txt: #0e2749;
  --new-slot-details-date-txt-shadow: #ffffff;
  --new-slot-details-date-border: #0e2749;
  --new-slot-details-select-date-bg: #ffffff;
  --new-slot-details-select-date-week-txt: rgba(14, 39, 73, .5);
  --new-slot-details-select-date-txt: #0e2749;
  --new-slot-details-select-date-ball: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --new-slot-details-pop-bg: #ffffff;
  --new-slot-details-pop-btn-bg: #f4b600;
  --new-slot-details-pop-btn-txt: #0e2749;
  --new-slot-details-loading-color-1: #ffc20f;
  --new-slot-details-loading-color-2: #f4b600;
  --new-slot-details-empty-txt: #0e2749;
  --promotion-bg: #ffffff;
  --promotion-info-bg: #ffffff;
  --promotion-info-txt: #0e2749;
  --promotion-clock-icon-color: rgba(14, 39, 73, .5);
  /* --pop-promotion-txt: #0e2749; */
  /* --pop-promotion-title-bg: #054ea1; */
  --pop-promotion-title: #ffffff;
  --pop-promotion-clock-icon-color: #0e2749;
  --pop-promotion-table-title-bg: #054ea1;
  --pop-promotion-table-title-txt: #f4b600;
  --pop-promotion-table-content-bg: #ffffff;
  --pop-promotion-table-content-txt: #0e2749;
  --pop-promotion-table-content-border: #ebebeb;
  --pop-promotion-bonuswallet-title: #0e2749;
  --pop-promotion-bonuswallet-wallet-bg: #ffffff;
  --pop-promotion-bonuswallet-wallet-txt: #0e2749;
  --pop-promotion-bonuswallet-wallet-number: #0e2749;
  --pop-promotion-bonuswallet-deposit-now-border: rgba(14, 39, 73, .2);
  --pop-promotion-bonuswallet-deposit-now-bg: #ebebeb;
  --pop-promotion-bonuswallet-link: #f4b600;
  --btn-status-txt: #ffffff;
  --btn-attend-bg: #00cc66;
  --btn-request-bg: #e20000;
  --btn-joined-bg: #f48a00;
  --btn-apply-bg: #054ea1;
  --btn-request-status-txt: rgba(255, 255, 255, .8);
  --btn-joined-status-txt: rgba(255, 255, 255, .8);
  --btn-detail-bg: var(--btn-main-bg);
  --btn-before-bg: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 100%);
  --form-inputgroup-input-bg: #dfe1e5;
  --form-inputgroup-input-border: #dfe1e5;
  --form-inputgroup-input-txt: #0e2749;
  --form-inputgroup-input-txt-placeholder: #7e919e;
  --form-inputgroup-btn-txt: #0e2749;
  --limit-title: #f4b600;
  --limit-txt: #7e919e;
  --limit-ip-txt: #0e2749;
  --limit-timezone-txt: #0e2749;
  --limit-time-txt: #0e2749;
  --gotop-bg: linear-gradient(180deg, #3976ff 0%, #054ea1 100%);
  --chat-bg: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --app-download-bg: linear-gradient(to top, #0e2749 0%, #0e2749 50%);
  --launch-bg: #f4b600;
  --launch-linear-bg: linear-gradient(180deg, #f4b600 0%, #f4b600 100%);
  --launch-menu-highlight-shadow-color01: #147ff8;
  --launch-btn-bg: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
  --lanuch-stop-color: #3976ff;
  --lanuch-end-color: #0653ff;
  --launch-game-header-bg: linear-gradient(180deg, #3976ff 0%, #054ea1 100%);
  --launch-game-btn-bg: linear-gradient(180deg, #3976ff 0%, #054ea1 100%);
  --launch-game-logo-shadow: rgba(242, 242, 242, .5);
  --launch-game-icon-color: #f4b600;
  --third-party-txt-default: #0e2749;
  --third-party-shadow-default: #c0c0c0;
  --third-party-login-content-bg: #efeff0;
  --third-party-login-form-txt: #0e2749;
  --third-party-login-form-input-txt: #0e2749;
  --third-party-login-form-input-border-focus: #f4b600;
  --third-party-login-form-eyes-icon-color: #7e919e;
  --third-party-login-form-clear-icon-color: #7e919e;
  --third-party-login-puzzle-box-border: #e0e0e0;
  --third-party-login-puzzle-box-txt: #0e2749;
  --third-party-login-puzzle-box-slider-bg: #e0e0e0;
  --third-party-login-puzzle-box-slider-btn-bg: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --third-party-login-puzzle-box-slider-btn-inner-shadow: transparent;
  --third-party-login-puzzle-box-slider-btn-arrow-icon-color: #0e2749;
  --third-party-login-btn-main-bg: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --third-party-login-puzzle-box-refresh-icon-color: #7e919e;
  --third-party-login-btn-main-txt: #0e2749;
  --third-party-login-btn-main-bg-disabled: #878e92;
  --third-party-login-findpassword-txt: #6481c0;
  --third-party-login-txt: #0e2749;
  --third-party-login-tab-txt: #ffffff;
  --third-party-login-tab-txt-active: #f4b600;
  --third-party-login-tab-line-active: #f4b600;
  --third-party-verification-code-txt-highlight: #f4b600;
  --third-party-verification-code-txt: #6481c0;
  --third-party-verification-code-link: #f4b600;
  --third-party-register-succes-title: var(--pop-register-success-title);
  --third-party-register-success-txt: #0e2749;
  --third-party-register-success-input-border: #f4b600;
  --third-party-register-success-input-copy-btn-bg: #f4b600;
  --third-party-login-form-input-bg: #f2f2f2;
  --third-party-register-btn-secondary-bg: #f2f2f2;
  --btn-main-bg: #f4b600;
  --third-party-register-btn-main-bg: #f4b600;
  --third-party-register-btn-secondary-txt: #222222;
  --third-party-register-tips-txt: #6481c0;
  --third-party-register-link: #0e2749;
  --third-party-register-btn-tertiary-bg: #f4b600;
  --third-party-register-btn-tertiary-txt: #0e2749;
  --third-party-register-form-select-item-bg: #f2f2f2;
  --third-party-register-form-tips-txt: #6481c0;
  --third-party-register-form-tips-highlight: #f4b600;
  --quick-register-entry-btn-name: #0e2749;
  --quick-register-entry-btn-txt: #0e2749;
  --quick-register-entry-btn-bg: #ffffff;
  --quick-register-entry-btn-active-bg: #f4b600;
  --quick-register-entry-btn-icon: #0a3f83;
  --quick-register-entry-btn-icon-active: #0a3f83;
  --third-party-register-success-copy-icon-color: #0e2749;
  --third-party-personal-item-title: rgba(14, 39, 73, .7);
  --third-party-personal-item-tag-txt: #0e2749;
  --third-party-personal-item-tag-bg: #f4b600;
  --third-party-personal-membername-wrap-txt: #0e2749;
  --third-party-personal-vip-membername-txt: #0e2749;
  --third-party-personal-myvip-txt: #f4b600;
  --third-party-btn-mask-bg: #f4b600;
  --third-party-personal-add-phone-border: #f4b600;
  --third-party-personal-add-phone-txt: #f4b600;
  --page-main-close-color: #ffffff;
  --tab-btn-bar-line-shadow: rgba(244, 182, 0, .2);
  --form-tag-recommand-border: hsla(212, 94%, 3%, 1);
  --loading-animation-card-banner: hsla(215, 68%, 22%, 1);
  --loading-animation-lobby-icon-gradient: hsla(215, 68%, 27%, 1);
  --loading-animation-lobby-icon-gradient-bg: hsla(215, 68%, 22%, 1);
  --third-party-pop-success-bg: #ffffff;
  --profile-vip-number: #f4b600;
  --profile-vip-btn-bg: #054ea1;
  --profile-vip-btn-txt: #ffffff;
  --profile-vip-arrow-icon-color: #ffffff;
  --profile-txt: rgba(14, 39, 73, .6);
  --profile-name: #f4b600;
  --profile-tips-txt: #7e919e;
  --profile-tips-link: #f4a000;
  --profile-member-menu-point-bg: #ffffff;
  --pop-getvcode-btn: #f4b600;
  --pop-getvcode-btn-txt: #0e2749;
  --pop-getvcode-countdown-txt: #f4b600;
  --pop-getvcode-resend-txt: #f4b600;
  --bonuswallet-card-bg: #ffffff;
  --bonuswallet-card-bg-completed: #ffffff;
  --bonuswallet-zone: #f4b600;
  --bonuswallet-amount: #f4b600;
  --bonuswallet-amount-complete: #f4b600;
  --bonuswallet-amount-disable: #f4b600;
  --bonuswallet-progress-bar-bg: #efeff0;
  --bonuswallet-progress-bar-bg-active: linear-gradient(270deg, #8aaeff 0%, #054ea1 100%);
  --bonuswallet-progress-bar-bg-active-shadow: transparent;
  --bonuswallet-progress-bar-txt: #0e2749;
  --bonuswallet-dot: rgba(14, 39, 73, .2);
  --bonuswallet-detail-txt: rgba(14, 39, 73, .5);
  --vip-bg: linear-gradient(180deg, #054ea1 0%, #18417c 100%);
  --vip-card-bg: linear-gradient(180deg, #0766d2 0%, #0d41b6 100%);
  --vip-card-title: #ffffff;
  --vip-card-history-btn-bg: linear-gradient(180deg, #ffc828 8%, #f4b600 100%);
  --vip-card-history-icon-color: #054ea1;
  --vip-card-progress-bar-bg: rgba(0, 0, 0, .2);
  --vip-card-progress-bar-bg-active: linear-gradient(180deg, #f4b600 8%, #f6a108 100%);
  --vip-card-progress-bar-bg-active-shadow: #0d41b6;
  --vip-card-tips: #ffffff;
  --vip-card-bottom-bg: rgba(0, 0, 0, .1);
  --vip-card-bottom-more-txt: #ffffff;
  --vip-total-ttile: #ffffff;
  --vip-total-num: #f4b600;
  --vip-total-txt-bg: rgba(0, 0, 0, .5);
  --vip-total-record-btn-bg: linear-gradient(180deg, #ffc828 0%, #f4b600 100%);
  --vip-total-record-icon-color: #054ea1;
  --vip-convert-title: #ffffff;
  --vip-refresh-txt: #ffffff;
  --vip-refresh-icon-color: #ffffff;
  --vip-cash-point-bg: linear-gradient(180deg, #0766d2 0%, #0d41b6 100%);
  --vip-cash-point-def: #ffffff;
  --vip-cash-point-grey: rgba(255, 255, 255, .5);
  --vip-cash-point-title: #ffffff;
  --vip-cash-point-requirement-txt: #ffffff;
  --vip-cash-point-input-txt: #f4b600;
  --vip-cash-point-input-error: #ff8080;
  --vip-cash-point-tips: #ffffff;
  --vip-cash-point-default-btn-bg: linear-gradient(180deg, #4d74cc 0%, #0f3ca1 100%);
  --vip-cash-point-default-btn-txt: rgba(255, 255, 255, .8);
  --vip-cash-point-allow-btn-bg: linear-gradient(180deg, #ffc828 0%, #f4b600 100%);
  --vip-ani-title: #ffffff;
  --vip-history-year: #f4b600;
  --vip-history-month: #f4b600;
  --vip-detail-lv-bottom-bg: #ebebeb;
  --vip-detail-lv-txt: #0e2749;
  --vip-detail-box-bg: #ffffff;
  --vip-detail-box-bg-shadow: rgba(0, 0, 0, .05);
  --vip-detail-highlight-txt: #054ea1;
  --vip-detail-txt: #0e2749;
  --vip-detail-border: rgba(14, 39, 73, .06);
  --vip-detail-card-bg: #f2f2f2;
  --vip-detail-card-bg-shadow: rgba(0, 0, 0, .15);
  --vip-detail-card-txt: #0e2749;
  --vip-detail-link: #f4a000;
  /* --vip-points-table-head-bg: #054ea1; */
  --vip-points-table-head-txt: #ffffff;
  --vip-points-table-head-border: #f4b600;
  --vip-points-table-head-zone: #f4b600;
  --vip-points-table-body-bg: #ffffff;
  --vip-points-table-body-record-bg: #f2f2f2;
  --vip-points-table-body-txt: #0e2749;
  --vip-points-table-body-border: #ffffff;
  --vip-points-table-body-top-border: #ffffff;
  /* --accordion-bg: #ffffff; */
  --accordion-title-bg: #ffffff;
  --accordion-title: #0e2749;
  --accordion-info-icon-color: #0e2749;
  --accordion-arrow-icon-color: #0e2749;
  --accordion-dot: rgba(14, 39, 73, .5);
  --accordion-txt: rgba(14, 39, 73, .7);
  --accordion-color-bg-title: #ffffff;
  --accordion-add-bank-card-title-bg: #2254ba;
  --wallet-bank-card-copy-tooltips-txt: #ffffff;
  --pop-verification-link: #f4a000;
  --wallet-recommond-tag-bg: #f4a000;
  --wallet-maintain-bg: rgba(146, 146, 146, .8);
  --wallet-maintain-border: rgba(146, 146, 146, .8);
  --wallet-account-info-txt: #0e2749;
  --wallet-account-info-border: rgba(14, 39, 73, .5);
  --wallet-account-info-copy-icon-color: #0e2749;
  --wallet-account-info-copy-tooltips-txt: #0e2749;
  --wallet-account-info-copy-tooltips-txt-shadow: #ffffff;
  --wallet-bank-card-bg: linear-gradient(135deg, #054ea1 0%, #021e3e 20%, #054ea1 70%, #0766d2 100%);
  --wallet-crypto-switch-icon-color: #ffffff;
  --wallet-crypto-tips-txt: #0e2749;
  --wallet-crypto-tips-highlight: #f4b600;
  --wallet-top-bg: #4b6cb6;
  --wallet-top-txt: #ffffff;
  /* --tips-info-bg: #ffffff; */
  --tips-info-title: #4b6cb6;
  --tips-info-icon-color: #4b6cb6;
  --tips-info-arrow-icon-color: #ffffff;
  --tips-info-border: rgba(14, 39, 73, .4);
  --wallet-pending-transactions-bg: #ffffff;
  --wallet-pending-transactions-title: #0e2749;
  --wallet-pending-transactions-arrow-icon-color: #0e2749;
  --wallet-pending-transactions-date: #0e2749;
  --wallet-free-tag-bg: #f4b600;
  --wallet-free-tag-txt: #0e2749;
  --wallet-select-bank-card-txt: #ffffff;
  --wallet-bankcard-bg: #5881b8;
  --wallet-bankcard-bg-checked-bg: #0d73ed;
  --wallet-bankcard-bg-checked-border: #f4b600;
  --wallet-otp-send-btn-bg: #143d70;
  --wallet-otp-sending-btn-bg: #6f8ac5;
  --wallet-otp-resend-txt: #143d70;
  --bank-card-frost-txt: #0e2749;
  --bank-card-frost-icon: #0e2749;
  --bank-card-frost-btn: #0e2749;
  --wallet-kyc-verify-mask-bg: rgba(0, 0, 0, .4);
  --transaction-pop-processing-cont-border-color: rgba(14, 39, 73, .3);
  --transaction-pop-processing-title: var(--primary);
  --transaction-pop-amount-cont-txt-strong: var(--primary);
  --transfer-ani-default-tips-bg: #f4b600;
  --transfer-ani-default-tips-border: #414141;
  --transfer-ani-platform-bg: #054ea1;
  --transfer-ani-platform-darken-color: #ffc331;
  --transfer-ani-platform-lighten-color: #0766d2;
  --transfer-ani-platform-logo-border: #ffffff;
  --transfer-ani-platform-secondary-darken-color: #f4b600;
  --transfer-ani-platform-secondary-lighten-color: #f4b600;
  --transfer-ani-account-lighten-color: #ffc331;
  --transfer-ani-account-logo-border: #ffffff;
  --filter-title: #ffffff;
  --transaction-record-table-body-date-bg: #f4b600;
  --transaction-record-table-body-date: #0e2749;
  --transaction-record-calendar-icon-color: #0e2749;
  --transaction-record-table-body-zone: #0e2749;
  --transaction-record-pending: #cc9500;
  --pop-transaction-details-bank-name-bg: #ffffff;
  --pop-transaction-details-bank-name-txt: #0e2749;
  --pop-transaction-details-header-bg: #054ea1;
  --pop-transaction-details-header-txt: #ffffff;
  --pop-transaction-details-close-icon-color: rgba(255, 255, 255, .5);
  --pop-transaction-details-tab-bg: #054ea1;
  --pop-transaction-details-title: #0e2749;
  --pop-transaction-details-date: #0e2749;
  --pop-transaction-details-message-bg: #ffffff;
  --pop-transaction-details-message-current-txt: #0e2749;
  --pop-transaction-details-table-bg: #ffffff;
  --pop-transaction-details-table-bg-even: #e3e3e3;
  --pop-transaction-details-table-txt: #0e2749;
  --pop-transaction-details-tips-txt: #f4b600;
  --pop-transaction-details-btn-area-bg: #ebebeb;
  --betting-details-table-head-bg: #f4b600;
  --betting-details-table-head-border: #0e2749;
  --betting-record-table-head-title: #0e2749;
  --betting-record-table-head-txt: #0e2749;
  --betting-record-table-date-area-bg: #f4b600;
  --betting-record-table-zone: #0e2749;
  --betting-record-tooltips-icon-color: #0e2749;
  --betting-record-tooltips-border: #ffffff;
  --betting-record-tooltips-bg: #ffffff;
  --betting-record-tooltips-txt: #0e2749;
  --cricket-betting-details-total-title-bg: #054ea1;
  --cricket-betting-details-collapse-arrow-color: #0e2749;
  --cricket-betting-details-avg-odds-circle: #f4b600;
  --cricket-betting-details-avg-odds-icon-color: #054ea1;
  --cricket-betting-details-turnover-circle: #054ea1;
  --cricket-betting-details-turnover-icon-color: #f4b600;
  --mail-notice-icon-circle-bg: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --mail-date-bg: #054ea1;
  --mail-date-txt: #ffffff;
  --mail-date-calendar-icon-color: #ffffff;
  --mail-date-zone: #f4b600;
  --mail-list-bg: #ffffff;
  --mail-list-title: #0e2749;
  --mail-list-txt: rgba(14, 39, 73, .8);
  --mail-list-border: rgba(14, 39, 73, .2);
  --mail-editor-icon-color: #054ea1;
  --mail-editor-pop-txt: #0e2749;
  --mail-editor-choose-icon-color: rgba(14, 39, 73, .2);
  --mail-editor-choose-icon-active: #0e2749;
  --mail-editor-pop-check-bg: #efeff0;
  --mail-editor-pop-bg: #ebebeb;
  --mail-editor-pop-check-txt: #0e2749;
  --recommend-gift-bg: #f4b600;
  --recommend-input-border: #f4b600;
  --recommend-input-btn: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --recommend-share-btn: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --recommend-share-txt: #0e2749;
  --recommend-condition-title: #0e2749;
  --recommend-condition-bg: #f2f2f2;
  --recommend-input-bg: #ffffff;
  --recommend-complete-txt: rgba(14, 39, 73, .7);
  --turnover-card-bg: #ffffff;
  --turnover-card-detail: #054ea1;
  --pop-turnover-table-bg: #ffffff;
  --pop-turnover-table-txt: #0e2749;
  --realtime-bonus-available-bg: linear-gradient(180deg, #406eb0 0%, #054ea1 100%);
  --realtime-bonus-available-amount: #ffffff;
  --about-us-bg: #ffffff;
  --about-us-table-title-txt: rgba(14, 39, 73, .7);
  --about-us-table-title-bg: #f4b600;
  --about-us-mail-link: #054ea1;
  --tips-info-i: #f4b600;
  --color-player-form-border: #ffffff;
  --color-player-form-upload: #ffffff;
  --color-rf-statusbox-input-date-text: #ffffff;
  --widget-btn-size: 50px;
  --on-surface-primary: rgba(0, 0, 0, .9);
  --on-surface-secondary: rgba(0, 0, 0, .7);
  --on-surface-tertiary: rgba(0, 0, 0, .5);
  --on-surface-disabled: rgba(0, 0, 0, .3);
  --surface-default: #ebebeb;
  --surface-container: #ffffff;
  --surface-disabled: rgba(0, 0, 0, .2);
  --pwa-download-bg: linear-gradient(90deg, #f5f5f5 0%, #cccccc 100%);
  --pwa-icon-frame: rgba(255, 255, 255, .5);
  --pwa-close-icon-bg: #000000;
  --pwa-download-btn-bg: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --ios-pop-header-bg: linear-gradient(0deg, #ebebeb 0%, #f4b600 100%);
  --ios-title-text-color: #0000000;
  --ios-line-color: rgba(0, 0, 0, .2);
  --ios-outside-number-bg: #2254ba;
  --ios-icon-bg: #ffffff;
  --ios-pop-bg: #ebebeb;
  --ios-num-text-color: #000000;
  --ios-focus-top-bg: #2254ba;
  --ios-strong-text-color: #000000
}

:root mcd-free-spin {
  --free-spin-use-now-btn-bg: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
  --free-spin-select-game-btn-bg: linear-gradient(180deg, #e5e5e5 0%, #a4a4a4 100%);
  --free-spin-use-now-btn-txt: #000000;
  --free-spin-select-game-btn-txt: #000000
}

:root mcd-left-game-layout {
  --left-game-layout-nav-item-icon-width: 24px;
  --left-game-layout-nav-item-icon-height: 24px;
  --left-game-layout-nav-descend-item-text-font-weight: 400;
  --left-game-layout-nav-item-text-font-weight: 600;
  --left-game-layout-nav-item-text-font-size: 14px;
  --left-game-layout-category-sec-border-width: 0;
  --left-game-layout-collapse-arrow-transform: rotate(180deg);
  --left-game-layout-collapse-arrow-mask-size: 40%;
  --left-game-layout-collapse-arrow-webkit-mask-size: 40%;
  --left-game-layout-category-hover: var(--leftmenu-category-sec-bg);
  --left-game-layout-not-collapse-background: transparent;
  --left-game-layout-not-collapse-border-left-width: 0;
  --left-game-layout-descend-icon-size: 18px
}

.main-wallet-label {
  --main-wallet-label-bg: #f2f2f2;
  --main-wallet-label-text: #0e2749
}

.float-widget {
  --widget-btn-bg: rgb(255 255 255 / 50%)
}

.referral-partner-tab {
  --referral-partner-tab-bg: #efeff0;
  --referral-partner-tab-shadow: transparent;
  --referral-partner-tab-btn-active: #f4b600;
  --referral-partner-tab-btn-disabled: #d5d5d5;
  --referral-partner-tab-btn-txt: #0e2749;
  --referral-partner-tab-btn-txt-active: #222222
}

.referral-partner {
  --referral-partner-table-content-bg: #f2f2f2;
  --referral-partner-achievement-list-bg: linear-gradient(325deg, #48a7fc 0, #1478de 75%, #064ddc 100%);
  --referral-partner-receive-box-price-txt: #f4b600;
  --referral-partner-achievement-txt-strong: #f4b600;
  --referral-partner-achievement-progress-bar-bg: #0e2749;
  --referral-partner-achievement-txt: #ffffff;
  --referral-partner-achievement-progress-bar-active: #f4b600
}

.referral-partner mcd-invitation-link {
  --recommend-share-txt: #222222
}

mcd-referral-bonus-goals-detail {
  --referral-partner-mask-bg-complete: rgba(9, 172, 107, .6);
  --referral-partner-bonus-goals-detail-bg: #ebebeb;
  --referral-partner-bonus-goals-detail-title-txt: #0e2749;
  --referral-partner-reward-pop-list-txt: #222222;
  --referral-partner-reward-pop-list-bg-first: #276efe;
  --referral-partner-reward-pop-list-bg-second: #3c7aff;
  --referral-partner-reward-pop-list-bg-third: #3794ff;
  --referral-partner-reward-pop-list-bg-fourth: #4ba1f8;
  --referral-partner-reward-pop-list-bg-fifth: #6dbbff;
  --referral-partner-reward-pop-list-bg-sixth: #f4b600;
  --referral-partner-reward-pop-list-bg-seventh: #ffcf43;
  --referral-partner-reward-pop-list-bg-eighth: #ffe086;
  --referral-partner-reward-pop-list-bg-ninth: #fdf3bb;
  --referral-partner-reward-pop-list-bg-default: #fcf9e8;
  --referral-partner-bonus-goals-detail-btn-close: rgba(14, 39, 73, .5)
}

.pop-inner .language-list .right-language-area .radio-box li {
  --pop-language-btn-txt: #0e2749
}

.float-banner {
  --color-title: #0e2749
}

.header-desktop {
  --header-background: linear-gradient(180deg, #2254ba 0%, #163e90 100%);
  --header-btn-bg: #f4b600;
  --header-btn-color: #0e2749;
  --header-btn-bg-secondary: #f2f2f2;
  --header-btn-color-secondary: #0e2749;
  --icon-color: #ffffff
}

.deposit-label {
  --deposit-label-bg: #f4b600;
  --main-deposit-text: #0e2749
}

.header-desktop-user-dropdown {
  --header-desktop-user-dropdown-bg: #ffffff;
  --header-desktop-user-dropdown-border: rgba(5, 39, 83, .1);
  --header-desktop-user-dropdown-txt: #0e2749;
  --header-desktop-user-dropdown-value-display-highlight: #f4b600
}

.header-desktop-user-dropdown .header-desktop-user-dropdown-item__icon {
  --header-desktop-user-dropdown-txt: #0a3f83
}

.header-desktop-user-dropdown-item {
  --header-desktop-user-dropdown-inbox-bg: #ff5757
}

.left-menu {
  --leftmenu-head-arrow-icon: #0e2749;
  --leftmenu-head-arrow-bg: #e5e5e5;
  --leftmenu-head-bg: linear-gradient(180deg, #2254ba 0%, #163e90 100%);
  --leftmenu-head-bg-mini: linear-gradient(180deg, #2254ba 0%, #163e90 100%);
  --leftmenu-head-btn-bg: #e5e5e5;
  --leftmenu-head-btn-txt: #0e2749;
  --leftmenu-head-btn-bg-highlight: #f4b600;
  --leftmenu-head-btn-txt-highlight: #0e2749;
  --leftmenu-category-border: transparent;
  --leftmenu-category-bg: #ffffff;
  --leftmenu-category-txt: #052753;
  --leftmenu-category-sec-bg: #f2f2f2;
  --leftmenu-category-arrow-icon: #032682
}

.toggle-box {
  --toggle-box-bg: #032682;
  --toggle-box-txt: #052753
}

.list-arrow {
  --pop-search-back-icon-color: #0e2749
}

.pop-notification .btn-box {
  --color-walletcard-txt: #0e2749;
  --pop-bonuswallet-card-start-btn: #054ea1;
  --color-walletcard-cancel-btn: #cfcfcf
}

.pop-notification .btn-box .btn-primary {
  --color-walletcard-txt: #ffffff
}

.nav-item {
  --leftmenu-category-hover: rgba(#ffb80c, .1);
  --leftmenu-category-focus-bg-active: linear-gradient(270deg, rgba(#ffb80c, .3) 0%, rgba(#ffb80c, .4) 100%)
}

.nav-item,
.left-menu-content {
  --leftmenu-category-hover: rgba(255, 184, 12, .1);
  --leftmenu-category-focus-bg-active: linear-gradient(270deg, rgba(255, 184, 12, .3) 0%, rgba(255, 184, 12, .4) 100%)
}

header {
  z-index: 60
}

.pop-bg {
  z-index: 120
}

.pop-wrap {
  z-index: 129
}

.menu-mask {
  z-index: 115
}

.gotop {
  z-index: 84
}

.float-banner {
  z-index: 80
}

.searchpage {
  z-index: 129
}

.launch-game-content {
  z-index: 115
}

.tips-display {
  z-index: 116
}

.loader-box {
  z-index: 9002
}

.loading-mask {
  z-index: 9001
}

.rotating-pop {
  z-index: 130
}

#chat-widget-container {
  z-index: 120 !important
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

* {
  -webkit-tap-highlight-color: transparent;
  outline: none
}

select,
input {
  border-radius: 0;
  appearance: none
}

input[type=number] {
  -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

a {
  text-decoration: none
}

.gotop {
  display: none;
  opacity: 0;
  background: var(--gotop-bg)
}

.gotop.is-visible {
  display: block;
  animation: gotopShow .3s linear forwards;
  opacity: 0
}

@keyframes gotopShow {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.gotop:before,
.gotop:after {
  content: "";
  position: absolute;
  top: 35%;
  left: 47%;
  width: 3px;
  height: 15px;
  border-radius: .5333333333rem;
  background: var(--gotop-icon)
}

.gotop:before {
  margin-left: 2px;
  transform: rotate(40deg);
  transform-origin: top left
}

.gotop:after {
  margin-right: 2px;
  transform: rotate(-40deg);
  transform-origin: top right
}

.gotop.gotop-index {
  right: 0;
  bottom: 0;
  transform: scale(.7)
}

.gotop.bottom-1 {
  bottom: 10px
}

.gotop.bottom-2 {
  bottom: 78px
}

.gotop.bottom-3 {
  bottom: 146px
}

.gotop.bottom-4 {
  bottom: 214px
}

.gotop {
  position: fixed;
  right: 2.6666666667rem;
  bottom: 5.3333333333rem;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  transition: all .3s ease-in;
  border-radius: 50%;
  background: var(--gotop-bg);
  box-shadow: 0 3.2rem 2.6666666667rem #281a7021, inset 0 .2666666667rem .8rem #ffffff80;
  color: #fff
}

.menu-mask {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--sidenav-mask);
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw)
}

.menu {
  display: flex;
  position: fixed;
  z-index: 116;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .3s;
  -webkit-overflow-scrolling: touch
}

.menu.active {
  left: 0;
  transition-delay: .3s
}

.menu.active .btn-close {
  position: absolute;
  z-index: 117;
  top: 0;
  right: 0;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  animation: closeshow .6s .6s cubic-bezier(.25, .46, .45, .94) both;
  background: var(--sidenav-close-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 50%
}

.menu.active .btn-close.is-open-member-menu {
  background: var(--sidenav-member-close-icon-color)
}

@keyframes closeshow {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.menu-first {
  position: relative;
  top: 10.6666666667rem;
  left: 2.1333333333rem;
  z-index: 116;
  height: -moz-fit-content;
  height: fit-content
}

.menu-first .beforelogin,
.menu-first .afterlogin {
  width: 100%;
  height: 16rem;
  margin: 0;
  border-radius: 0 0 2.6666666667rem 2.6666666667rem;
  background: var(--sidenav-info-bottom-bg);
  box-shadow: none
}

.menu-first .beforelogin a {
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sidenav-info-title-bottom);
  text-shadow: 0 0 .8rem var(--board-register-btn-txt-shadow)
}

.menu-first .beforelogin .login-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 50%;
  background: none;
  box-shadow: none
}

.menu-first .beforelogin .login-button span {
  flex: 0 0 4rem;
  background: var(--sidenav-info-login-icon-color);
  height: 16rem;
  margin: 0 2.1333333333rem 0 6.6666666667rem;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 4rem
}

.menu-first .beforelogin .login-button a {
  background: none;
  text-shadow: none
}

.menu-first .beforelogin .register-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 50%;
  border-radius: 0;
  background: none;
  box-shadow: none
}

.menu-first .beforelogin .register-button span {
  flex: 0 0 4rem;
  background: var(--sidenav-info-register-icon-color);
  height: 16rem;
  margin: 0 2.1333333333rem 0 6.6666666667rem;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 4rem
}

.menu-first .beforelogin .register-button a {
  background: none;
  text-shadow: none
}

.menu-first .afterlogin {
  align-items: center;
  overflow: hidden
}

.menu-first .afterlogin .main-wallet,
.menu-first .afterlogin .balance {
  width: 70%;
  margin: 0 4.2666666667rem;
  padding: 0;
  background: none;
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden
}

.menu-first .afterlogin .main-wallet:before,
.menu-first .afterlogin .balance:before {
  display: none
}

.menu-first .afterlogin .main-wallet .wallet,
.menu-first .afterlogin .main-wallet .text,
.menu-first .afterlogin .balance .wallet,
.menu-first .afterlogin .balance .text {
  color: var(--sidenav-wallet-txt)
}

.menu-first .afterlogin .main-wallet .bonus,
.menu-first .afterlogin .main-wallet .amount,
.menu-first .afterlogin .balance .bonus,
.menu-first .afterlogin .balance .amount {
  color: var(--sidenav-wallet-amount);
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 4.8rem
}

.menu-first .afterlogin .main-wallet .icon-refresh,
.menu-first .afterlogin .balance .icon-refresh {
  background: var(--sidenav-wallet-txt)
}

.menu-first .afterlogin .main-wallet .icon-refresh.active,
.menu-first .afterlogin .balance .icon-refresh.active {
  animation: rotate 1s forwards
}

.menu-first .afterlogin .btn-wallet {
  position: absolute;
  top: 50%;
  left: 85%;
  transform: translate(-50%, -50%)
}

.menu-first .afterlogin .btn-wallet .icon-wallet {
  display: block;
  z-index: 1;
  top: 0;
  position: absolute;
  width: 8rem;
  height: 8rem;
  mask-size: 60%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--icon-bonus-wallet-bg)
}

.menu-first .afterlogin .btn-wallet .icon-wallet-bg {
  display: block;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background-color: var(--sidenav-wallet-icon-bg)
}

.menu-first .afterlogin .balance {
  display: none
}

.menu-first .afterlogin.marquee .balance {
  display: flex;
  position: absolute;
  top: 100%
}

.menu-first .pwa-download {
  bottom: 16rem
}

.menu-first .menu-item {
  position: relative;
  margin-top: 2.1333333333rem;
  padding-bottom: 4.2666666667rem
}

.menu-first .menu-item ul {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 61.8666666667rem
}

.menu-first .menu-item .item-box,
.menu-first .menu-item .contact-box,
.menu-first .menu-item .home-box {
  margin-bottom: 2.1333333333rem;
  border-radius: 2.6666666667rem;
  background: var(--sidenav-category-columns-bg);
  box-shadow: 0 2.1333333333rem 2.6666666667rem color-mix(in srgb, var(--sidenav-category-shadow), transparent 70%), inset .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 80%)
}

.menu-first .menu-item .item-box li,
.menu-first .menu-item .contact-box li,
.menu-first .menu-item .home-box li {
  margin: 0 2.1333333333rem 0 0;
  background: none;
  box-shadow: none
}

.menu-first .menu-item .item-box li:nth-child(3n),
.menu-first .menu-item .contact-box li:nth-child(3n),
.menu-first .menu-item .home-box li:nth-child(3n) {
  margin: 0
}

.menu-first .menu-item .switch-banner {
  margin-bottom: 2.1333333333rem
}

.menu-first .menu-item .switch-banner__img {
  border-radius: 2.6666666667rem;
  width: 100%;
  height: auto;
  display: block
}

.menu-first .menu-item .home-box {
  display: block
}

.menu-first .menu-item .home-box li {
  display: inline-flex;
  align-items: center;
  width: 29.8666666667rem;
  margin: 0
}

.menu-first .menu-item .home-box li a {
  display: flex;
  align-items: center;
  margin: 0 0 0 2.6666666667rem
}

.menu-first .menu-item .home-box li p {
  overflow: visible;
  white-space: normal;
  line-height: 1.2;
  margin-left: 1.0666666667rem
}

.menu-first .menu-item li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 19.2rem;
  height: 19.2rem;
  margin: 0 2.1333333333rem 2.1333333333rem 0;
  padding: 1.0666666667rem;
  transition: all .3s;
  border-radius: 2.6666666667rem;
  background: var(--sidenav-category-bg);
  box-shadow: 0 2.1333333333rem 2.6666666667rem color-mix(in srgb, var(--sidenav-category-shadow), transparent 70%), inset .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 80%);
  font-size: 2.9333333333rem;
  text-align: center;
  overflow: hidden
}

.menu-first .menu-item li:nth-child(3n) {
  margin: 0 0 2.6666666667rem
}

.menu-first .menu-item li a {
  color: var(--sidenav-category-txt);
  text-decoration: none
}

.menu-first .menu-item li a span {
  display: block;
  width: 8rem;
  height: 8rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--menu-icon-normal-bg);
  margin: 0 auto
}

.menu-first .menu-item li a span.active {
  background-color: var(--menu-icon-active-bg)
}

.menu-first .menu-item li a span.use-icon-path {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  background-color: unset;
  -webkit-background-repeat: no-repeat;
  -webkit-background-position: center;
  -webkit-background-size: cover;
  width: 6.9333333333rem;
  height: 6.9333333333rem
}

.menu-first .menu-item li a img {
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 0 auto
}

.menu-first .menu-item li a p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 19.2rem;
  line-height: 1.5;
  margin-top: 1.0666666667rem
}

.menu-first .menu-item li.active {
  background: var(--sidenav-category-bg-active)
}

.menu-first .menu-item li.active p {
  color: var(--sidenav-category-txt-active)
}

.menu-first .menu-item .shortcut-box li[data-category=bonuses] a:before {
  background-image: var(--sidenav-category-icon-bonuses)
}

.menu-first .menu-item .shortcut-box li[data-category=withdrawal] a:before {
  background-image: var(--sidenav-category-icon-withdrawal)
}

.menu-first .menu-item .shortcut-box li[data-category=inbox] a:before {
  background-image: var(--sidenav-category-icon-inbox)
}

.menu-first .menu-item .fantacy-game a:before {
  display: none
}

.menu-first .menu-item .fantacy-game .voucher-mark {
  position: absolute;
  top: -1.0666666667rem;
  right: -1.0666666667rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: #ff3a3a;
  line-height: 4.8rem;
  text-align: center;
  font-weight: 600;
  color: #fff
}

.menu-first .menu-item-reminder {
  position: absolute;
  top: 0;
  right: 0
}

.menu-first .menu-item-reminder__icon {
  width: 30px
}

.menu-first .toggle-box {
  position: absolute;
  top: -8rem;
  right: 0
}

.menu-first .menu-component-slot {
  background: var(--sidenav-category-bg);
  border-radius: 2.6666666667rem;
  margin-top: 2.1333333333rem
}

.menu-first .menu-component-slot .sponsor-representation__descrp {
  color: var(--sidenav-category-txt)
}

.menu-first .bottom-menu-component {
  background: var(--sidenav-category-bg);
  border-radius: 2.6666666667rem;
  margin-top: 2.1333333333rem
}

.menu-first .bottom-menu-component .sponsor-representation__former {
  display: block;
  position: relative;
  padding: 3.2rem 4rem
}

.menu-first .bottom-menu-component .sponsor-representation__descrp {
  position: absolute;
  bottom: 4rem;
  left: 16.5333333333rem;
  font-size: 3.2rem;
  color: var(--sidenav-category-txt)
}

html:lang(ma) .menu-first .bottom-menu-component .sponsor-representation__descrp {
  font-size: 2.9333333333rem
}

.menu-top {
  position: relative;
  z-index: 116;
  width: 61.8666666667rem
}

.menu-banner {
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: 0 .2666666667rem .8rem color-mix(in srgb, var(--offset-shadow), transparent 50%);
  background: var(--sidenav-bg)
}

.menu-banner__img {
  width: 100%;
  height: 100%
}

.menu .menu-banner {
  height: 36rem;
  padding: 2.1333333333rem
}

.menu .menu-banner .banner-v1 {
  height: 125px !important
}

.menu .menu-banner .banner-v1 .carousel-wrap {
  height: 33.3333333333rem
}

.menu .menu-banner .banner-v1 .carousel-wrap .item {
  height: 33.3333333333rem;
  padding: 0
}

.menu .menu-banner .banner-v1 .carousel-wrap .item .item-pic {
  height: 33.3333333333rem;
  background-size: cover
}

.menu.show .menu-banner {
  height: 21.3333333333rem;
  padding: 0;
  margin-top: 2.1333333333rem
}

.menu.show .menu-banner .banner-v1 {
  height: 21.3333333333rem !important
}

.menu.show .menu-banner .banner-v1 .carousel-wrap {
  height: 21.3333333333rem
}

.menu.show .menu-banner .banner-v1 .carousel-wrap .item {
  height: 21.3333333333rem;
  padding: 0
}

.menu.show .menu-banner .banner-v1 .carousel-wrap .item .item-pic {
  height: 21.3333333333rem;
  background-size: cover
}

.btn-voucher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  bottom: 6.4rem
}

.btn-voucher .voucher-img {
  position: relative;
  left: 6.6666666667rem;
  width: 9.6rem;
  height: 9.6rem
}

.btn-voucher .voucher-content {
  display: flex;
  padding: 0 2.6666666667rem 0 8rem;
  line-height: 5.3333333333rem;
  max-width: 61.3333333333rem;
  background: var(--btn-voucher-bg);
  border-radius: 13.3333333333rem;
  border: 1px solid var(--btn-voucher-bg-border)
}

.btn-voucher .voucher-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2.6666666667rem;
  color: var(--btn-voucher-txt)
}

.btn-voucher .voucher-value {
  margin-left: 1.0666666667rem;
  font-size: 3.7333333333rem;
  font-weight: 600;
  color: var(--btn-voucher-txt-value)
}

.menu-header {
  display: flex;
  position: relative;
  width: 100%;
  height: 16rem;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  /* background: var(--sidenav-info-bg); */
  box-shadow: inset 0 .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 80%)
}

.menu-header video,
.menu-header img {
  position: absolute;
  z-index: 117;
  bottom: -.2666666667rem;
  left: -2.6666666667rem;
  width: 28rem;
  height: 19.7333333333rem
}

.menu-header .member-name {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  height: 16rem;
  padding-left: 26.6666666667rem;
  font-size: 3.2rem;
  font-weight: 600
}

.menu-header .member-name .account {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32rem;
  margin: 2.1333333333rem 0
}

.menu-header .member-name .account,
.menu-header .member-name span {
  color: var(--sidenav-title-txt)
}

.menu-header .member-name p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  width: 26.6666666667rem;
  color: var(--sidenav-profile-txt);
  font-weight: 400
}

.menu-header .icon-arrow {
  position: absolute;
  right: 4.2666666667rem;
  bottom: 2.1333333333rem;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  transform: rotate(180deg);
  background-color: var(--sidenav-profile-txt);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 60%
}

.menu-header .vip-points {
  display: none;
  width: -moz-fit-content;
  width: fit-content;
  padding: .8rem 2.6666666667rem;
  border-radius: 6.4rem;
  background: var(--sidenav-info-points-bg);
  color: var(--sidenav-info-points-txt);
  font-size: 3.4666666667rem;
  font-weight: 400
}

.menu-header .vip-points span {
  display: inline-block;
  margin-left: 2.6666666667rem;
  color: var(--sidenav-info-points-number);
  font-weight: 500
}

.menu-second {
  position: relative;
  top: 10.6666666667rem;
  left: 2.6666666667rem;
  height: 100%
}

.menu-second ul {
  position: absolute;
  top: 0;
  left: -29.3333333333rem;
  width: 29.3333333333rem;
  height: auto;
  max-height: 170.6666666667rem;
  overflow-y: scroll;
  transition: all .5s;
  opacity: 0;
  box-shadow: inset .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 80%)
}

.menu-second ul.active {
  left: 2.6666666667rem;
  border-radius: 2.6666666667rem;
  opacity: 1;
  background: var(--sidenav-category-bg-active)
}

.menu-second ul li {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 2.6666666667rem 0
}

.menu-second ul li a {
  text-decoration: none
}

.menu-second ul li img {
  display: block;
  width: 55%;
  height: auto;
  max-height: 16rem;
  margin: 0 auto 1.3333333333rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5))
}

.menu-second ul li .icon-all-provider {
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  margin: 0 auto 1.3333333333rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  background-color: var(--icon-all-provider-bg)
}

.menu-second ul li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sidenav-category-txt-active);
  font-size: 3.2rem;
  font-weight: 500;
  text-align: center;
  min-height: 1.1em
}

.menu-second ul li:last-child {
  border: 0
}

.menu-second .icon-sport {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.menu.player .title {
  color: var(--sidenav-shortcut-txt);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 5.3333333333rem
}

.menu.player .shortcut-box li {
  background: none;
  box-shadow: none
}

.menu.player .shortcut-box li:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 36%;
  left: 50%;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sidenav-shortcut-icon-bg)
}

.menu.player .shortcut-box li a {
  color: var(--sidenav-shortcut-icon-txt)
}

.menu.player .shortcut-box li a:before {
  margin: .5333333333rem auto 2.1333333333rem
}

.menu.player .wallet-box li[data-category=deposit] {
  width: 40.5333333333rem;
  padding-left: 4rem;
  padding-right: 4rem;
  align-items: flex-start
}

.menu.player .wallet-box li[data-category=deposit] span {
  margin-left: 0;
  margin-right: 0
}

.menu.player .wallet-box li[data-category=deposit] p {
  text-align: left
}

.menu.player .wallet-box li[data-category=withdrawal] {
  margin: 0 0 2.6666666667rem
}

.skeleton-item__text,
.skeleton-item__icon {
  opacity: .7;
  animation: skeleton-loading 1s linear infinite alternate;
  background-size: 400% 100%;
  background-image: var(--skeleton-item-bg, linear-gradient(to left, #dcdcdc 0%, #e5e5e5 50%, #d8d8d8 100%))
}

.skeleton-item__icon {
  border-radius: var(--skeleton-item-radius, 5px)
}

.skeleton-item__text {
  width: 16rem;
  height: 3.2rem;
  border-radius: var(--skeleton-item-radius, 3px)
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

.menu-first .menu-item .skeleton-item li a span {
  background-size: 400% 100%
}

.tab {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  flex-direction: row;
  width: 100%;
  height: 13.3333333333rem
}

.tab.search-tab {
  background: var(--search-bg)
}

.tab.search-tab ul li {
  background: var(--search-item-bg);
  color: var(--search-item-txt);
  position: relative;
  display: inline-table;
  padding: 0
}

.tab.search-tab ul li label,
.tab.search-tab ul li p {
  display: block;
  width: 100%;
  padding: 0 4.2666666667rem
}

.tab.search-tab ul li.active {
  z-index: 0;
  color: var(--search-item-txt-active);
  font-weight: 500
}

.tab.search-tab ul li.active:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.6666666667rem;
  background: var(--search-item-bg-active)
}

.tab.search-tab .btn {
  background: var(--search-btn)
}

.tab.search-tab .btn span {
  background: var(--search-search-icon-color)
}

.tab.filter-tab {
  background: var(--filter-bg)
}

.tab.filter-tab ul li {
  background: var(--filter-item-bg);
  color: var(--filter-item-txt)
}

.tab.filter-tab ul li.active {
  z-index: 0;
  color: var(--filter-item-txt-active);
  font-weight: 500
}

.tab.filter-tab ul li.active:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.6666666667rem;
  background: var(--filter-item-bg-active)
}

.tab.filter-tab .btn {
  background: var(--filter-btn)
}

.tab.filter-tab .btn span {
  background: var(--transaction-record-filter-icon-color)
}

.tab.search-tab,
.tab.filter-tab {
  width: calc(100% - 4.2666666667rem);
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.tab.search-tab .search-btn,
.tab.search-tab .filter-btn,
.tab.filter-tab .search-btn,
.tab.filter-tab .filter-btn {
  border-radius: 0 1.3333333333rem 1.3333333333rem 0
}

.tab.search-tab ul,
.tab.filter-tab ul {
  line-height: 0;
  text-align: left
}

.tab.search-tab ul li,
.tab.filter-tab ul li {
  border-radius: 1.3333333333rem
}

.tab.search-tab ul li.active:after,
.tab.filter-tab ul li.active:after {
  border-radius: 1.3333333333rem
}

.tab.search-tab .btn span,
.tab.filter-tab .btn span {
  display: block;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 40%
}

.tab.active {
  position: fixed;
  top: 13.3333333333rem
}

.tab ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 0 2.1333333333rem;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 13.3333333333rem;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch
}

.tab ul li {
  display: inline-block;
  position: relative;
  margin-right: 1.0666666667rem;
  padding: 0 4.2666666667rem;
  border-radius: 2.6666666667rem;
  font-size: 3.4666666667rem;
  line-height: 8rem;
  vertical-align: middle;
  text-align: center
}

.tab .btn {
  display: block;
  width: 13.3333333333rem;
  height: 100%;
  padding: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%
}

.sort-bar {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-height: 9.6rem;
  margin: 0 2.1333333333rem 2.1333333333rem;
  z-index: 1
}

.sort-bar__title {
  color: var(--game-filter-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  letter-spacing: .2666666667rem;
  vertical-align: middle
}

.sort-bar__title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 3.2rem;
  border-radius: .5333333333rem;
  background-color: var(--game-filter-border);
  vertical-align: middle
}

.sort-bar__title span {
  display: inline-block;
  vertical-align: middle
}

.sort-bar__box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 3.2rem;
  color: var(--game-filter-dropdown-txt)
}

.sort-bar__box.show .sort-bar__select {
  height: -moz-fit-content;
  height: fit-content;
  max-height: 300px;
  opacity: 1
}

.sort-bar__box.show .arrow {
  transform: rotate(180deg);
  transform-origin: center
}

.sort-bar__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  background-color: var(--game-filter-dropdown-toggle-bg)
}

.sort-bar__select {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-height: 0;
  border-radius: 1.3333333333rem;
  overflow: hidden;
  transition: max-height .3s, opacity .5s;
  opacity: 0;
  background-color: var(--game-filter-dropdown-item-bg)
}

.sort-bar__select__item {
  display: block;
  width: 100%;
  margin: 0 2.1333333333rem;
  transition: all .3s
}

.sort-bar__select__item span {
  display: block;
  padding: 2.1333333333rem 0;
  margin: 0 2.1333333333rem
}

.sort-bar__select__item:first-child {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.sort-bar__select__item:last-child {
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.sort-bar__select__item:last-child span {
  border: none
}

.sort-bar__select__item.active {
  background: var(--game-filter-dropdown-item-bg-active)
}

.sort-bar__select__item.active span {
  color: var(--game-filter-dropdown-item-txt-active)
}

.sort-bar .arrow {
  display: inline-block;
  vertical-align: middle;
  width: 3.2rem;
  height: 3.2rem;
  background-color: var(--game-filter-dropdown-arrow-icon);
  mask-size: 90%;
  mask-repeat: no-repeat;
  mask-position: center 65%;
  -webkit-mask-size: 90%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center 65%;
  margin-left: 1.3333333333rem;
  transition: all .5s
}

.tab-btn-page.tab-nav-icon {
  position: relative !important;
  padding: 4rem 3.2rem;
  height: auto;
  align-items: flex-start;
  background: var(--tab-icon-section-tab-bg, var(--quick-register-entry-btn-wrap-bg));
  box-shadow: inset 0 -.2666666667rem .5333333333rem var(--tab-icon-section-tab-shadow-inset, transparent)
}

.tab-btn-page.tab-nav-icon .btn {
  flex-direction: column;
  padding: 0
}

.tab-btn-page.tab-nav-icon .btn+.btn {
  margin-left: 1.3333333333rem
}

.tab-btn-page.tab-nav-icon .btn .text {
  padding-top: 2.6666666667rem;
  width: 90%;
  color: var(--tab-icon-section-btn-txt, var(--quick-register-entry-btn-txt));
  font-size: 3.2rem;
  opacity: 1
}

.tab-btn-page.tab-nav-icon .btn.active .btn-icon-wrap,
.tab-btn-page.tab-nav-icon .btn[data-tab-current=current] .btn-icon-wrap {
  background: var(--tab-icon-section-btn-bg-active, var(--quick-register-entry-btn-active-bg));
  box-shadow: inset 0 0 .8rem 0 var(--tab-icon-section-btn-shadow-inset-active, var(--quick-register-entry-btn-active-shadow));
  border: 1px solid var(--tab-icon-section-btn-border-active, var(--quick-register-entry-btn-border))
}

.tab-btn-page.tab-nav-icon .btn.active .tab-btn-icon,
.tab-btn-page.tab-nav-icon .btn[data-tab-current=current] .tab-btn-icon {
  background: var(--tab-icon-section-btn-icon-active, var(--quick-register-entry-btn-icon-active))
}

.tab-btn-page.tab-nav-icon .btn.active .text,
.tab-btn-page.tab-nav-icon .btn[data-tab-current=current] .text {
  color: var(--tab-icon-section-btn-txt-active, var(--quick-register-entry-btn-txt))
}

.tab-btn-page.tab-nav-icon .btn-icon-wrap {
  width: 100%;
  padding: 4rem 0;
  border-radius: 1.3333333333rem;
  border: 1px solid var(--tab-icon-section-btn-border, var(--quick-register-entry-btn-border));
  background: var(--tab-icon-section-btn-bg, var(--quick-register-entry-btn-bg));
  box-shadow: inset 0 .2666666667rem .2666666667rem 0 var(--tab-icon-section-btn-shadow-inset, var(--third-party-border-default))
}

.tab-btn-page.tab-nav-icon .tab-btn-icon {
  width: 8rem;
  height: 8rem;
  margin: auto;
  mask: center/100% no-repeat;
  -webkit-mask: center/100% no-repeat;
  background: var(--tab-icon-section-btn-icon-bg, var(--quick-register-entry-btn-icon))
}

.input-group {
  display: flex;
  justify-content: center;
  position: relative;
  flex-direction: column;
  padding-bottom: 3.2rem;
  font-size: 3.2rem;
  line-height: 1.5
}

.input-group .input-wrap+.input-wrap {
  margin-top: 2.6666666667rem
}

.input-group label {
  position: relative;
  height: 6.4rem;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 3.7333333333rem
}

.input-group input,
.input-group textarea {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333rem;
  padding: 0 10.6666666667rem 0 4.2666666667rem;
  transition: background .3s;
  border: .2666666667rem solid var(--form-input-border);
  border-radius: 2.6666666667rem;
  background: var(--form-input-bg);
  color: var(--form-input-txt);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.8rem
}

.input-group input::placeholder,
.input-group textarea::placeholder {
  color: var(--form-input-txt-placeholder)
}

.input-group input:focus,
.input-group textarea:focus {
  padding: 0 11.7333333333rem 0 4.2666666667rem;
  border: .2666666667rem solid var(--form-input-border-focus)
}

.input-group input:disabled,
.input-group textarea:disabled {
  border: .2666666667rem solid var(--form-input-border-disabled);
  background: var(--form-input-bg-disabled);
  color: var(--form-input-txt-disabled)
}

.input-group input.active+.delete-btn,
.input-group textarea.active+.delete-btn {
  background: var(--color-danger)
}

.input-group textarea,
.input-group textarea:focus {
  padding: 2.1333333333rem 4.2666666667rem
}

.input-group .clear {
  position: absolute;
  top: 6.4rem;
  right: 0;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  padding: 0;
  opacity: 0;
  background: var(--form-clear-icon-color);
  color: transparent;
  mask: var(--form-clear-icon) no-repeat center/30%;
  -webkit-mask: var(--form-clear-icon) no-repeat center/30%
}

.input-group .clear.active {
  opacity: 1
}

.input-group .eyes {
  position: absolute;
  z-index: 1;
  top: 6.4rem;
  right: 0;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  transform: none;
  background: var(--form-eyes-icon-color);
  /* mask: var(--form-eyes-close-icon) no-repeat center/50%;
  -webkit-mask: var(--form-eyes-close-icon) no-repeat center/50% */
}

.input-group .eyes.active {
  /* mask: var(--form-eyes-open-icon) no-repeat center/50%;
  -webkit-mask: var(--form-eyes-open-icon) no-repeat center/50% */
}

.input-group .refresh {
  position: absolute;
  top: 6.4rem;
  right: 0;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  border-radius: .8rem;
  background-color: var(--form-refresh-icon-color);
  mask: var(--form-refresh-icon) no-repeat center/40%;
  -webkit-mask: var(--form-refresh-icon) no-repeat center/40%
}

.input-group .refresh.active {
  animation: rotate 1s forwards
}

.input-group.error select,
.input-group.error input {
  border: 1px solid var(--color-danger)
}

.input-group .member-error {
  width: 100%;
  margin: .8rem 0 0;
  padding: 1.3333333333rem 0
}

.input-group .member-error span {
  color: #ff5959
}

.input-group .member-error:before {
  content: "!";
  display: inline-block;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: 50%;
  background-color: var(--color-danger);
  color: var(--third-party-bg-default);
  font-size: 3.7333333333rem;
  font-weight: 700;
  line-height: 4.2666666667rem;
  text-align: center;
  vertical-align: text-top
}

.input-group.password .clear {
  right: 10.6666666667rem
}

.input-group.password .clear.hasbutton {
  right: 29.3333333333rem
}

.input-group.money label {
  position: absolute;
  z-index: 2;
  top: unset;
  left: 4.2666666667rem;
  margin-top: 0
}

.input-group.money input {
  text-align: right
}

.input-group.money .clear {
  top: 0
}

.input-group.upload-file .input-wrap:before {
  content: "";
  display: flex;
  position: absolute;
  z-index: 1;
  inset: 0;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2.6666666667rem;
  border-radius: 2.1333333333rem;
  background: var(--form-input-bg);
  pointer-events: none
}

.input-group.upload-file input {
  opacity: 0
}

.input-group.date input:focus {
  padding: 0 4.2666666667rem
}

.input-group .info {
  margin-top: 2.1333333333rem
}

.input-group .info:before {
  content: "$";
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  margin-right: 1.3333333333rem;
  transform: translateY(-50%);
  border-radius: 5.3333333333rem;
  background-color: var(--wallet-amount-info-icon);
  color: var(--wallet-amount-info-icon-txt);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 4.2666666667rem;
  text-align: center;
  vertical-align: middle
}

.input-group .info span {
  display: inline-block;
  width: calc(100% - 5.6rem);
  margin-left: 5.6rem
}

.input-group .info span .highlight {
  display: inline-block;
  color: var(--wallet-amount-info-txt);
  font-weight: 700
}

.input-group input:-webkit-autofill:not(.clear),
.input-group input:-webkit-autofill:hover:not(.clear),
.input-group input:-webkit-autofill:focus:not(.clear),
.input-group select:-webkit-autofill,
.input-group select:-webkit-autofill:hover,
.input-group select:-webkit-autofill:focus,
.input-group textarea:-webkit-autofill,
.input-group textarea:-webkit-autofill:hover,
.input-group textarea:-webkit-autofill:focus {
  background-image: none;
  box-shadow: 0 0 0 50px var(--form-input-bg) inset !important;
  -webkit-text-fill-color: var(--form-input-txt) !important;
  text-fill-color: var(--form-input-txt) !important
}

.input-wrap {
  position: relative
}

.input-wrap .status {
  position: absolute;
  top: 50%;
  right: 0;
  flex-flow: row nowrap;
  padding: 0 4.2666666667rem;
  transform: translateY(-50%);
  color: var(--color-success);
  font-size: 3.2rem;
  text-decoration: none
}

.input-wrap .status:before {
  content: "";
  display: inline-block;
  position: relative;
  top: .5333333333rem;
  width: 3.4666666667rem;
  height: 3.4666666667rem;
  margin-right: 1.3333333333rem;
  background-color: var(--color-success);
  mask: url(/assets/images/icon-set/icon-check-type07.svg) no-repeat 50% 50%/contain;
  -webkit-mask: url(/assets/images/icon-set/icon-check-type07.svg) no-repeat 50% 50%/contain
}

.input-wrap .status.textarea-wrap textarea {
  padding: 10px 30px 10px 10px
}

.input-wrap .unconfirm-btn {
  color: var(--color-warning);
  text-decoration: underline
}

.input-wrap .unconfirm-btn:before {
  content: "";
  display: inline-block;
  width: 3.4666666667rem;
  height: 3.4666666667rem;
  margin-right: 1.3333333333rem;
  background-color: var(--color-warning);
  mask: url(/assets/images/icon-set/icon-unconfirm.svg) no-repeat 100% 100%/contain;
  -webkit-mask: url(/assets/images/icon-set/icon-unconfirm.svg) no-repeat 100% 100%/contain
}

.input-wrap .get-vcode-btn span {
  padding: .5333333333rem 1.6rem;
  border-radius: 8rem;
  background: var(--pop-getvcode-btn);
  color: var(--pop-getvcode-btn-txt)
}

.input-wrap .get-vcode-btn.active {
  display: flex;
  background: transparent;
  color: var(--pop-getvcode-countdown-txt);
  pointer-events: none
}

.input-wrap .verify-code-prefix__text {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 11.7333333333rem;
  padding: 0 2.6666666667rem;
  font-size: 4.8rem;
  line-height: normal;
  color: var(--form-input-txt)
}

.input-wrap .verify-code-prefix__input,
.input-wrap .verify-code-prefix__input:focus {
  padding: 0 0 0 19.7333333333rem
}

.input-wrap .otp-resend-btn {
  display: none;
  position: absolute;
  top: 3.7333333333rem;
  right: 2.6666666667rem;
  color: var(--pop-getvcode-resend-txt);
  font-size: 3.2rem;
  max-width: 50%;
  text-align: right;
  line-height: 1.2;
  text-decoration: underline
}

.input-wrap .otp-resend-btn.active {
  display: block
}

.error-message {
  display: flex;
  flex-grow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2.1333333333rem;
  color: var(--color-danger);
  font-size: 3.2rem;
  text-align: left
}

.error-message:before {
  content: "!";
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: 50%;
  background-color: var(--color-danger);
  color: var(--form-box-bg);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.2666666667rem;
  text-align: center
}

.error-message span {
  display: inline-block;
  width: 90%;
  line-height: 1.2
}

.input-group-wrapper .error-message {
  margin-top: 0;
  margin-bottom: 2.1333333333rem
}

.delete-btn {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  transition: all .3s;
  background: var(--form-clear-icon-color);
  mask: var(--form-clear-icon) no-repeat center/30%;
  -webkit-mask: var(--form-clear-icon) no-repeat center/30%
}

.verification input {
  padding-right: 34.1333333333rem
}

.verification-code {
  display: flex;
  position: absolute;
  top: 8.8rem;
  right: 12rem;
  justify-content: flex-end;
  height: 6.6666666667rem
}

.verification-code img {
  height: 100%
}

.checkbox-agree label,
.pop-checkbox-agree label {
  display: flex;
  position: relative;
  padding: 0 2.1333333333rem;
  transition: .3s;
  color: var(--form-uncheck-color);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.5
}

.checkbox-agree label:before,
.pop-checkbox-agree label:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  transition: .3s;
  border-radius: .8rem;
  background: var(--form-uncheck-color)
}

.checkbox-agree label span,
.pop-checkbox-agree label span {
  padding: 0 0 0 5.3333333333rem
}

.checkbox-agree input,
.pop-checkbox-agree input {
  display: none
}

.checkbox-agree input:checked+label,
.pop-checkbox-agree input:checked+label {
  color: var(--color-success)
}

.checkbox-agree input:checked+label i,
.pop-checkbox-agree input:checked+label i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  transition: .3s;
  border-radius: .8rem;
  background: var(--color-success);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.checkbox-agree input:checked+i,
.pop-checkbox-agree input:checked+i {
  background: var(--color-success)
}

.checkbox-agree input:checked+label:before,
.pop-checkbox-agree input:checked+label:before {
  background: none
}

.check-group {
  display: flex;
  flex-direction: column;
  padding-bottom: 4.2666666667rem;
  font-size: 3.2rem;
  line-height: 1.5
}

.check-group label {
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4rem
}

.check-group ul {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100;
  width: 100%
}

.check-group ul.col2 {
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(auto-fill, calc((100% - 2.1333333333rem) / 2))
}

.check-group ul.col3 {
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(auto-fill, calc((100% - 4.2666666667rem) / 3))
}

.check-group ul.col4 {
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(auto-fill, calc((100% - 6.4rem)/4))
}

.check-group ul.col5 {
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(auto-fill, calc((100% - 8.5333333333rem) / 5))
}

.check-group [type=checkbox],
.check-group [type=radio] {
  display: none
}

.check-group [type=checkbox]+label,
.check-group [type=radio]+label {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2.1333333333rem;
  transition: .3s;
  border-radius: 2.6666666667rem;
  line-height: 9.3333333333rem;
  background: var(--radio-bg);
  color: var(--radio-txt);
  font-size: 3.2rem;
  text-align: center
}

.check-group [type=checkbox]+label span,
.check-group [type=radio]+label span {
  z-index: 3;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.check-group [type=checkbox]:checked+label,
.check-group [type=radio]:checked+label {
  z-index: 2;
  background: var(--radio-border-checked);
  color: var(--radio-txt-checked)
}

.check-group [type=checkbox]:checked+label:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: .2666666667rem;
  left: .2666666667rem;
  width: calc(100% - .5333333333rem);
  height: calc(100% - .5333333333rem);
  border-radius: 2.5333333333rem;
  background: var(--checkbox-bg-checked)
}

.check-group [type=checkbox]:checked+label i {
  position: absolute;
  z-index: 2;
  right: -.2666666667rem;
  bottom: -.2666666667rem;
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  border-bottom-right-radius: 2.1333333333rem;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center
}

.check-group [type=radio]:checked+label {
  background: var(--radio-border-checked)
}

.check-group [type=radio]:checked+label:after {
  content: "";
  position: absolute;
  z-index: 0;
  top: .2666666667rem;
  left: .2666666667rem;
  width: calc(100% - .5333333333rem);
  height: calc(100% - .5333333333rem);
  border-radius: 2.5333333333rem;
  background: var(--radio-bg-checked)
}

.check-group.checkbox-icon-style [type=checkbox]+label,
.check-group.checkbox-icon-style [type=radio]+label {
  display: inline-flex;
  flex-direction: row;
  width: 100%
}

.check-group.checkbox-icon-style [type=checkbox]+label .payment-img,
.check-group.checkbox-icon-style [type=radio]+label .payment-img {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 5.3333333333rem;
  height: 100%;
  margin: 0 2.1333333333rem 0 0
}

.check-group.checkbox-icon-style [type=checkbox]+label .payment-img img,
.check-group.checkbox-icon-style [type=radio]+label .payment-img img {
  width: 100%;
  margin: auto
}

.check-group.checkbox-icon-style [type=checkbox]+label span,
.check-group.checkbox-icon-style [type=radio]+label span {
  width: auto
}

.check-group.style-add-amount input[type=checkbox]+label span:before,
.check-group.style-add-amount input[type=radio]+label span:before {
  content: "+";
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  transition: width .7s
}

.check-group.style-add-amount.active input[type=checkbox]+label span:before,
.check-group.style-add-amount.active input[type=radio]+label span:before {
  width: 10px;
  height: 10px;
  overflow: visible
}

.check-group.style-add-amount.active input[type=checkbox]+label.ani,
.check-group.style-add-amount.active input[type=radio]+label.ani {
  animation: moneyBtn-Animation .5s ease-in-out 1
}

@keyframes moneyBtn-Animation {
  0% {
    filter: drop-shadow(0 0 0 color-mix(in srgb, var(--pop-transfer-amount-fade), transparent 0%))
  }

  to {
    filter: drop-shadow(0 -20px 0 color-mix(in srgb, var(--pop-transfer-amount-fade), transparent 100%))
  }
}

.check-group+.check-group {
  padding-top: 2.6666666667rem;
  border-top: .2666666667rem dashed var(--color-player-form-border)
}

.check-group.type li label {
  min-height: 10.6666666667rem;
  padding: 1.6rem 5.3333333333rem !important
}

.check-group.type li label span {
  z-index: 3;
  width: 90%;
  font-style: italic;
  line-height: 1 !important
}

.check-group.type li label p {
  z-index: 3;
  width: 90%;
  margin-top: .5333333333rem;
  overflow: hidden;
  color: var(--color-text);
  font-size: 2.6666666667rem;
  font-style: italic;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap
}

.check-group.type li label img {
  display: inline-block;
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0;
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  transform: translateY(-50%)
}

.check-group.type li label .instant {
  animation: fly 1.8s linear infinite
}

.check-group.type li label .super-fast {
  animation: fly .8s linear infinite
}

.check-group.type li label .express {
  animation: fly .15s linear infinite
}

@keyframes fly {
  0% {
    transform: translate(-50%, -50%) translate(0)
  }

  50% {
    transform: translate(-50%, -50%) translate(-3px, 3px)
  }

  to {
    transform: translate(-50%, -50%) translate(0)
  }
}

.check-group-hint {
  font-size: 3.2rem;
  color: #ffffff80
}

.overflow {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: bg-gradient 2s ease alternate infinite;
  border-radius: 2.5333333333rem;
  background: transparent
}

.overflow:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: .2666666667rem;
  left: .2666666667rem;
  width: calc(100% - .5333333333rem);
  height: calc(100% - .5333333333rem);
  border-radius: 2.2666666667rem;
  background: var(--radio-bg)
}

.overflow .slow {
  position: absolute;
  z-index: 3;
  top: 20%;
  left: 100%;
  width: 3.2rem;
  height: .5333333333rem;
  animation: shoot-slow 1.5s infinite linear;
  opacity: .3;
  background: var(--primary)
}

.overflow .slow:before {
  content: "";
  position: absolute;
  top: 2.6666666667rem;
  right: -2.6666666667rem;
  width: 2.6666666667rem;
  height: .5333333333rem;
  background: var(--primary)
}

.overflow .slow:after {
  content: "";
  position: absolute;
  top: 3.2rem;
  right: 16rem;
  width: 2.6666666667rem;
  height: .5333333333rem;
  background: var(--primary)
}

.overflow .medium {
  position: absolute;
  top: 80%;
  left: 100%;
  width: 4rem;
  height: .5333333333rem;
  animation: shoot-medium 1s linear infinite;
  opacity: .3;
  background: var(--primary)
}

.overflow .medium:before {
  content: "";
  position: absolute;
  top: -2.6666666667rem;
  right: 10.6666666667rem;
  width: 4rem;
  height: .5333333333rem;
  background: var(--primary)
}

.overflow .medium:after {
  content: "";
  position: absolute;
  top: 0;
  right: 16rem;
  width: 4rem;
  height: .5333333333rem;
  background: var(--primary)
}

.overflow .fast {
  position: absolute;
  top: 20%;
  left: 100%;
  width: 4.8rem;
  height: .5333333333rem;
  animation: shoot-fast .8s linear infinite;
  opacity: .3;
  background: var(--primary)
}

.overflow .fast:before {
  content: "";
  position: absolute;
  top: 2.6666666667rem;
  right: -2.6666666667rem;
  width: 4.8rem;
  height: .5333333333rem;
  background: var(--primary)
}

.overflow .fast:after {
  content: "";
  position: absolute;
  top: 3.2rem;
  right: 16rem;
  width: 4.8rem;
  height: .5333333333rem;
  background: var(--primary)
}

.super-fast .overflow {
  background: var(--wallet-super-fast-bg);
  background-size: 300% 300%
}

.express .overflow {
  background: var(--wallet-express-bg);
  background-size: 300% 300%
}

@keyframes bg-gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  to {
    background-position: 0% 50%
  }
}

@keyframes shoot-slow {
  0% {
    margin-left: 0
  }

  to {
    margin-left: -120%
  }
}

@keyframes shoot-medium {
  0% {
    margin-left: 0
  }

  to {
    margin-left: -120%
  }
}

@keyframes shoot-fast {
  0% {
    margin-left: 0
  }

  to {
    margin-left: -120%
  }
}

.checkbox-only-txt [type=checkbox]+label,
.checkbox-only-txt [type=radio]+label,
.style-add-amount [type=checkbox]+label,
.style-add-amount [type=radio]+label {
  line-height: 9.3333333333rem
}

.payment-img {
  z-index: 2;
  margin: 2.1333333333rem 0 .8rem
}

.payment-img img {
  display: block;
  width: auto;
  height: 6.4rem
}

.select-group {
  display: flex;
  position: relative;
  flex-direction: column;
  padding-bottom: 3.2rem;
  font-size: 3.2rem;
  line-height: 1.5
}

.select-group label {
  display: block;
  position: relative;
  height: 6.4rem;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 3.7333333333rem
}

.select-group select {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333rem;
  padding: 0 11.7333333333rem 0 4.2666666667rem;
  transition: background .3s;
  border: 0;
  border-radius: 2.6666666667rem;
  background: var(--form-input-bg);
  color: var(--form-input-txt);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.8rem
}

.select-group:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 11.7333333333rem;
  right: 4.2666666667rem;
  border-width: 1.0666666667rem;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent
}

.select-group .error-message {
  margin: 2.1333333333rem 0 0;
  padding: 0
}

.select-group ul {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100;
  width: 100%
}

.select-group ul.col2 {
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, calc((100% - 10px)/2))
}

.select-group ul.col3 {
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3))
}

.select-group ul.col4 {
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, calc((100% - 30px)/4))
}

.select-group ul.col5 {
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, calc((100% - 40px)/5))
}

.select-group li {
  display: inline-block;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap
}

.select-group [type=checkbox],
.select-group [type=radio] {
  display: none
}

.select-group [type=checkbox]+label,
.select-group [type=radio]+label {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  padding: 0 2.6666666667rem;
  border-radius: .8rem;
  background-color: var(--form-box-bg);
  color: var(--form-txt);
  font-size: 3.2rem;
  line-height: 9.3333333333rem;
  text-align: center
}

.select-group [type=checkbox]+label span,
.select-group [type=radio]+label span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.select-group [type=checkbox]:checked+label,
.select-group [type=radio]:checked+label {
  border: .2666666667rem solid var(--radio-border-checked);
  background-color: var(--radio-bg-checked);
  color: var(--radio-txt)
}

.style-bank {
  position: relative;
  padding: 2.6666666667rem 0
}

.style-bank:after {
  display: none
}

.style-bank ul {
  grid-template-columns: none
}

.style-bank li {
  overflow: hidden
}

.style-bank li input[type=checkbox]+label,
.style-bank li input[type=radio]+label {
  height: auto;
  padding: 0;
  transition: all .3s;
  border: .4rem solid transparent;
  border-radius: 2.6666666667rem;
  background: var(--wallet-bankcard-bg)
}

.style-bank li input[type=checkbox].active+label,
.style-bank li input[type=radio].active+label {
  border: .4rem solid var(--wallet-bankcard-bg-checked-border);
  background: var(--wallet-bankcard-bg-checked-bg)
}

.style-bank li input[type=checkbox].active+label i,
.style-bank li input[type=radio].active+label i {
  position: absolute;
  z-index: 2;
  right: -.2666666667rem;
  bottom: -.2666666667rem;
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  border-bottom-right-radius: 1.0666666667rem;
  background-repeat: no-repeat;
  background-position: center
}

.style-bank li .bg-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover
}

.frost-mask {
  display: flex;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: .2666666667rem solid color-mix(in srgb, var(--content-bg), transparent 80%);
  border-radius: 2.1333333333rem;
  opacity: 0
}

.frost-mask .frost-bg {
  opacity: 0
}

.frost-card .frost-bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.1333333333rem;
  opacity: 1
}

.frost-card .frost-bg img {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: frost 2s ease both
}

.frost-card .frost-bg img:nth-child(2) {
  animation-delay: 2s
}

.frost-card .frost-bg img:nth-child(3) {
  animation-delay: 3s
}

.frost-card .frost-mask {
  animation: frost 2s ease both;
  opacity: 1;
  background: var(--bank-card-frost-mask);
  font-weight: 600;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px)
}

.frost-card .frost-mask .frost-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.3333333333rem 3.2rem
}

.frost-card .frost-mask .frost-tag .text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bank-card-frost-txt);
  font-size: 3.2rem;
  line-height: 1.2;
  white-space: break-spaces;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}

.frost-card .frost-mask .frost-tag .frost-icon {
  margin: 0 2.1333333333rem 0 0
}

.frost-card .frost-mask .frost-tag .lock {
  position: relative;
  width: 3.7333333333rem;
  height: 2.6666666667rem;
  margin-top: 1.6rem;
  border-radius: .5333333333rem;
  background-color: var(--bank-card-frost-icon)
}

.frost-card .frost-mask .frost-tag .lock:before {
  content: "";
  position: absolute;
  top: -1.6rem;
  left: .5333333333rem;
  width: 1.6rem;
  height: 1.6rem;
  border-top: .5333333333rem solid var(--bank-card-frost-icon);
  border-right: .5333333333rem solid var(--bank-card-frost-icon);
  border-left: .5333333333rem solid var(--bank-card-frost-icon);
  border-radius: 2.6666666667rem 2.6666666667rem 0 0
}

.frost-card .frost-mask .frost-btn {
  display: inline-flex;
  justify-content: center;
  margin-top: 2.1333333333rem
}

.frost-card .frost-mask .frost-btn .btn {
  height: 8.5333333333rem;
  margin: 0 1.0666666667rem;
  padding: 0 2.6666666667rem;
  border-radius: 2.1333333333rem;
  font-size: 3.2rem;
  line-height: 8.5333333333rem
}

.frost-card .frost-mask .frost-btn .btn.add-card {
  box-sizing: border-box;
  border: .4rem solid var(--bank-card-frost-btn);
  color: var(--bank-card-frost-btn)
}

.frost-card .frost-mask .frost-btn .btn.contact-cs {
  background: var(--bank-card-frost-btn);
  color: var(--bank-card-frost-btn-txt)
}

@keyframes frost {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.select-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 2.6666666667rem 2.6666666667rem 2.6666666667rem 4.2666666667rem;
  overflow: hidden;
  border-radius: 2.1333333333rem;
  box-shadow: 0 .5333333333rem .8rem var(--slick-slide-shadow);
  font-size: 3.2rem
}

.select-card .select-card-inner {
  color: var(--wallet-select-bank-card-txt);
  text-align: left
}

.select-card .select-card-inner .unit-name {
  display: inline-flex;
  width: inherit;
  font-size: 4.2666666667rem;
  line-height: 1.3;
  white-space: break-spaces
}

.select-card .select-card-inner .username {
  padding: 1.3333333333rem 0;
  opacity: .7;
  font-size: 3.2rem;
  line-height: 1.3
}

.select-card .select-card-inner .username img,
.select-card .select-card-inner .username span {
  display: inline;
  height: 3.2rem;
  margin-right: 1.3333333333rem;
  font-size: 3.2rem;
  vertical-align: middle
}

.select-card .select-card-inner .username img {
  transform: translateY(-1px)
}

.select-card .select-card-inner .cardnumber {
  font-size: 4.2666666667rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left
}

.select-card .select-card-inner .cardnumber span {
  word-break: break-all;
  white-space: normal
}

.file-box {
  display: flex;
  position: absolute;
  z-index: 2;
  inset: 0;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 2.1333333333rem;
  color: var(--color-title);
  pointer-events: none
}

.file-name {
  flex: 3;
  padding: 0 2.6666666667rem;
  pointer-events: inherit
}

.file-name.tip {
  color: var(--form-input-txt-placeholder);
  font-size: 3.2rem;
  font-weight: 400
}

.upload-btn {
  display: flex;
  flex: 1;
  flex-basis: 8rem;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--form-upload-file-bg);
  pointer-events: none
}

.upload-btn img {
  display: block;
  height: 35%
}

.upload-group {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 0;
  margin-top: 1.8666666667rem;
  overflow: hidden;
  transition: .3s;
  border: 0;
  text-align: center
}

.upload-group.active {
  height: 40rem;
  border: 1px dashed var(--color-player-form-upload)
}

.upload-group.active .delete-btn {
  display: block
}

.upload-group.active>img {
  height: auto;
  max-height: 100%
}

.upload-group>img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: 0;
  transition: .3s
}

.area-pic {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border: 0;
  text-align: center;
  pointer-events: none
}

.area-pic img {
  max-width: 100%;
  max-height: 100%
}

.area-mask {
  display: flex;
  position: absolute;
  z-index: 3;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.0666666667rem;
  background: var(--form-upload-mask-bg)
}

.area-mask .m-icon {
  width: 7.4666666667rem;
  height: 7.4666666667rem;
  margin: 2.6666666667rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  box-shadow: 0 0 1.0666666667rem var(--upload-icon-shadow)
}

.area-mask .m-text {
  font-size: 3.7333333333rem;
  text-shadow: 0 0 4px var(--upload-icon-shadow)
}

.area-mask .m-btn {
  margin-top: 1.8666666667rem;
  padding: 1.3333333333rem 4.5333333333rem;
  border-radius: 1.0666666667rem;
  background: var(--form-upload-retry-btn-bg);
  color: var(--form-upload-retry-btn-txt);
  font-size: 3.2rem
}

.area-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}

.area-inner input {
  position: absolute;
  z-index: 1;
  inset: 0;
  height: 100%;
  opacity: 0
}

.u-icon {
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  background: var(--form-upload-camera-icon-color);
  mask: var(--form-upload-camera-icon) no-repeat center/100%;
  -webkit-mask: var(--form-upload-camera-icon) no-repeat center/100%
}

.u-text {
  color: var(--form-upload-txt);
  font-size: 3.7333333333rem
}

.upload-wrap .upload-group {
  flex-direction: column;
  height: 35.2rem;
  border: 1px dashed var(--form-upload-border);
  border-radius: 2.6666666667rem;
  background: var(--form-upload-bg)
}

.upload-wrap .upload-group.active {
  height: 35.2rem
}

.upload-wrap .pending .m-icon {
  background-color: var(--color-info)
}

.upload-wrap .pending .m-text {
  color: var(--color-info)
}

.upload-wrap .failed .area-mask {
  pointer-events: none
}

.upload-wrap .failed .m-icon {
  background-color: var(--color-danger)
}

.upload-wrap .failed .m-text {
  color: var(--color-danger)
}

.upload-wrap .failed .delete-btn {
  display: block
}

.upload-wrap .success .m-icon {
  background-color: var(--color-success)
}

.upload-wrap .success .m-text {
  color: var(--color-success)
}

.area-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 2.1333333333rem 0;
  background-color: var(--form-box-bg);
  font-size: 3.2rem;
  line-height: 2
}

.area-group .item {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%
}

.area-group h3 {
  flex: 1;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap
}

.area-group .tip {
  display: flex;
  justify-content: flex-end;
  color: var(--profile-txt);
  font-size: 2.6666666667rem
}

.area-group .text {
  color: var(--profile-name);
  word-break: break-all
}

.qrcode {
  position: absolute;
  z-index: 131;
  top: -6.4rem;
  right: 0;
  width: 12rem;
  margin-right: 2.6666666667rem;
  transform: translateY(-50%)
}

.qrcode img {
  width: 100%
}

.tag-recommond {
  position: absolute;
  z-index: 1;
  top: 1.3333333333rem;
  left: -1.0666666667rem;
  width: 5.3333333333rem;
  height: 4rem;
  border-top-left-radius: .5333333333rem;
  border-top-right-radius: .8rem;
  border-bottom-right-radius: .8rem;
  background-color: var(--wallet-recommond-tag-bg)
}

.tag-recommond span {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--wallet-recommond-tag-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 55%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 55%
}

.tag-recommond:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0 4px 4px 0;
  border-style: solid;
  border-color: transparent var(--form-tag-recommand-border) transparent transparent
}

.pop-get-vcode,
.pop-confirm-password {
  position: fixed;
  z-index: 9000;
  bottom: -100%;
  width: 100%;
  max-height: 95vh;
  padding-top: 6.4rem;
  transform: translate(0);
  transition: bottom .3s;
  border-radius: 5.3333333333rem 5.3333333333rem 0 0;
  background: var(--pop-bg-content)
}

.pop-get-vcode.active,
.pop-confirm-password.active {
  bottom: 0
}

.pop-get-vcode .btn-closed,
.pop-confirm-password .btn-closed {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 12rem;
  height: 12rem;
  background: var(--pop-close-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%
}

.pop-get-vcode .menu-box,
.pop-confirm-password .menu-box {
  background: var(--form-box-bg)
}

.pop-get-vcode .menu-box .status,
.pop-confirm-password .menu-box .status {
  top: 5.8666666667rem
}

.pop-get-vcode .phone-code-list,
.pop-confirm-password .phone-code-list {
  max-height: 28.5333333333rem
}

.pop-get-vcode .input-group label,
.pop-confirm-password .input-group label {
  height: auto;
  white-space: normal;
  margin-bottom: 1.0666666667rem
}

.acc-copy {
  background: var(--wallet-account-info-copy-icon-color);
  cursor: pointer;
  height: 5.3333333333rem;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 80%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 80%;
  position: relative;
  width: 5.3333333333rem
}

.icon-copy {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  padding: 1.3333333333rem 2.6666666667rem;
  transform: translateY(-100%);
  border-radius: .8rem;
  opacity: 0;
  background: var(--wallet-account-info-copy-tooltips-bg);
  box-shadow: 0 0 .5333333333rem var(--wallet-account-info-copy-tooltips-txt-shadow);
  color: var(--wallet-account-info-copy-tooltips-txt);
  font-size: 3.2rem;
  line-height: 1.5
}

.icon-copy:before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: -5px;
  width: 0;
  height: 0;
  border-width: 6px 3px 0;
  border-style: solid;
  border-color: var(--wallet-account-info-copy-tooltips-bg) transparent transparent
}

.icon-copy.show {
  display: block;
  animation: icon-copy-show .3s linear forwards
}

.icon-copy.hide {
  display: block;
  animation: icon-copy-hide .2s linear forwards
}

.pop-get-vcode {
  z-index: 2147483999
}

.resend-btn {
  display: none;
  margin-bottom: -15px;
  text-align: end
}

.resend-btn span {
  padding: 1.8666666667rem;
  color: var(--pop-getvcode-resend-txt);
  font-size: 2.6666666667rem;
  text-decoration: underline
}

.resend-btn.show {
  display: inline-block
}

.resend-btn.enable {
  opacity: 1;
  pointer-events: auto
}

@keyframes icon-copy-show {
  0% {
    top: -8rem;
    opacity: 0
  }

  to {
    top: -1.3333333333rem;
    opacity: 1
  }
}

@keyframes icon-copy-hide {
  0% {
    top: -1.3333333333rem;
    opacity: 1
  }

  to {
    top: -8rem;
    opacity: 0
  }
}

.vip-area-group {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 14.4rem;
  padding: 0 4.2666666667rem;
  background: var(--third-party-personal-membername-wrap-bg);
  border-radius: 1.3333333333rem
}

.vip-area-group .left-box {
  position: relative;
  border: 0;
  width: 60%;
  height: 6.6666666667rem
}

.vip-area-group .item {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%
}

.vip-area-group .item h3 {
  color: var(--third-party-personal-vip-membername-txt)
}

.vip-area-group .item .points-number {
  flex: 1;
  color: var(--profile-vip-number);
  font-size: 5.6rem;
  text-align: center
}

.vip-area-group .right-box {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  width: 40%;
  height: 100%
}

.vip-area-group .right-box a {
  text-decoration: none
}

.vip-area-group .right-box .goto-myvip {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: 11.7333333333rem;
  border-radius: 2.6666666667rem;
  margin-right: 0
}

.vip-area-group .right-box .goto-myvip:before {
  display: none
}

.vip-area-group .right-box .goto-myvip .myvip-text {
  display: inline-flex;
  align-items: center;
  color: var(--third-party-personal-myvip-txt);
  font-size: 3.7333333333rem
}

.vip-area-group .right-box .goto-myvip .myvip-text:after {
  display: none
}

.vip-area-group .right-box .goto-myvip .myvip-text span {
  display: inline-block;
  width: auto;
  height: 3.7333333333rem;
  margin-left: 0;
  background: var(--profile-vip-arrow-icon-color);
  vertical-align: middle;
  mask-repeat: no-repeat;
  mask-position: top center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: cover
}

.vip-area-group .right-box .goto-myvip .myvip-text .item-icon {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 0 0 1.3333333333rem;
  background: var(--third-party-personal-myvip-txt);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain
}

.crypto-group-2 {
  position: relative
}

.crypto-group-2 .crypto-wrap {
  padding-bottom: 3.2rem
}

.crypto-group-2 .crypto-input {
  position: relative;
  width: 100%;
  margin: 2.6666666667rem 0 1.3333333333rem
}

.crypto-group-2 .crypto-input .currency {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  height: 11.7333333333rem;
  padding: 0 4.2666666667rem;
  color: var(--form-input-txt)
}

.crypto-group-2 .crypto-input .currency .icon {
  width: 6.4rem;
  height: 6.4rem
}

.crypto-group-2 .crypto-input .currency .icon img {
  width: 100%;
  height: 100%
}

.crypto-group-2 .crypto-input .currency .unit {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--form-input-crypto-unit);
  color: var(--form-input-crypto-unit-txt);
  font-size: 4.2666666667rem;
  line-height: 6.4rem;
  text-align: center
}

.crypto-group-2 .crypto-input input,
.crypto-group-2 .crypto-input textarea {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333rem;
  padding: 0 2.6666666667rem 0 11.7333333333rem;
  transition: border .3s;
  border: .2666666667rem solid var(--form-input-bg);
  border-radius: 2.6666666667rem;
  background-color: var(--form-input-bg);
  color: var(--form-input-txt);
  font-size: 3.7333333333rem;
  font-weight: 400;
  text-align: right;
  appearance: none
}

.crypto-group-2 .crypto-input input::placeholder,
.crypto-group-2 .crypto-input textarea::placeholder {
  color: var(--form-input-txt-placeholder)
}

.crypto-group-2 .crypto-input input:focus,
.crypto-group-2 .crypto-input textarea:focus {
  padding-right: 8.5333333333rem;
  border: .2666666667rem solid var(--form-input-border-focus);
  outline: none
}

.crypto-group-2 .crypto-input .delete-btn {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 8rem;
  height: 10.6666666667rem;
  transform: translateY(-50%);
  transition: all .3s;
  opacity: 0;
  mask: var(--form-clear-icon) no-repeat 40% center/40%;
  -webkit-mask: var(--form-clear-icon) no-repeat 40% center/40%
}

.crypto-group-2 .switch-btn {
  display: inline-block;
  position: relative;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-right: 2.1333333333rem;
  background: var(--wallet-crypto-switch-icon-color);
  vertical-align: middle;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 80%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 80%
}

.crypto-group-2 .input-text {
  display: inline-block;
  color: var(--wallet-crypto-tips-txt);
  font-size: 3.2rem
}

.crypto-group-2 .input-text i {
  margin: 0 2.1333333333rem;
  color: var(--wallet-crypto-tips-highlight);
  font-weight: 500
}

.upload-box {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 0;
  margin-top: 1.8666666667rem;
  overflow: hidden;
  transition: all .3s;
  border: 0;
  text-align: center;
  cursor: pointer
}

.upload-box.active {
  height: 40rem;
  border: 1px dashed var(--color-player-form-upload)
}

.upload-box.active .delete-btn {
  opacity: 1
}

.upload-box.active img {
  height: auto;
  max-height: 100%
}

.upload-box .delete-btn {
  display: block;
  transition: all .3s;
  opacity: 0
}

.upload-box img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: 0;
  transition: all .3s
}

@keyframes rotate {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.toggle-box {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  cursor: pointer
}

.toggle-box__title {
  color: var(--switch-target-txt)
}

.toggle-box__inner {
  width: 12rem;
  height: 6.6666666667rem;
  margin-left: 1.3333333333rem
}

.toggle-box__input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 2
}

.toggle-box__switch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 12rem;
  height: 6.6666666667rem;
  padding: .8rem;
  background: var(--switch-target-race-track-bg);
  border-radius: 8rem;
  cursor: pointer
}

.toggle-box__disc {
  width: 4.8rem;
  height: 4.8rem;
  padding: 1.0666666667rem;
  background-color: var(--switch-target-knob);
  border-radius: 50%;
  box-shadow: 0 1px 1px #0003;
  transition: left .5s, transform .5s
}

.toggle-box__toggle-img {
  width: 100%;
  height: 100%;
  background: var(--switch-target-btn-icon);
  -webkit-mask-size: contain
}

.toggle-box__toggle-img--light {
  display: block
}

.toggle-box__toggle-img--dark {
  display: none
}

.toggle-box__input~.toggle-box__switch {
  position: absolute
}

.toggle-box__input~.toggle-box__switch .toggle-box__disc {
  position: relative;
  left: 0;
  transform: translate(0)
}

.toggle-box__input:checked~.toggle-box__switch .toggle-box__disc {
  left: 100%;
  transform: translate(-100%)
}

.toggle-box__input:checked~.toggle-box__switch {
  background: var(--switch-target-btn-bg)
}

.toggle-box__input:checked~.toggle-box__switch .toggle-box__toggle-img--dark {
  display: block
}

.toggle-box__input:checked~.toggle-box__switch .toggle-box__toggle-img--light {
  display: none
}

.content-title {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 5.3333333333rem);
  margin: 0 auto;
  padding: 2.1333333333rem 0
}

.content-title h2 {
  color: var(--color-title);
  font-size: 4rem;
  font-weight: 700
}

.content-title h2:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4rem;
  margin-right: 1.3333333333rem;
  background-color: var(--primary);
  vertical-align: middle
}

.content-title h2 span {
  display: inline-block;
  vertical-align: middle
}

.content-title .layout-btn {
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  border-radius: 6.6666666667rem;
  background-color: var(--primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%
}

.content-title .layout-btn.active {
  background-image: url(/assets/images/icon-set/index-theme-icon/theme-brand-icon.svg)
}

.is-mobile .wrap:not(.isCricketReady) {
  padding-bottom: 13.3333333333rem
}

.is-mobile .float-banner {
  bottom: 17.3333333333rem
}

.is-mobile .isLogin .wrap:not(.isCricketReady) {
  padding-bottom: 13.3333333333rem
}

.is-mobile .isLogin .float-banner {
  bottom: 17.3333333333rem
}

.toolbar {
  position: fixed;
  z-index: 112;
  bottom: 0;
  width: 100%;
  height: 13.3333333333rem;
  background: var(--toolbar-bg);
  box-shadow: 0 0 4.2666666667rem var(--toolbar-shadow);
  border-radius: 2.6666666667rem 2.6666666667rem 0 0
}

.toolbar ul {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  z-index: 1
}

.toolbar ul:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--toolbar-bg);
  pointer-events: none;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  --d: vw(52px);
  --r: calc(var(--d) / 2);
  --cx: calc(var(--slider-x, 0px) + var(--r));
  --cy: calc(100% - (vw(6px) + var(--r)));
  -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r), #000 calc(var(--r) + .5px));
  mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r), #000 calc(var(--r) + .5px))
}

.toolbar ul li {
  position: relative;
  width: 20%;
  height: auto;
  z-index: 2
}

.toolbar ul li,
.toolbar ul li a,
.toolbar ul li .icon-wrap,
.toolbar ul li .toolbar-icon {
  position: relative;
  z-index: 2
}

.toolbar ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none
}

.toolbar ul li a p {
  margin-top: 1.0666666667rem;
  color: var(--toolbar-txt);
  font-size: 3.2rem;
  text-align: center
}

.toolbar ul li .item-icon {
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
  background: var(--toolbar-icon)
}

.toolbar ul li.active p {
  color: var(--toolbar-txt-active)
}

.toolbar ul li.active .icon-wrap {
  top: -1.6rem
}

.toolbar ul li.active .icon-wrap:before,
.toolbar ul li.active .icon-wrap:after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  animation: toolbar-active-animation .4s ease-in-out;
  animation-fill-mode: forwards
}

.toolbar ul li.active .icon-wrap:before {
  width: 10.1333333333rem;
  height: 10.1333333333rem;
  background: var(--toolbar-icon-bg-back);
  z-index: -1;
  opacity: .4
}

.toolbar ul li.active .icon-wrap:after {
  width: 7.4666666667rem;
  height: 7.4666666667rem;
  background: var(--toolbar-icon-bg-front);
  z-index: -1
}

.toolbar ul li.active .item-icon {
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  background: var(--toolbar-icon-active)
}

@keyframes toolbar-active-animation {
  0% {
    transform: translate(-50%, -50%) scale(0)
  }

  85% {
    transform: translate(-50%, -50%) scale(1.2)
  }

  to {
    transform: translate(-50%, -50%) scale(1)
  }
}

.toolbar-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 13.8666666667rem;
  height: 13.3333333333rem;
  will-change: transform;
  transition: transform .3s ease;
  pointer-events: none;
  z-index: 0
}

.toolbar-border:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3.2rem;
  width: 13.8666666667rem;
  height: 13.8666666667rem;
  border-radius: 50%;
  background: var(--toolbar-border-bg);
  filter: drop-shadow(0 0 4.2666666667rem var(--toolbar-border-shadow));
  -webkit-filter: drop-shadow(0 0 4.2666666667rem var(--toolbar-border-shadow))
}

.banner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  margin: -.2666666667rem 0 0;
  overflow: hidden
}

.banner:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 13.3333333333rem;
  transform: translateY(-100%);
  background-color: var(--header-bg-active);
  pointer-events: none
}

.banner .slick-dots {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  pointer-events: none
}

.banner .slick-dots li {
  display: inline-block;
  position: relative;
  width: 5.3333333333rem;
  height: .5333333333rem;
  margin: 0 .5333333333rem;
  overflow: hidden;
  border-radius: .5333333333rem;
  background-color: color-mix(in srgb, var(--event-slick-dot), transparent 50%);
  text-indent: -2666.4rem
}

.banner .slick-dots li:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--event-slick-dot)
}

.banner .slick-dots li.slick-active:after {
  animation: slick--times-animation 3s
}

.banner-image {
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

@keyframes slick--times-animation {
  0% {
    width: 0
  }

  to {
    width: 100%
  }
}

.member-content .banner {
  background-color: var(--content-bg)
}

.member-content .banner li {
  background-color: color-mix(in srgb, var(--event-slick-dot-register), transparent 70%)
}

.member-content .banner li:after {
  background-color: var(--event-slick-dot-register)
}

.popup-page {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: start
}

@supports (height: 100dvh) {
  .popup-page {
    height: 100dvh
  }
}

@supports not (height: 100dvh) {
  .popup-page {
    height: 100vh
  }
}

.popup-page__backdrop {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: auto;
  background: transparent;
  opacity: 0;
  transition: opacity 1s, -webkit-backdrop-filter 1s;
  transition: opacity 1s, backdrop-filter 1s;
  transition: opacity 1s, backdrop-filter 1s, -webkit-backdrop-filter 1s;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px)
}

.popup-page--active .popup-page__backdrop {
  background: var(--pop-mask-bg);
  opacity: 1;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px)
}

.popup-page:not(.popup-page--active) {
  pointer-events: none
}

.popup-page--align-top {
  align-items: flex-start
}

.popup-page__main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3
}

.popup-page--active .popup-page__main {
  display: block
}

.popup-page-main {
  flex: none;
  width: 100%;
  height: 100%;
  box-shadow: 0 .2666666667rem 1.6rem color-mix(in srgb, var(--popup-page-main-shadow), transparent 95%), inset 0 .2666666667rem .5333333333rem color-mix(in srgb, var(--popup-page-main-shadow), transparent 95%);
  background-color: var(--popup-page-main-bg);
  transform: translate(-50%);
  transition: transform .5s, opacity .5s;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto
}

.popup-page-main--show {
  transform: translate(-50%, -50%);
  opacity: 1
}

.popup-page-main__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  flex: none;
  top: 0;
  flex: 0;
  width: 100%;
  height: 13.3333333333rem;
  padding-bottom: 0;
  background: var(--popup-page-main-header-bg)
}

.popup-page-main__back {
  cursor: pointer;
  opacity: 1;
  position: absolute;
  left: 2.6666666667rem;
  width: 5rem;
  height: 5rem;
  background: var(--header-title);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 80%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 80%
}

.popup-page-main__back:hover {
  opacity: .7
}

.popup-page-main__title {
  color: var(--header-title);
  font-size: 4.8rem;
  text-align: center
}

.popup-page-main__close {
  cursor: pointer;
  opacity: 1;
  position: relative;
  width: 5rem;
  height: 5rem;
  position: absolute;
  right: 2.6666666667rem;
  z-index: 2
}

.popup-page-main__close:hover {
  opacity: .7
}

.popup-page-main__close:after,
.popup-page-main__close:before {
  content: "";
  display: block;
  height: 80%;
  width: .5rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  background-color: var(--header-close-icon);
  transform-origin: 50% 50%
}

.popup-page-main__close:after {
  transform: translateY(-50%) rotate(-45deg)
}

.popup-page-main__close:before {
  transform: translateY(-50%) rotate(45deg)
}

.popup-page-main__close:before,
.popup-page-main__close:after {
  border-radius: 10rem
}

.popup-page-main__container {
  flex: 1;
  position: absolute;
  top: 13.3333333333rem;
  width: 100%;
  height: calc(100% - 13.3333333333rem);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--popup-page-main-container-bg)
}

.popup-page-main__container .pop-bg {
  height: 100%
}

.popup-page-main__container .content {
  padding-top: 0
}

.popup-page-main__container .content.fixed-tab {
  padding-top: 52px
}

.referral-partner-tab .tab-btn-page {
  padding: 0 2.6666666667rem;
  width: 100%;
  border-bottom: unset;
  background: var(--referral-partner-tab-bg, var(--tab-header-bg));
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--referral-partner-tab-shadow, var(--offset-shadow)), transparent 95%)
}

.referral-partner-tab .tab-btn-page .btn {
  padding: 2.6666666667rem 0;
  border-radius: 1.3333333333rem;
  background: var(--referral-partner-tab-btn-disabled, var(--btn-main-bg-disabled))
}

.referral-partner-tab .tab-btn-page .btn+.btn {
  margin-left: 1.6rem
}

.referral-partner-tab .tab-btn-page .btn .text {
  color: var(--referral-partner-tab-btn-txt, var(--color-text))
}

.referral-partner-tab .tab-btn-page .btn.active,
.referral-partner-tab .tab-btn-page .btn[data-tab-current=current] {
  background: var(--referral-partner-tab-btn-active, var(--secondary))
}

.referral-partner-tab .tab-btn-page .btn[data-tab-current=current] .text {
  color: var(--referral-partner-tab-btn-txt-active, var(--color-text))
}

.referral-partner-tab .tab-btn-page .line {
  display: none
}

.referral-partner {
  padding-bottom: 1.3333333333rem
}

.referral-partner .menu-box {
  color: var(--referral-partner-content-txt, var(--color-text));
  background: var(--referral-partner-content-bg, var(--form-box-bg))
}

.referral-partner .menu-box img {
  width: 100%;
  overflow: hidden;
  border-radius: 1.3333333333rem
}

.referral-partner .menu-box .title,
.referral-partner .menu-box .title-group {
  margin-bottom: 1.3333333333rem
}

.referral-partner .menu-box .title h2,
.referral-partner .menu-box .title-group h2 {
  border: none
}

.referral-partner .recommend-friends-list .date-title {
  margin: 0 2.1333333333rem;
  padding: 2.1333333333rem
}

.referral-partner .recommend-friends-list .date-title .date .item-icon {
  display: inline-block;
  width: 4.2666666667rem;
  height: 4rem;
  margin-right: 2.1333333333rem;
  background: var(--referral-partner-details-date-icon, var(--transaction-record-calendar-icon-color));
  mask-repeat: no-repeat;
  mask-position: center left;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  -webkit-mask-size: 100%
}

.referral-partner .recommend-friends-list .time-zone {
  border-color: var(--referral-partner-details-time-zone-border, var(--color-text));
  color: var(--referral-partner-details-time-zone-txt, var(--color-text))
}

.referral-partner .recommend-friends-list .form-title {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  line-height: 1.3;
  padding: 2.1333333333rem 0;
  background-color: var(--referral-partner-details-list-title-bg, var(--vip-points-table-head-bg));
  color: var(--referral-partner-details-list-title-txt, var(--vip-points-table-head-txt));
  font-size: 3.2rem;
  font-weight: 500;
  margin: 2.1333333333rem 2.1333333333rem 0;
  border-radius: 1.3333333333rem 1.3333333333rem 0 0;
  align-content: center
}

.referral-partner .recommend-friends-list .form-title div {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 1.0666666667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: .2666666667rem dotted var(--referral-partner-details-list-title-border, var(--vip-points-table-head-border))
}

.referral-partner .recommend-friends-list .form-title div:last-child {
  border: 0
}

.referral-partner .recommend-friends-list .form-title div:last-child:after {
  content: none
}

.referral-partner .recommend-friends-list .list-content li div {
  display: block;
  text-align: center;
  border-right: .2666666667rem dotted var(--referral-partner-details-list-content-td-border, #ffffff);
  padding: 2.1333333333rem 1.3333333333rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  z-index: 1
}

.referral-partner .recommend-friends-list .list-content li div:last-child {
  border: 0
}

.referral-partner .recommend-friends-list .list-content li div:last-child:after {
  content: none
}

.referral-partner .recommend-friends-list .list-content li .reward-amount {
  text-align: right
}

.referral-partner .recommend-friends-list .list-content li .status {
  position: relative;
  color: var(--referral-partner-details-list-content-state-txt, #ffffff);
  padding: 2.1333333333rem
}

.referral-partner .recommend-friends-list .list-content li .status:before {
  content: "";
  display: block;
  position: absolute;
  top: 1.8666666667rem;
  left: 2.1333333333rem;
  height: calc(100% - 8.5333333333rem);
  width: calc(100% - 6.9333333333rem);
  padding: 2.1333333333rem 1.3333333333rem;
  border-radius: .8rem;
  z-index: -1
}

.referral-partner .recommend-friends-list .list-content li .status.available:before {
  background: var(--referral-partner-details-list-content-state-available, #efbd33)
}

.referral-partner .recommend-friends-list .list-content li .status.completed:before {
  background: var(--referral-partner-details-list-content-state-completed, #47c05c)
}

.referral-partner .recommend-friends-list .list-content li .status.expired:before {
  background: var(--referral-partner-details-list-content-state-expired, #aeaeae)
}

.referral-partner .recommend-friends-list .list-content li .status.claimed:before {
  background: var(--referral-partner-details-list-content-state-claimed, #f2794e)
}

.referral-partner .recommend-friends-list .list-content li .status.rejected:before {
  background: var(--referral-partner-details-list-content-state-rejected, #d46465)
}

.referral-partner .cdk-overlay-pane.dialog-panel {
  position: relative !important;
  left: 50%;
  top: 50%
}

.referral-partner .mat-mdc-button {
  font-weight: 700
}

.referral-partner .challenge-bonus-info i {
  color: var(--referral-partner-challenge-bonus-txt-strong, var(--primary))
}

mcd-referral-bonus-terms-conditions,
mcd-referral-bonus-goals,
mcd-referral-bonus-period-info,
mcd-requirement,
mcd-contact-info,
mcd-bonus-received-billboard,
mcd-leaderboard,
mcd-total-issued-bonuses,
mcd-income-calculator,
mcd-commission-info,
mcd-period-revenue-goals,
mcd-can-receive-bonus,
mcd-dashboard,
mcd-received-bonus-record,
mcd-invitation-link {
  font-size: var(--referral-partner-txt-font-size, 3.7333333333rem)
}

mcd-referral-bonus-terms-conditions h2,
mcd-referral-bonus-goals h2,
mcd-referral-bonus-period-info h2,
mcd-requirement h2,
mcd-contact-info h2,
mcd-bonus-received-billboard h2,
mcd-leaderboard h2,
mcd-total-issued-bonuses h2,
mcd-income-calculator h2,
mcd-commission-info h2,
mcd-period-revenue-goals h2,
mcd-can-receive-bonus h2,
mcd-dashboard h2,
mcd-received-bonus-record h2,
mcd-invitation-link h2,
mcd-referral-bonus-terms-conditions h2 span,
mcd-referral-bonus-goals h2 span,
mcd-referral-bonus-period-info h2 span,
mcd-requirement h2 span,
mcd-contact-info h2 span,
mcd-bonus-received-billboard h2 span,
mcd-leaderboard h2 span,
mcd-total-issued-bonuses h2 span,
mcd-income-calculator h2 span,
mcd-commission-info h2 span,
mcd-period-revenue-goals h2 span,
mcd-can-receive-bonus h2 span,
mcd-dashboard h2 span,
mcd-received-bonus-record h2 span,
mcd-invitation-link h2 span {
  font-size: var(--referral-partner-h2-font-size, 3.7333333333rem);
  color: var(--referral-partner-sub-title, var(--color-title))
}

mcd-referral-bonus-terms-conditions h3,
mcd-referral-bonus-goals h3,
mcd-referral-bonus-period-info h3,
mcd-requirement h3,
mcd-contact-info h3,
mcd-bonus-received-billboard h3,
mcd-leaderboard h3,
mcd-total-issued-bonuses h3,
mcd-income-calculator h3,
mcd-commission-info h3,
mcd-period-revenue-goals h3,
mcd-can-receive-bonus h3,
mcd-dashboard h3,
mcd-received-bonus-record h3,
mcd-invitation-link h3,
mcd-referral-bonus-terms-conditions h3 span,
mcd-referral-bonus-goals h3 span,
mcd-referral-bonus-period-info h3 span,
mcd-requirement h3 span,
mcd-contact-info h3 span,
mcd-bonus-received-billboard h3 span,
mcd-leaderboard h3 span,
mcd-total-issued-bonuses h3 span,
mcd-income-calculator h3 span,
mcd-commission-info h3 span,
mcd-period-revenue-goals h3 span,
mcd-can-receive-bonus h3 span,
mcd-dashboard h3 span,
mcd-received-bonus-record h3 span,
mcd-invitation-link h3 span {
  font-weight: 700;
  font-size: var(--referral-partner-h3-font-size, 3.7333333333rem);
  color: var(--referral-partner-third-title, var(--color-title))
}

mcd-referral-bonus-terms-conditions div,
mcd-referral-bonus-goals div,
mcd-referral-bonus-period-info div,
mcd-requirement div,
mcd-contact-info div,
mcd-bonus-received-billboard div,
mcd-leaderboard div,
mcd-total-issued-bonuses div,
mcd-income-calculator div,
mcd-commission-info div,
mcd-period-revenue-goals div,
mcd-can-receive-bonus div,
mcd-dashboard div,
mcd-received-bonus-record div,
mcd-invitation-link div,
mcd-referral-bonus-terms-conditions p,
mcd-referral-bonus-goals p,
mcd-referral-bonus-period-info p,
mcd-requirement p,
mcd-contact-info p,
mcd-bonus-received-billboard p,
mcd-leaderboard p,
mcd-total-issued-bonuses p,
mcd-income-calculator p,
mcd-commission-info p,
mcd-period-revenue-goals p,
mcd-can-receive-bonus p,
mcd-dashboard p,
mcd-received-bonus-record p,
mcd-invitation-link p {
  font-size: var(--referral-partner-p-font-size, 3.7333333333rem);
  color: var(--referral-partner-txt, var(--color-title))
}

mcd-referral-bonus-terms-conditions p,
mcd-referral-bonus-goals p,
mcd-referral-bonus-period-info p,
mcd-requirement p,
mcd-contact-info p,
mcd-bonus-received-billboard p,
mcd-leaderboard p,
mcd-total-issued-bonuses p,
mcd-income-calculator p,
mcd-commission-info p,
mcd-period-revenue-goals p,
mcd-can-receive-bonus p,
mcd-dashboard p,
mcd-received-bonus-record p,
mcd-invitation-link p,
mcd-referral-bonus-terms-conditions h3,
mcd-referral-bonus-goals h3,
mcd-referral-bonus-period-info h3,
mcd-requirement h3,
mcd-contact-info h3,
mcd-bonus-received-billboard h3,
mcd-leaderboard h3,
mcd-total-issued-bonuses h3,
mcd-income-calculator h3,
mcd-commission-info h3,
mcd-period-revenue-goals h3,
mcd-can-receive-bonus h3,
mcd-dashboard h3,
mcd-received-bonus-record h3,
mcd-invitation-link h3 {
  margin: 2.1333333333rem 0
}

mcd-referral-bonus-terms-conditions span,
mcd-referral-bonus-goals span,
mcd-referral-bonus-period-info span,
mcd-requirement span,
mcd-contact-info span,
mcd-bonus-received-billboard span,
mcd-leaderboard span,
mcd-total-issued-bonuses span,
mcd-income-calculator span,
mcd-commission-info span,
mcd-period-revenue-goals span,
mcd-can-receive-bonus span,
mcd-dashboard span,
mcd-received-bonus-record span,
mcd-invitation-link span {
  color: var(--referral-partner-sub-txt, var(--color-title))
}

mcd-referral-bonus-terms-conditions i,
mcd-referral-bonus-goals i,
mcd-referral-bonus-period-info i,
mcd-requirement i,
mcd-contact-info i,
mcd-bonus-received-billboard i,
mcd-leaderboard i,
mcd-total-issued-bonuses i,
mcd-income-calculator i,
mcd-commission-info i,
mcd-period-revenue-goals i,
mcd-can-receive-bonus i,
mcd-dashboard i,
mcd-received-bonus-record i,
mcd-invitation-link i,
mcd-referral-bonus-terms-conditions a,
mcd-referral-bonus-goals a,
mcd-referral-bonus-period-info a,
mcd-requirement a,
mcd-contact-info a,
mcd-bonus-received-billboard a,
mcd-leaderboard a,
mcd-total-issued-bonuses a,
mcd-income-calculator a,
mcd-commission-info a,
mcd-period-revenue-goals a,
mcd-can-receive-bonus a,
mcd-dashboard a,
mcd-received-bonus-record a,
mcd-invitation-link a,
mcd-referral-bonus-terms-conditions strong,
mcd-referral-bonus-goals strong,
mcd-referral-bonus-period-info strong,
mcd-requirement strong,
mcd-contact-info strong,
mcd-bonus-received-billboard strong,
mcd-leaderboard strong,
mcd-total-issued-bonuses strong,
mcd-income-calculator strong,
mcd-commission-info strong,
mcd-period-revenue-goals strong,
mcd-can-receive-bonus strong,
mcd-dashboard strong,
mcd-received-bonus-record strong,
mcd-invitation-link strong {
  color: var(--referral-partner-txt-strong, var(--primary))
}

mcd-referral-bonus-terms-conditions strong,
mcd-referral-bonus-goals strong,
mcd-referral-bonus-period-info strong,
mcd-requirement strong,
mcd-contact-info strong,
mcd-bonus-received-billboard strong,
mcd-leaderboard strong,
mcd-total-issued-bonuses strong,
mcd-income-calculator strong,
mcd-commission-info strong,
mcd-period-revenue-goals strong,
mcd-can-receive-bonus strong,
mcd-dashboard strong,
mcd-received-bonus-record strong,
mcd-invitation-link strong {
  font-weight: 700
}

mcd-referral-bonus-terms-conditions a,
mcd-referral-bonus-goals a,
mcd-referral-bonus-period-info a,
mcd-requirement a,
mcd-contact-info a,
mcd-bonus-received-billboard a,
mcd-leaderboard a,
mcd-total-issued-bonuses a,
mcd-income-calculator a,
mcd-commission-info a,
mcd-period-revenue-goals a,
mcd-can-receive-bonus a,
mcd-dashboard a,
mcd-received-bonus-record a,
mcd-invitation-link a {
  display: block;
  margin: 2.1333333333rem 0
}

mcd-referral-bonus-terms-conditions .table,
mcd-referral-bonus-goals .table,
mcd-referral-bonus-period-info .table,
mcd-requirement .table,
mcd-contact-info .table,
mcd-bonus-received-billboard .table,
mcd-leaderboard .table,
mcd-total-issued-bonuses .table,
mcd-income-calculator .table,
mcd-commission-info .table,
mcd-period-revenue-goals .table,
mcd-can-receive-bonus .table,
mcd-dashboard .table,
mcd-received-bonus-record .table,
mcd-invitation-link .table {
  margin-bottom: 5.3333333333rem
}

mcd-referral-bonus-terms-conditions .table table,
mcd-referral-bonus-goals .table table,
mcd-referral-bonus-period-info .table table,
mcd-requirement .table table,
mcd-contact-info .table table,
mcd-bonus-received-billboard .table table,
mcd-leaderboard .table table,
mcd-total-issued-bonuses .table table,
mcd-income-calculator .table table,
mcd-commission-info .table table,
mcd-period-revenue-goals .table table,
mcd-can-receive-bonus .table table,
mcd-dashboard .table table,
mcd-received-bonus-record .table table,
mcd-invitation-link .table table {
  width: 100%;
  text-align: center
}

mcd-referral-bonus-terms-conditions .table table tr,
mcd-referral-bonus-goals .table table tr,
mcd-referral-bonus-period-info .table table tr,
mcd-requirement .table table tr,
mcd-contact-info .table table tr,
mcd-bonus-received-billboard .table table tr,
mcd-leaderboard .table table tr,
mcd-total-issued-bonuses .table table tr,
mcd-income-calculator .table table tr,
mcd-commission-info .table table tr,
mcd-period-revenue-goals .table table tr,
mcd-can-receive-bonus .table table tr,
mcd-dashboard .table table tr,
mcd-received-bonus-record .table table tr,
mcd-invitation-link .table table tr {
  border-bottom: transparent
}

mcd-referral-bonus-terms-conditions .table table th,
mcd-referral-bonus-goals .table table th,
mcd-referral-bonus-period-info .table table th,
mcd-requirement .table table th,
mcd-contact-info .table table th,
mcd-bonus-received-billboard .table table th,
mcd-leaderboard .table table th,
mcd-total-issued-bonuses .table table th,
mcd-income-calculator .table table th,
mcd-commission-info .table table th,
mcd-period-revenue-goals .table table th,
mcd-can-receive-bonus .table table th,
mcd-dashboard .table table th,
mcd-received-bonus-record .table table th,
mcd-invitation-link .table table th {
  background: var(--referral-partner-table-title-bg, var(--betting-details-table-head-bg));
  padding: 1.0666666667rem;
  vertical-align: middle;
  color: var(--referral-partner-table-title-txt, var(--color-text))
}

mcd-referral-bonus-terms-conditions .table table td,
mcd-referral-bonus-goals .table table td,
mcd-referral-bonus-period-info .table table td,
mcd-requirement .table table td,
mcd-contact-info .table table td,
mcd-bonus-received-billboard .table table td,
mcd-leaderboard .table table td,
mcd-total-issued-bonuses .table table td,
mcd-income-calculator .table table td,
mcd-commission-info .table table td,
mcd-period-revenue-goals .table table td,
mcd-can-receive-bonus .table table td,
mcd-dashboard .table table td,
mcd-received-bonus-record .table table td,
mcd-invitation-link .table table td {
  background: var(--referral-partner-table-content-bg, var(--form-box-bg));
  color: var(--referral-partner-table-txt, var(--color-text));
  padding: 1.3333333333rem
}

mcd-referral-bonus-terms-conditions .table table th,
mcd-referral-bonus-goals .table table th,
mcd-referral-bonus-period-info .table table th,
mcd-requirement .table table th,
mcd-contact-info .table table th,
mcd-bonus-received-billboard .table table th,
mcd-leaderboard .table table th,
mcd-total-issued-bonuses .table table th,
mcd-income-calculator .table table th,
mcd-commission-info .table table th,
mcd-period-revenue-goals .table table th,
mcd-can-receive-bonus .table table th,
mcd-dashboard .table table th,
mcd-received-bonus-record .table table th,
mcd-invitation-link .table table th,
mcd-referral-bonus-terms-conditions .table table td,
mcd-referral-bonus-goals .table table td,
mcd-referral-bonus-period-info .table table td,
mcd-requirement .table table td,
mcd-contact-info .table table td,
mcd-bonus-received-billboard .table table td,
mcd-leaderboard .table table td,
mcd-total-issued-bonuses .table table td,
mcd-income-calculator .table table td,
mcd-commission-info .table table td,
mcd-period-revenue-goals .table table td,
mcd-can-receive-bonus .table table td,
mcd-dashboard .table table td,
mcd-received-bonus-record .table table td,
mcd-invitation-link .table table td {
  border: 2px solid var(--referral-partner-table-border, var(--form-box-bg))
}

mcd-commission-info ol,
mcd-commission-info ul {
  padding-left: 4.8rem
}

mcd-commission-info ol li+li,
mcd-commission-info ul li+li {
  margin-top: 2.1333333333rem
}

mcd-commission-info ul {
  list-style: auto
}

mcd-commission-info ol {
  list-style: disc
}

mcd-total-issued-bonuses .bonuses-box,
mcd-period-revenue-goals .goals-box-tips,
mcd-invitation-link .code-box-tips {
  display: inline-flex;
  width: 100%;
  padding: 0 4rem;
  justify-content: center;
  align-items: center
}

mcd-total-issued-bonuses .bonuses-box p,
mcd-period-revenue-goals .goals-box-tips p,
mcd-invitation-link .code-box-tips p {
  width: auto
}

mcd-total-issued-bonuses .bonuses-box span,
mcd-period-revenue-goals .goals-box-tips span,
mcd-invitation-link .code-box-tips span {
  color: var(--referral-partner-tips-txt-strong, var(--primary))
}

mcd-invitation-link .code-box {
  border-radius: 1.3333333333rem
}

mcd-invitation-link .code-box:after {
  display: none
}

mcd-invitation-link .code-box .btn-share {
  width: 100%;
  height: 10.6666666667rem;
  margin: auto auto 4.2666666667rem 0;
  font-size: 4rem;
  background: var(--referral-partner-code-box-share-btn, var(--secondary))
}

mcd-invitation-link .code-box .code {
  flex: unset;
  width: 100%;
  height: 10.6666666667rem;
  font-size: 3.4666666667rem;
  background: var(--referral-partner-code-input, var(--form-box-bg));
  border-color: var(--referral-partner-code-input-border, var(--recommend-input-border))
}

mcd-invitation-link .code-box .code span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 13.3333333333rem);
  color: var(--referral-partner-code-input-txt, var(--color-text))
}

mcd-invitation-link .code-box .code .btn {
  width: 13.3333333333rem;
  height: 100%;
  background: var(--referral-partner-code-copy-btn-bg, var(--secondary))
}

mcd-invitation-link .code-box .code img {
  width: 72%
}

mcd-invitation-link .invite-banner img {
  width: 100%
}

mcd-invitation-link .invite-cont-center {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1.3333333333rem 0
}

mcd-invitation-link .invite-cont-center .code-box-tips p {
  padding: 0
}

mcd-invitation-link .invite-cont-center .btn-invite-earn {
  cursor: pointer;
  flex: unset;
  padding: 2.1333333333rem 1.3333333333rem;
  border-radius: .8rem;
  background: var(--referral-partner-invite-cont-center-btn-bg, var(--primary));
  padding: 1.6rem 8.5333333333rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 4.2666666667rem;
  height: 10.6666666667rem;
  line-height: 1.1;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--referral-partner-invite-cont-center-btn-txt, var(--color-text))
}

mcd-invitation-link .invite-cont-center .btn-invite-earn+.code-box-tips {
  margin-top: 2.6666666667rem
}

mcd-invitation-link .invite-cont {
  display: inline-flex;
  width: 100%;
  margin: 2.6666666667rem 0;
  color: var(--referral-partner-invite-cont-txt, var(--color-text))
}

mcd-invitation-link .bonus-title {
  line-height: 1.1;
  margin-bottom: 1.0666666667rem
}

mcd-invitation-link .left {
  flex: 0 0 30.6666666667rem
}

mcd-invitation-link .invite-qr-code {
  position: relative;
  width: 100%;
  height: auto;
  padding: 1.3333333333rem;
  border-radius: 1.3333333333rem;
  border: .5333333333rem solid var(--referral-partner-invite-qr-code-border, var(--primary));
  background: var(--referral-partner-invite-qr-code-bg, var(--form-box-bg))
}

mcd-invitation-link .qrcode {
  z-index: 0;
  position: relative;
  width: 100%;
  margin: 0;
  transform: none;
  top: 0
}

mcd-invitation-link .right {
  position: relative;
  flex: 1;
  margin: 0 0 0 3.7333333333rem;
  padding-left: 4.2666666667rem
}

mcd-invitation-link .right:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: .5333333333rem;
  height: 100%;
  border-radius: 13.3333333333rem;
  background: var(--referral-partner-invite-cont-right-border, var(--primary))
}

mcd-received-bonus-record .invite-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 1.3333333333rem 0
}

mcd-received-bonus-record .invite-box .item {
  display: inline-flex;
  flex-direction: column;
  align-items: center
}

mcd-received-bonus-record .invite-box .invite-title {
  font-size: 3.2rem;
  color: var(--referral-partner-invite-box-title-txt, var(--color-text))
}

mcd-received-bonus-record .invite-box .text {
  margin-top: 2.1333333333rem;
  font-size: 4.8rem;
  color: var(--referral-partner-invite-box-item-txt, var(--primary))
}

mcd-received-bonus-record .invite-box .text i {
  color: var(--referral-partner-invite-box-item-txt, var(--primary))
}

mcd-dashboard .recommend-friends-box {
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: none;
  border-radius: 0
}

mcd-dashboard .recommend-friends-box .status-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: stretch;
  word-break: break-all
}

mcd-dashboard .recommend-friends-box .status {
  display: flex;
  justify-content: space-between;
  flex: auto;
  flex-direction: column;
  width: calc(50% - 1.0666666667rem);
  margin-bottom: 2.1333333333rem;
  align-items: center;
  text-align: center;
  background: var(--referral-partner-dashboard-item-bg, var(--form-input-bg));
  border-radius: 1.3333333333rem;
  padding: 4rem 4rem 2.6666666667rem
}

mcd-dashboard .recommend-friends-box .status.accept:after {
  display: none
}

mcd-dashboard .recommend-friends-box .status .number {
  font-size: 8rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: var(--referral-partner-dashboard-num-txt, var(--primary))
}

mcd-dashboard .recommend-friends-box .status .text {
  display: flex;
  width: 100%;
  height: 100%;
  background: none;
  font-size: 3.2rem;
  margin-bottom: 1.3333333333rem;
  color: var(--referral-partner-dashboard-txt, var(--color-text));
  padding: 0;
  align-items: center;
  justify-content: center
}

mcd-dashboard .recommend-friends-box .status:nth-child(2n) {
  margin-left: 2.1333333333rem
}

mcd-dashboard .recommend-friends-box .status .condition:before {
  display: none
}

mcd-can-receive-bonus .receive-box .day-text {
  margin-top: 2.6666666667rem;
  color: var(--referral-partner-receive-box-txt, var(--color-text));
  text-align: right
}

mcd-can-receive-bonus .receive-box .day-text.bottom-tips {
  margin: 0;
  padding: 2.6666666667rem 0;
  text-align: center;
  background-color: var(--referral-partner-receive-date-bg, var(--content-bg));
  font-size: 3.2rem;
  border-radius: 1.3333333333rem
}

mcd-can-receive-bonus .receive-box i {
  color: var(--referral-partner-receive-box-txt-strong, var(--primary))
}

mcd-can-receive-bonus .receive-box .receive-bonus {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 2.1333333333rem 0
}

mcd-can-receive-bonus .receive-box .text {
  font-size: 6.4rem
}

mcd-can-receive-bonus .receive-box .text i {
  color: var(--referral-partner-receive-box-price-txt, var(--color-text))
}

mcd-can-receive-bonus .receive-box .button {
  display: flex;
  width: auto;
  height: 10.6666666667rem;
  padding: 0 4.8rem;
  font-size: 4rem;
  line-height: normal;
  align-items: center;
  background: var(--referral-partner-receive-btn-active, var(--btn-main-bg))
}

mcd-can-receive-bonus .receive-box .button.btn-disabled {
  background: var(--referral-partner-receive-btn-disabled, var(--btn-main-bg-disabled));
  color: var(--referral-partner-receive-btn-txt, var(--btn-main-txt-disabled))
}

mcd-period-revenue-goals .goals-box {
  margin-top: 0;
  flex-direction: column
}

mcd-period-revenue-goals .goals-box .goals-item {
  display: flex;
  width: 100%
}

mcd-period-revenue-goals .goals-box .goals-item .goals-img {
  width: 18.1333333333rem;
  flex: 0 0 18.1333333333rem;
  margin-right: 3.2rem
}

mcd-period-revenue-goals .goals-box .goals-item+.goals-box-tips {
  margin-top: 2.1333333333rem
}

mcd-period-revenue-goals .goals-box i {
  color: var(--referral-partner-goals-box-txt-strong, var(--primary))
}

mcd-period-revenue-goals .goals-group {
  width: 100%
}

mcd-period-revenue-goals .goals-number {
  margin-bottom: 4rem
}

mcd-period-revenue-goals .goals-number i {
  font-size: 6.4rem
}

mcd-period-revenue-goals .progress-bar .bar {
  height: 2.6666666667rem;
  background: var(--referral-partner-progress-bar-bg, var(--form-input-bg));
  box-shadow: none
}

mcd-period-revenue-goals .progress-bar .bar .bar-inner {
  background: var(--referral-partner-progress-bar-inner-bg, linear-gradient(to right, #777777 0%, #222222 100%));
  box-shadow: none
}

mcd-period-revenue-goals .progress-bar .bar .bar-inner:after {
  display: none
}

mcd-period-revenue-goals .progress-bar .number {
  color: var(--referral-partner-progress-bar-txt, var(--color-text))
}

mcd-commission-info .menu-box .title {
  margin: 0 !important
}

mcd-commission-info .sec+.sec {
  margin-top: 4.2666666667rem
}

mcd-commission-info img {
  margin: 2.6666666667rem 0
}

mcd-commission-info .commission-bets-box {
  display: flex;
  flex-direction: column;
  color: var(--referral-partner-commission-bets-txt, var(--color-text));
  line-height: 1.1
}

mcd-commission-info .commission-bets-box .sec {
  padding: 2.1333333333rem 0
}

mcd-commission-info .commission-bets-box .sec+.sec {
  border-top: .2666666667rem solid var(--referral-partner-commission-bets-border, rgba(153, 153, 153, .3))
}

mcd-commission-info .commission-bets-box .referral-tips h2 {
  width: 100%;
  margin-bottom: 2.1333333333rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--referral-partner-commission-bets-sub-title, var(--primary));
  font-size: 4.8rem
}

mcd-income-calculator .income-calculator {
  display: flex
}

mcd-income-calculator .income-calculator .container {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center
}

mcd-income-calculator .income-calculator .range-slider {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

mcd-income-calculator .income-calculator h4 {
  margin: 2.1333333333rem 0;
  font-size: 4.2666666667rem
}

mcd-income-calculator .income-calculator h1 {
  font-size: 6.4rem;
  font-weight: 700;
  color: var(--referral-partner-income-calculator-title, var(--primary))
}

mcd-income-calculator .income-calculator span {
  color: var(--referral-partner-income-calculator-title-txt, var(--color-text));
  margin-bottom: 0
}

mcd-income-calculator .income-calculator .range-slider-text-input {
  margin: 0 2.1333333333rem;
  padding: 2.1333333333rem;
  border: 0;
  border-radius: .8rem;
  background: var(--referral-partner-income-calculator-range-slider-txt-bg, var(--form-input-bg));
  color: var(--referral-partner-income-calculator-range-slider-txt, var(--primary));
  text-align: center
}

mcd-income-calculator .income-calculator .range-slider-input {
  width: 100%;
  height: 0;
  margin: 4.2666666667rem 0 2.1333333333rem;
  border-radius: 8rem;
  padding: 1.3333333333rem 0;
  background: var(--referral-partner-income-calculator-range-slider-bg, var(--form-input-bg))
}

mcd-income-calculator .income-calculator .range-slider-input::-webkit-slider-thumb {
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  background: var(--referral-partner-income-calculator-range-slider-thumb-bg, #222222);
  box-shadow: inset 0 0 .8rem var(--referral-partner-income-calculator-range-slider-shadow-inset, transparent);
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none
}

mcd-income-calculator .income-calculator .range-slider-num {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 2.6666666667rem
}

mcd-total-issued-bonuses .bonuses-box {
  display: flex;
  justify-content: flex-start;
  background-color: var(--referral-partner-content-type-light-bg, var(--form-input-bg));
  border-radius: .8rem;
  margin-top: 2.6666666667rem;
  padding: 3.2rem
}

mcd-total-issued-bonuses .bonuses-box .bonuses-type-img {
  display: inline-flex;
  width: 18.1333333333rem;
  height: 18.1333333333rem;
  margin: 0 4.8rem 0 4rem
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  justify-content: space-around
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group div+div {
  margin-top: 1.0666666667rem
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-title,
mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-receive {
  color: var(--referral-partner-bonuses-txt, var(--color-text))
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-title {
  font-weight: 700
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-number {
  color: var(--referral-partner-bonuses-number-txt, var(--content-bg));
  font-size: 5.8666666667rem
}

mcd-leaderboard .leaderboard-box {
  background: var(--referral-partner-leaderboard-bg, linear-gradient(180deg, var(--form-input-bg) 0%, var(--form-box-bg) 100%));
  border-radius: .8rem;
  padding: 5.3333333333rem 2.6666666667rem;
  margin-top: 2.6666666667rem
}

mcd-leaderboard .leaderboard-box li {
  display: flex;
  align-items: center;
  font-weight: 700
}

mcd-leaderboard .leaderboard-box li+li {
  padding-top: 5.8666666667rem
}

mcd-leaderboard .leaderboard-box li div {
  display: inline-flex;
  justify-content: center;
  flex-basis: 14.9333333333rem
}

mcd-leaderboard .leaderboard-box li:nth-child(1) .leaderboard-top-img p {
  color: var(--referral-partner-leaderboard-first-txt, #ffb400)
}

mcd-leaderboard .leaderboard-box li:nth-child(2) .leaderboard-top-img p {
  color: var(--referral-partner-leaderboard-second-txt, #c2c2c2)
}

mcd-leaderboard .leaderboard-box li:nth-child(3) .leaderboard-top-img p {
  color: var(--referral-partner-leaderboard-third-txt, #c06f2f)
}

mcd-leaderboard .leaderboard-box .leaderboard-top-img {
  flex-direction: column;
  align-items: center
}

mcd-leaderboard .leaderboard-box .leaderboard-top-img img {
  width: 5.3333333333rem;
  height: auto
}

mcd-leaderboard .leaderboard-box .leaderboard-top-img p {
  margin-top: .8rem
}

mcd-leaderboard .leaderboard-box .leaderboard-icon-img {
  margin: 0 5.3333333333rem
}

mcd-leaderboard .leaderboard-box .leaderboard-icon-img img {
  width: 100%;
  height: auto
}

mcd-leaderboard .leaderboard-box .user-id {
  width: 13.6rem;
  margin: 0 2.6666666667rem 0 0;
  justify-content: left
}

mcd-leaderboard .leaderboard-box .leaderboard-number {
  justify-content: left;
  flex: 1;
  color: var(--referral-partner-bonuses-number-txt, var(--primary))
}

mcd-bonus-received-billboard .who-received-bonus-box {
  display: flex;
  flex-direction: column
}

mcd-bonus-received-billboard .who-received-bonus-box li {
  display: inline-flex;
  padding: 5.3333333333rem 3.2rem;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 700;
  text-align: center;
  background-color: var(--referral-partner-content-type-light-bg, var(--form-input-bg));
  border-radius: .8rem;
  margin-top: 2.6666666667rem
}

mcd-bonus-received-billboard .who-received-bonus-box li div {
  margin: 0 1.3333333333rem
}

mcd-bonus-received-billboard .who-received-bonus-box .user-id,
mcd-bonus-received-billboard .who-received-bonus-box .received-bonus-number {
  color: var(--referral-partner-bonuses-list-txt-strong, var(--primary))
}

mcd-bonus-received-billboard .who-received-bonus-box .text {
  color: var(--referral-partner-bonuses-list-txt, var(--color-text))
}

mcd-contact-info .contact-info .contact-link img {
  width: 90%;
  margin: 1.3333333333rem 5% 4rem
}

mcd-requirement .menu-box .title {
  padding: 0;
  font-size: 3.2rem;
  color: var(--referral-partner-condition-title-txt, var(--color-title))
}

mcd-requirement .referral-cont {
  flex-direction: column
}

mcd-requirement .referral-cont .title {
  margin: 2.6666666667rem 0;
  border: 0 !important
}

mcd-requirement .referral-cont .title:before {
  display: none
}

mcd-requirement .code-box-tips p {
  width: 100%;
  text-align: center;
  font-size: 2.6666666667rem;
  color: var(--referral-partner-code-box-tips-txt, var(--color-text));
  line-height: 3.7333333333rem
}

mcd-requirement .code-box-tips p i {
  font-size: 3.7333333333rem;
  color: var(--referral-partner-code-box-tips-txt-strong, var(--primary))
}

mcd-requirement .condition-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%
}

mcd-requirement .condition-list .item {
  flex: auto;
  flex-direction: column;
  width: calc(50% - 1.0666666667rem);
  margin-bottom: 2.1333333333rem;
  align-items: center;
  text-align: center;
  background: var(--referral-partner-condition-item-bg, var(--content-bg));
  border-radius: 1.3333333333rem;
  padding: 4rem
}

mcd-requirement .condition-list .item .condition {
  font-size: 3.2rem;
  color: var(--referral-partner-condition-txt, var(--color-text));
  padding: 0;
  margin-bottom: 1.3333333333rem
}

mcd-requirement .condition-list .item .text {
  display: flex;
  width: 100%;
  height: 100%;
  background: none;
  font-size: 4.8rem;
  font-weight: 700;
  color: var(--referral-partner-condition-num-txt, var(--primary));
  padding: 0;
  align-items: center;
  justify-content: center;
  line-height: normal
}

mcd-requirement .condition-list .item:nth-child(2n) {
  margin-left: 2.1333333333rem
}

mcd-requirement .condition-list .item .condition:before {
  display: none
}

mcd-referral-bonus-period-info .challenge-bonus-box {
  display: flex;
  border-radius: .8rem;
  box-shadow: inset 0 0 .8rem var(--referral-partner-challenge-bonus-box-shadow-inset, transparent);
  padding: 2.6666666667rem;
  background: var(--referral-partner-challenge-bonus-bg, var(--content-bg));
  align-items: center;
  margin: 0
}

mcd-referral-bonus-period-info .coin-banner {
  width: 40rem;
  margin: 2.6666666667rem 2.6666666667rem 0 0;
  flex: 0 0 40rem
}

mcd-referral-bonus-period-info .challenge-bonus-info {
  color: var(--referral-partner-challenge-bonus-txt, var(--color-text))
}

mcd-referral-bonus-period-info .more-depositors-text {
  margin-top: 4.2666666667rem
}

mcd-referral-bonus-goals .tab-btn-block {
  width: 100%;
  overflow: auto;
  margin: 2.6666666667rem 0
}

mcd-referral-bonus-goals .tab-btn-page {
  padding: 0;
  height: auto;
  z-index: 1;
  justify-content: flex-start;
  width: inherit;
  max-width: fill-available;
  max-width: -webkit-fill-available;
  background: transparent
}

mcd-referral-bonus-goals .tab-btn-page .btn {
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding: 2.6666666667rem 0;
  border-radius: .8rem;
  background: var(--referral-partner-achievement-tab-btn-bg, var(--btn-main-bg-disabled));
  box-shadow: 0 1.3333333333rem 2.6666666667rem 0 var(--referral-partner-achievement-tab-btn-shadow, rgba(6, 8, 15, 0)), inset 0 0 1.3333333333rem 0 var(--referral-partner-achievement-tab-btn-shadow-inset, rgba(255, 0, 0, 0))
}

mcd-referral-bonus-goals .tab-btn-page .btn+.btn {
  margin-left: 1.6rem
}

mcd-referral-bonus-goals .tab-btn-page .btn .text {
  color: var(--referral-partner-achievement-tab-btn-txt, var(--color-text))
}

mcd-referral-bonus-goals .tab-btn-page .btn.active {
  background: var(--referral-partner-achievement-tab-btn-bg-active, var(--secondary))
}

mcd-referral-bonus-goals .tab-btn-page .btn.active .text {
  color: var(--referral-partner-achievement-tab-btn-txt-active, var(--color-text))
}

mcd-referral-bonus-goals .tab-btn-page .btn[data-tab-current=current],
mcd-referral-bonus-goals .tab-btn-page .btn.active {
  background-image: var(--referral-partner-achievement-tab-btn-bg-active, var(--secondary))
}

mcd-referral-bonus-goals .tab-btn-page .line {
  display: none
}

mcd-referral-bonus-goals .achievement-bonus-block {
  position: relative;
  top: -.8rem;
  z-index: 2
}

mcd-referral-bonus-goals .period-line {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center
}

mcd-referral-bonus-goals .period-line p {
  display: inline-flex;
  padding: 0 2.6666666667rem;
  width: auto;
  justify-content: center;
  text-align: center
}

mcd-referral-bonus-goals .period-line:before,
mcd-referral-bonus-goals .period-line:after {
  content: "";
  display: inline-flex;
  width: 100%;
  height: .2666666667rem;
  background-color: var(--referral-partner-bonus-goals-sub-title-border, rgba(153, 153, 153, .3));
  flex: 1
}

mcd-referral-bonus-goals .achievement-bonus-box li {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 1.3333333333rem;
  margin: 2.1333333333rem 0;
  padding: 2.1333333333rem;
  background: var(--referral-partner-achievement-list-bg, linear-gradient(to bottom, #ffdb83 0, #ffbb15 100%));
  border: .2666666667rem solid var(--referral-partner-achievement-list-border, 0);
  box-shadow: 0 .5333333333rem 1.0666666667rem var(--referral-partner-achievement-list-shadow, rgba(0, 0, 0, .2)), inset 0 0 0 var(--referral-partner-achievement-list-shadow-inset, 0);
  overflow: hidden
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-icon {
  width: 18.6666666667rem;
  height: 18.6666666667rem;
  flex: 0 0 18.6666666667rem;
  margin-right: 2.1333333333rem
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-bonus-group {
  width: 100%;
  margin: 0
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-bonus-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.1333333333rem
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-bonus-bar {
  margin: 0
}

mcd-referral-bonus-goals .achievement-bonus-box p {
  color: var(--referral-partner-achievement-txt, var(--color-text));
  margin: 0
}

mcd-referral-bonus-goals .achievement-bonus-box i {
  color: var(--referral-partner-achievement-txt-strong, #840707)
}

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask,
mcd-referral-bonus-goals .achievement-bonus-box .lock-mask {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 1.3333333333rem;
  border: .5333333333rem solid var(--referral-partner-mask-border, var(--primary))
}

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask .icon,
mcd-referral-bonus-goals .achievement-bonus-box .lock-mask .icon {
  display: block;
  width: 8rem;
  height: 8rem;
  z-index: 2
}

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask:before,
mcd-referral-bonus-goals .achievement-bonus-box .lock-mask:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: .8rem
}

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask {
  border: 2px solid var(--referral-partner-mask-border-complete, #6ecc60)
}

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask:before {
  background: var(--referral-partner-mask-bg-complete, rgba(92, 161, 59, .7))
}

mcd-referral-bonus-goals .achievement-bonus-box .lock-mask:before {
  background: var(--referral-partner-mask-bg-lock, rgba(0, 0, 0, .55))
}

mcd-referral-bonus-goals .achievement-icon {
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  flex: 0 0 18.6666666667rem
}

mcd-referral-bonus-goals .achievement-bonus-group {
  width: 100%
}

mcd-referral-bonus-goals .achievement-bonus-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.1333333333rem
}

mcd-referral-bonus-goals .achievement-bonus-title p+p {
  margin: 0
}

mcd-referral-bonus-goals .progress-bar .bar {
  background: var(--referral-partner-achievement-progress-bar-bg, var(--form-input-bg));
  box-shadow: none
}

mcd-referral-bonus-goals .progress-bar .bar-inner {
  background: var(--referral-partner-achievement-progress-bar-active, linear-gradient(to right, #777777 0%, #222222 100%));
  box-shadow: none
}

mcd-referral-bonus-goals .progress-bar .bar-inner:after {
  display: none
}

mcd-referral-bonus-goals .menu-box .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.8666666667rem 0 1.3333333333rem;
  border-bottom: 0 !important
}

mcd-referral-bonus-goals .menu-box .title-group h2 {
  max-width: 60%
}

mcd-referral-bonus-goals .menu-box .detail-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 1.3333333333rem;
  background: var(--referral-partner-detail-btn-bg, var(--secondary));
  padding: 2.1333333333rem 2.6666666667rem;
  width: auto;
  max-width: 40%;
  height: 9.3333333333rem
}

mcd-referral-bonus-goals .menu-box .detail-btn img {
  width: 4rem;
  height: 4rem
}

mcd-referral-bonus-goals .menu-box .detail-btn span {
  display: inline-block;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--referral-partner-detail-btn-txt, var(--color-text));
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

mcd-referral-bonus-goals .menu-box .detail-btn img+span {
  margin-left: 1.3333333333rem
}

mcd-referral-bonus-goals .pop-bg {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: transparent
}

mcd-referral-bonus-goals-detail {
  display: flex;
  justify-content: center;
  align-items: center
}

mcd-referral-bonus-goals-detail .referral-reward-bonus {
  border-radius: 2.6666666667rem;
  background: var(--referral-partner-bonus-goals-detail-bg, var(--form-box-bg))
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close {
  cursor: pointer;
  opacity: 1;
  position: relative;
  width: 5rem;
  height: 5rem;
  position: absolute;
  z-index: 2;
  margin: 2.6666666667rem;
  background: transparent
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:hover {
  opacity: .7
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:after,
mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:before {
  content: "";
  display: block;
  height: 80%;
  width: .5rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  background-color: var(--referral-partner-bonus-goals-detail-btn-close, var(--color-title));
  transform-origin: 50% 50%
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:after {
  transform: translateY(-50%) rotate(-45deg)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:before {
  transform: translateY(-50%) rotate(45deg)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:before,
mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:after {
  border-radius: 10rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  height: 13.3333333333rem;
  margin: 4.2666666667rem 4.2666666667rem 0;
  background: transparent;
  color: var(--referral-partner-bonus-goals-detail-title-txt, var(--color-text))
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .title p {
  width: 50%;
  padding: 0 2.1333333333rem;
  font-size: 3.4666666667rem;
  text-align: center;
  background: transparent;
  pointer-events: none
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 3.2rem 2.1333333333rem;
  margin: 2.6666666667rem 0
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line p {
  display: inline-flex;
  padding: 0 2.6666666667rem;
  width: auto;
  justify-content: center;
  font-size: 3.4666666667rem;
  text-align: center;
  background-color: transparent;
  color: var(--referral-partner-bonus-goals-detail-sub-title-txt, var(--color-text))
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line:before,
mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line:after {
  content: "";
  display: inline-flex;
  width: 100%;
  height: .2666666667rem;
  background-color: var(--referral-partner-bonus-goals-detail-sub-title-border, rgba(153, 153, 153, .3));
  flex: 1
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line:first-child {
  margin-top: 0
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list {
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 0 0 4.2666666667rem;
  padding: 0 4.2666666667rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li {
  display: flex
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li+li {
  margin-top: 2.1333333333rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 3.2rem 2.1333333333rem;
  color: var(--referral-partner-reward-pop-list-txt, var(--color-text));
  font-size: 3.7333333333rem;
  background: var(--referral-partner-reward-pop-list-bg-default, #ffb80c)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span:first-child {
  border-radius: 1.3333333333rem 0 0 1.3333333333rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span:last-child {
  border-radius: 0 1.3333333333rem 1.3333333333rem 0
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span+span {
  margin-left: 2.1333333333rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(1) span {
  background: var(--referral-partner-reward-pop-list-bg-first, #fff8c7)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(2) span {
  background: var(--referral-partner-reward-pop-list-bg-second, #fff4ab)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(3) span {
  background: var(--referral-partner-reward-pop-list-bg-third, #fdf1a1)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(4) span {
  background: var(--referral-partner-reward-pop-list-bg-fourth, #fff08e)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(5) span {
  background: var(--referral-partner-reward-pop-list-bg-fifth, #ffec6b)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(6) span {
  background: var(--referral-partner-reward-pop-list-bg-sixth, #ffe958)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(7) span {
  background: var(--referral-partner-reward-pop-list-bg-seventh, #ffd958)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(8) span {
  background: var(--referral-partner-reward-pop-list-bg-eighth, #ffd23b)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(9) span {
  background: var(--referral-partner-reward-pop-list-bg-ninth, #ffc63b)
}

mcd-referral-success-pop .show {
  opacity: 1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px)
}

mcd-referral-success-pop .show .register-success-wrap {
  padding: 0;
  width: 42.6666666667rem;
  height: 42.6666666667rem;
  border-radius: 2.1333333333rem;
  background-color: var(--referral-partner-pop-bg, var(--form-box-bg))
}

mcd-referral-success-pop .show .success-checkmark {
  width: 16.2666666667rem;
  height: 21.3333333333rem
}

mcd-referral-success-pop .show .success-checkmark .check-icon {
  width: 14.1333333333rem;
  height: 14.1333333333rem;
  border: 1.0666666667rem solid var(--referral-partner-success-check-icon-border, var(--color-success))
}

mcd-referral-success-pop .show .success-checkmark .check-icon:after {
  top: 0;
  left: 8rem;
  width: 16rem;
  animation: rotate-circle 4s ease-in;
  border-radius: 0 26.6666666667rem 26.6666666667rem x 0
}

mcd-referral-success-pop .show .success-checkmark .check-icon:before,
mcd-referral-success-pop .show .success-checkmark .check-icon:after {
  background: transparent
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-fix {
  background-color: transparent
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-line {
  height: 1.3333333333rem;
  border-radius: .5333333333rem;
  background-color: var(--referral-partner-success-check-icon-color, var(--color-success))
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-line.line-tip {
  top: 8rem;
  left: 2.1333333333rem;
  width: 4.8rem;
  transform: rotate(46deg);
  animation: invite-partner-icon-line-tip .7s
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-line.line-long {
  top: 6.6666666667rem;
  right: 1.6rem;
  width: 8.5333333333rem;
  transform: rotate(-50deg);
  animation: invite-partner-icon-line-long .7s
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-circle {
  top: -.5997001499vmax;
  left: -.5997001499vmax;
  width: 14.1333333333rem;
  height: 14.1333333333rem;
  border: transparent
}

mcd-referral-success-pop .show .register-success-cont .top-inner h4 {
  margin: 0
}

mcd-referral-bonus-terms-conditions .referral-cont {
  font-size: 3.2rem;
  line-height: 1.2
}

mcd-referral-bonus-terms-conditions .referral-cont li {
  display: flex;
  color: var(--referral-partner-terms-condition-list-txt, var(--color-text))
}

mcd-referral-bonus-terms-conditions .referral-cont li i {
  color: var(--referral-partner-terms-condition-list-decimal, var(--color-text))
}

mcd-referral-bonus-terms-conditions .referral-cont li+li {
  margin-top: 4.8rem
}

.referral-reward-bonus-popup .pop-wrap.ani {
  display: flex;
  flex-direction: column
}

.pwa-download {
  position: fixed;
  bottom: 13.3333333333rem;
  width: 100%;
  z-index: 81
}

.pwa-download.pop-active {
  z-index: 8000
}

.pwa-download .pwa-download-bg {
  background: var(--pwa-download-bg);
  width: 100%;
  height: 18.6666666667rem;
  border-radius: 1.0666666667rem 1.0666666667rem 0 0
}

.pwa-download .pwa-download-bg .pwa-download-container {
  height: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.pwa-download .pwa-download-bg .pwa-texture {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-repeat: no-repeat;
  -webkit-background-position: center;
  -webkit-background-size: contain;
  inset: 0;
  pointer-events: none
}

.pwa-download .pwa-close-btn {
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  cursor: pointer;
  width: 6.4rem;
  height: 6.4rem;
  background-color: var(--pwa-close-icon-bg);
  margin-left: 2.1333333333rem
}

.pwa-download .pwa-hot {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-repeat: no-repeat;
  -webkit-background-position: center;
  -webkit-background-size: contain;
  width: 10%;
  height: 30%;
  top: .8rem;
  left: 8.5333333333rem;
  z-index: 2
}

.pwa-download .pwa-icon {
  position: relative;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  top: .5333333333rem;
  left: .5333333333rem
}

.pwa-download .pwa-icon img {
  width: 100%
}

.pwa-download .pwa-icon-frame {
  position: relative;
  width: 12.8rem;
  height: 12.8rem
}

.pwa-download .pwa-icon-frame:before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: var(--pwa-icon-frame);
  border-radius: .5333333333rem
}

.pwa-download .pwa-content {
  width: 37.8666666667rem;
  height: auto;
  font-size: 3.7333333333rem
}

.pwa-download .pwa-content .pwa-name {
  color: var(--pwa-name-text);
  margin-bottom: 1.0666666667rem;
  max-width: 40rem;
  word-wrap: break-word;
  line-height: 1.2
}

.pwa-download .pwa-content .start {
  width: 3.7333333333rem;
  height: 3.7333333333rem
}

.pwa-download .download-btn {
  width: 33.0666666667rem;
  height: 9.8666666667rem;
  margin-right: 2.1333333333rem;
  background: var(--pwa-download-btn-bg, var(--primary));
  cursor: pointer;
  font-size: 3.7333333333rem
}

.pwa-download .download-btn p {
  text-align: center;
  line-height: 9.8666666667rem;
  color: var(--pwa-download-btn-text)
}

.pwa-download .ios-pwa-pop {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 9001;
  bottom: 0;
  top: auto;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 95vh;
  overflow: hidden;
  transform: none;
  background: var(--ios-pop-bg, var(--pop-bg));
  border-radius: 3.2rem 3.2rem 0 0
}

.pwa-download .ios-pwa-pop p {
  color: var(--ios-title-text-color)
}

.pwa-download .ios-pwa-pop.active {
  animation: popIn .3s cubic-bezier(.4, 0, .2, 1) forwards
}

.pwa-download .ios-pwa-pop.closing {
  animation: popOut .3s cubic-bezier(.4, 0, .2, 1) forwards
}

.pwa-download .ios-pwa-pop .pwa-close-btn {
  position: absolute;
  right: 2%;
  top: 2%;
  width: 9.3333333333rem;
  height: 9.3333333333rem
}

.pwa-download .ios-pwa-pop .header {
  width: 100%;
  height: 26.6666666667rem;
  background: var(--ios-pop-header-bg);
  border-radius: 3.2rem 3.2rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.pwa-download .ios-pwa-pop .title {
  margin-left: 2.1333333333rem
}

.pwa-download .ios-pwa-pop ul {
  margin: 2.4rem 7.4666666667rem 6.6666666667rem;
  height: inherit
}

.pwa-download .ios-pwa-pop .pop-content {
  flex: 1 1 auto;
  overflow-y: auto
}

.pwa-download .ios-pwa-pop li {
  position: relative;
  display: flex;
  width: 100%;
  padding: .5333333333rem;
  color: var(--ios-title-text-color);
  font-family: "Source Sans 3", sans-serif;
  font-size: 4.2666666667rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center
}

.pwa-download .ios-pwa-pop li+li {
  margin-top: 14.9333333333rem
}

.pwa-download .ios-pwa-pop li:after {
  content: "";
  position: absolute;
  left: 2%;
  right: 1%;
  bottom: -32%;
  height: .2666666667rem;
  background-color: var(--ios-line-color)
}

.pwa-download .ios-pwa-pop li:last-child:after {
  display: none
}

.pwa-download .ios-pwa-pop li:first-child:after {
  bottom: -65%
}

.pwa-download .ios-pwa-pop .list-info {
  position: relative;
  display: flex
}

.pwa-download .ios-pwa-pop .item-num {
  position: relative;
  display: inline-flex;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  background: var(--ios-inside-number-bg, var(--secondary));
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0
}

.pwa-download .ios-pwa-pop .item-num:after {
  content: "";
  display: block;
  position: absolute;
  top: -.5333333333rem;
  left: -.5333333333rem;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  background: var(--ios-outside-number-bg, var(--primary));
  z-index: -1;
  border-radius: 50%
}

.pwa-download .ios-pwa-pop .item-num i {
  display: inline-flex;
  flex-shrink: 0;
  font-size: 2.9333333333rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase
}

.pwa-download .ios-pwa-pop .item-num span {
  display: inline-flex;
  flex-shrink: 0;
  font-size: 5.3333333333rem;
  font-weight: 600;
  color: var(--ios-num-text-color, var(--ios-title-text-color))
}

.pwa-download .ios-pwa-pop .item-txt {
  position: relative;
  display: inline-flex;
  margin-left: 4.2666666667rem;
  flex-grow: 1;
  font-size: 4rem;
  align-items: center;
  justify-content: flex-start
}

.pwa-download .ios-pwa-pop .item-txt p {
  display: block;
  width: 100%;
  align-items: center;
  line-height: 1.5
}

.pwa-download .ios-pwa-pop .item-txt strong {
  display: inline-block;
  padding: 2.1333333333rem 2.6666666667rem;
  background: var(--ios-strong-text-bg, var(--primary));
  box-shadow: 0 0 .5333333333rem #ffffffb3 inset;
  border-radius: 1.3333333333rem;
  margin: 0 1.3333333333rem;
  line-height: 1;
  color: var(--ios-strong-text-color, var(--ios-title-text-color))
}

.pwa-download .ios-pwa-pop .item-txt strong:before,
.pwa-download .ios-pwa-pop .item-txt strong:after {
  position: relative;
  display: block
}

.pwa-download .ios-pwa-pop .item-txt strong:before {
  content: "\201c";
  float: left;
  margin-right: .5333333333rem
}

.pwa-download .ios-pwa-pop .item-txt strong:after {
  content: "\201d";
  float: right;
  margin-left: .5333333333rem
}

.pwa-download .ios-pwa-pop .item-img {
  margin-top: 2.6666666667rem;
  position: relative
}

.pwa-download .ios-pwa-pop .item-img .focus {
  position: absolute;
  display: flex;
  top: 2.4rem;
  width: 8.5333333333rem;
  height: 8.5333333333rem;
  justify-content: center;
  align-items: center
}

.pwa-download .ios-pwa-pop .item-img .focus:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ios-focus-top-bg, var(--secondary));
  z-index: 2
}

.pwa-download .ios-pwa-pop .item-img .focus:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: pulsate 1.5s ease-out;
  animation-iteration-count: infinite;
  background: var(--ios-focus-top-bg, var(--secondary));
  z-index: 1
}

@keyframes pulsate {
  0% {
    transform: scale(.4);
    opacity: 0
  }

  50% {
    opacity: 1;
    filter: none
  }

  to {
    transform: scale(1.5);
    opacity: 0
  }
}

.pwa-download .ios-pwa-pop .step-img {
  width: 84.8rem;
  height: 12.8rem
}

.pwa-download .ios-pwa-pop .share-icon,
.pwa-download .ios-pwa-pop .add-home-screen-icon,
.pwa-download .ios-pwa-pop .add {
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  width: 8rem;
  height: 8rem;
  background-color: var(--ios-icon-bg);
  position: relative;
  z-index: 3;
  flex-shrink: 0
}

.pwa-download .ios-pwa-pop .step-share .item-img .focus {
  left: 42%
}

.pwa-download .ios-pwa-pop .step-home-screen .item-img .focus,
.pwa-download .ios-pwa-pop .press-add-button .item-img .focus {
  left: 84%
}

.pwa-download .pop-bg.active {
  display: block
}

.pwa-download .pop-bg.closing {
  display: none
}

.is-desktop .pwa-download {
  width: 100rem;
  right: 1%;
  bottom: 30px
}

.is-desktop .pwa-download-bg {
  border-radius: 1.0666666667rem
}

.is-desktop .ios-pwa-pop {
  max-width: 104rem;
  max-height: 90vh;
  height: -moz-fit-content;
  height: fit-content;
  transform: translate(-50%, -50%) translateY(100%);
  top: 50%;
  left: 50%;
  border-radius: 3.2rem;
  will-change: transform, opacity
}

.is-desktop .ios-pwa-pop .header {
  border-radius: 3.2rem
}

.is-desktop .ios-pwa-pop.active {
  animation: desktopPopIn .3s cubic-bezier(.4, 0, .2, 1) forwards
}

.is-desktop .ios-pwa-pop.closing {
  animation: desktopPopOut .3s cubic-bezier(.4, 0, .2, 1) forwards
}

@keyframes desktopPopIn {
  0% {
    transform: translate(-50%, -50%) translateY(100%);
    opacity: 0
  }

  to {
    transform: translate(-50%, -50%) translateY(0);
    opacity: 1
  }
}

@keyframes desktopPopOut {
  0% {
    transform: translate(-50%, -50%) translateY(0);
    opacity: 1
  }

  to {
    transform: translate(-50%, -50%) translateY(100%);
    opacity: 0
  }
}

@keyframes popIn {
  0% {
    transform: translateY(100%);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes popOut {
  0% {
    transform: translateY(0);
    opacity: 1
  }

  to {
    transform: translateY(100%);
    opacity: 0
  }
}

html,
body {
  min-height: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  display: flex;
  position: relative;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--content-bg);
  font-family: var(--custom-font), var(--custom-serif);
  font-weight: 400
}

body.menu-active {
  height: 100%;
  overflow: hidden
}

body.no-scroll {
  overflow: hidden
}

.content {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: auto;
  padding-top: 13.3333333333rem;
  background-color: var(--content-bg)
}

.cricket .announcement-row {
  width: auto;
  border-radius: 1.3333333333rem
}

.player-content {
  padding: 13.3333333333rem 0 0
}

.menu-box {
  position: relative;
  height: auto;
  margin: 4.2666666667rem;
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--form-box-bg)
}

.menu-box .title {
  width: 100%;
  line-height: 8rem
}

.menu-box .title h2 {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-left: 3.2rem;
  color: var(--pop-transfer-title);
  font-size: 4rem;
  font-weight: 500
}

.menu-box .title h2:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: .5333333333rem;
  background: var(--pop-transfer-border);
  vertical-align: middle
}

.menu-box .title span {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  line-height: normal;
  margin: 2.1333333333rem 0;
  word-wrap: break-word;
  word-break: keep-all;
  white-space: normal
}

.menu-box .title i {
  display: flex;
  color: var(--pop-transfer-tips);
  font-size: 3.2rem;
  font-weight: 500;
  white-space: nowrap
}

.menu-box .title+.input-group {
  padding: 2.6666666667rem 0
}

.menu-box .title+.input-group .clear {
  top: 9.0666666667rem
}

.fixed-tab {
  padding-top: 26.6666666667rem
}

.fixed-tab .tab-btn-section:not(.no-fix) {
  position: fixed;
  z-index: 4;
  top: 13.3333333333rem
}

.fixed-tab .tab-btn-wrap {
  box-shadow: none
}

.fixed-tab .search-tab {
  top: 0
}

.fixed-tab .promotion .promotion-main {
  padding: 0 4.2666666667rem
}

.content-main {
  position: relative;
  left: 0;
  width: 100%;
  height: auto
}

.content-main:after {
  content: "";
  display: block;
  clear: both
}

.content-main .content-box {
  width: 100%
}

.button {
  position: relative;
  width: auto;
  height: 12.8rem;
  border-radius: 1.3333333333rem;
  color: var(--btn-main-txt);
  font-size: 5.3333333333rem;
  font-weight: 500;
  line-height: 12.8rem;
  text-align: center;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%);
  text-shadow: none
}

.button a {
  display: block;
  padding: 0 4.2666666667rem;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap
}

.button.gray {
  background: var(--btn-main-bg-disabled)
}

.button.gray-ol {
  border: var(--btn-main-bg-disabled);
  border-width: .2666666667rem;
  border-style: solid;
  background-color: transparent
}

.button.btn-primary {
  background: var(--btn-main-bg)
}

.button.btn-primary a {
  color: var(--btn-main-txt)
}

.button.btn-primary.btn-disabled {
  background: var(--btn-main-bg-disabled);
  text-shadow: 0 .2666666667rem .8rem color-mix(in srgb, var(--btn-main-txt-shadow-disabled), transparent 50%);
  pointer-events: none;
  color: var(--btn-main-txt-disabled)
}

.button.btn-primary.btn-disabled a {
  color: var(--btn-main-txt-disabled)
}

.button.btn-secondary {
  background: var(--btn-secondary-bg)
}

.button.btn-secondary a {
  color: var(--btn-secondary-txt)
}

.button.btn-secondary.btn-disabled {
  background: var(--btn-secondary-bg-disabled);
  pointer-events: none
}

.button.btn-secondary.btn-disabled a {
  color: var(--btn-secondary-txt-disabled)
}

.pointer-none {
  border-radius: 1.3333333333rem
}

.prompt {
  display: block;
  width: 100%;
  color: var(--form-input-txt-placeholder);
  font-size: 3.4666666667rem;
  text-align: center;
  padding: 4.2666666667rem 0
}

.top-banner {
  display: block;
  position: relative;
  height: 24rem
}

.top-banner .top-banner_img {
  width: calc(100% - 3.7333333333rem);
  height: 19.7333333333rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 1.8666666667rem
}

.top-banner .btn-voucher {
  left: -1.3333333333rem;
  bottom: 8.5333333333rem
}

.top-banner .btn-voucher .voucher-content {
  max-width: 94.9333333333rem
}

.top-banner-wrapper {
  position: relative
}

.top-banner-wrapper.unit-3 .carousel-wrap {
  width: 245.6%;
  left: 50%;
  transform: translate(-50%);
  max-width: none
}

.top-banner-wrapper.unit-3 .carousel-wrap .item {
  overflow: visible
}

.banner .carousel-wrap .item {
  padding: 0
}

.banner .carousel-wrap .item .item-pic {
  height: 42.6666666667rem
}

.banner .carousel-wrap.siblings .item {
  padding: 1.3333333333rem 1.3333333333rem 3.4666666667rem
}

header {
  display: flex;
  position: fixed;
  top: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.3333333333rem;
  overflow: hidden;
  transition: all .3s
}

header.normal {
  background: var(--header-bg)
}

header.normal .logo,
header.normal .menu-btn,
header.normal .service-btn,
header.normal .forum-btn,
header.normal .app-download,
header.normal .inbox-btn {
  display: flex
}

header.login .login-btn {
  display: flex
}

header.member {
  height: 13.3333333333rem;
  background: var(--header-bg)
}

header.member .back-btn,
header.member .header-title {
  display: flex
}

header.member .header-title {
  color: var(--header-title);
  font-size: 4.8rem;
  text-align: center
}

header.member .back-btn {
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  background: var(--header-back-icon-color)
}

header.member .back-btn a {
  display: block;
  width: 100%;
  height: 100%
}

header.player {
  background: var(--header-bg)
}

header.player .header-title {
  color: var(--header-title)
}

header.player .back-btn {
  background: var(--header-back-icon-color)
}

header.register {
  background: var(--header-bg-tab)
}

header.register .header-title {
  color: var(--header-title)
}

header.register .service-btn,
header.register .forum-btn {
  display: none
}

header.register.active {
  background: var(--header-bg-tab)
}

header.editor {
  background: var(--header-bg-tab)
}

header.editor .editor-btn {
  display: flex
}

header.editor .header-title {
  color: var(--header-title)
}

header.editor .back-btn {
  background: var(--header-back-icon-color)
}

header.editor.active {
  background: var(--header-bg-tab)
}

header.vip {
  background: var(--header-bg-none);
  font-family: var(--custom-font), var(--custom-serif)
}

header.vip .service-btn {
  display: none
}

header.vip .forum-btn {
  display: none
}

header.vip .back-btn {
  background: var(--header-vip-title)
}

header.vip .header-title {
  color: var(--header-vip-title);
  font-size: 5.3333333333rem
}

header.vip.active {
  background: var(--header-vip-bg-active)
}

header.vip.active .header-title {
  color: var(--header-vip-title-active)
}

header.slot {
  border-bottom: 0;
  background: var(--header-bg-gradient)
}

header.slot .back-btn {
  background-color: var(--header-slot-title)
}

header.slot .header-title {
  color: var(--header-slot-title);
  font-size: 4.2666666667rem;
  font-weight: 500
}

header.slot .header-right-btn-group .layout-icon,
header.slot .header-right-btn-group .filter {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 13.3333333333rem;
  height: 13.3333333333rem
}

header.slot .header-right-btn-group .layout-icon g {
  stroke: var(--header-slot-title)
}

header.slot .header-right-btn-group .filter span {
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  background-color: var(--header-slot-title);
  margin-bottom: .5333333333rem;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat
}

header.slot .header-right-btn-group .badge {
  display: flex;
  position: absolute;
  top: 1.0666666667rem;
  right: 0;
  align-items: center;
  justify-content: center;
  width: 5.8666666667rem;
  height: 5.8666666667rem;
  border-radius: 50%;
  background: var(--header-badge-bg);
  color: var(--header-badge-txt);
  font-size: 3.4666666667rem;
  font-weight: 500
}

header.slot.active {
  transition: all 1s ease;
  background: var(--header-slot-bg-active)
}

header.slot.active .back-btn {
  background-color: var(--header-slot-title) !important
}

header.slot.active .header-title {
  color: var(--header-slot-title)
}

header.slot.active .header-right-btn-group .layout-icon g {
  stroke: var(--header-slot-title)
}

header.slot.active .header-right-btn-group .filter:before {
  background-color: var(--header-slot-title)
}

header.cricket,
header.normal-logo-left {
  height: 13.3333333333rem;
  margin-top: 0;
  background: var(--header-bg)
}

header.cricket .menu-btn,
header.normal-logo-left .menu-btn {
  display: flex
}

header.cricket .logo,
header.normal-logo-left .logo {
  display: flex;
  left: 13.3333333333rem;
  transform: translate(0);
  background-position: left
}

header.cricket a,
header.cricket .cricket-money,
header.cricket .exp,
header.normal-logo-left a,
header.normal-logo-left .cricket-money,
header.normal-logo-left .exp {
  padding: 1.0666666667rem 2.1333333333rem;
  border: 0;
  font-size: 3.2rem
}

header.cricket .login,
header.normal-logo-left .login {
  min-width: max-content;
  background: var(--header-login-btn-bg);
  color: var(--header-login-btn-txt)
}

header.cricket .register,
header.normal-logo-left .register {
  min-width: max-content;
  background: var(--header-register-btn-bg);
  color: var(--header-register-btn-txt)
}

header.cricket .deposit,
header.normal-logo-left .deposit {
  min-width: max-content;
  background: var(--header-deposit-btn-bg);
  color: var(--header-deposit-btn-txt)
}

header.cricket a,
header.normal-logo-left a {
  border-radius: 1.3333333333rem
}

header.cricket .cricket-money,
header.cricket .exp,
header.normal-logo-left .cricket-money,
header.normal-logo-left .exp {
  display: inline-flex;
  align-items: center;
  padding: 1.0666666667rem;
  -webkit-user-select: none;
  user-select: none
}

header.cricket .cricket-money span,
header.cricket .exp span,
header.normal-logo-left .cricket-money span,
header.normal-logo-left .exp span {
  margin-left: 1.0666666667rem;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.1333333333rem;
  font-weight: 700
}

header.cricket .cricket-money,
header.normal-logo-left .cricket-money {
  max-width: 32rem;
  background: var(--header-login-btn-bg);
  border-radius: 1.3333333333rem 0 0 1.3333333333rem;
  color: var(--header-login-btn-txt)
}

header.cricket .exp,
header.normal-logo-left .exp {
  max-width: 26.6666666667rem;
  background: var(--header-exp-btn-bg);
  border-radius: 0 1.3333333333rem 1.3333333333rem 0;
  color: var(--header-exp-btn-txt)
}

header.cricket .exp .negative,
header.normal-logo-left .exp .negative {
  color: var(--color-danger)
}

header.cricket .icon-refresh {
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  background: var(--header-refresh-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  margin-right: 1.0666666667rem
}

header.cricket .icon-refresh.active {
  animation: rotate 1s forwards
}

header.active {
  transition: all .3s ease;
  background: var(--header-bg-active)
}

header.no-shadow {
  box-shadow: none
}

header .logo,
header .header-title,
header .menu-btn,
header .forum-btn,
header .back-btn,
header .login-btn,
header .editor-btn,
header .app-download,
header .inbox-btn {
  display: none
}

header.player.editor .service-btn,
header.player.editor .forum-btn {
  display: none
}

header.player .header-title,
header.player .service-btn,
header.player .forum-btn,
header.player .back-btn,
header.register .header-title,
header.register .service-btn,
header.register .forum-btn,
header.register .back-btn {
  display: flex
}

header.player .service-btn:before,
header.register .service-btn:before {
  background-color: var(--header-service-icon-color)
}

header.player .service-btn p,
header.register .service-btn p {
  color: var(--header-service-icon-color)
}

header.player .forum-btn:before,
header.register .forum-btn:before {
  background-color: var(--header-service-icon-color)
}

header.player .forum-btn p,
header.register .forum-btn p {
  color: var(--header-service-icon-color)
}

header .header-left-btn-group {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start
}

header .header-right-btn-group {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center
}

header .header-right-btn-group .language-select {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 12rem;
  max-width: 13.3333333333rem;
  background: none
}

header .header-right-btn-group .language-select img {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 100%;
  box-shadow: 0 0 .4rem #0006
}

header .header-right-btn-group .main-wallet {
  display: inline-flex;
  align-items: center;
  color: var(--header-title)
}

header .header-right-btn-group .main-wallet .icon-refresh {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: 2.1333333333rem;
  background: var(--header-title);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

header .header-right-btn-group .main-wallet .icon-refresh.active {
  animation: rotate .5s forwards
}

header .header-right-btn-group .main-wallet .item-icon {
  position: relative;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  border-radius: .8rem;
  background: var(--primary);
  margin-left: 2.1333333333rem
}

header .header-right-btn-group .main-wallet .item-icon:after {
  content: "+";
  position: absolute;
  left: 18%;
  line-height: 4.2666666667rem;
  color: var(--header-bg);
  font-size: 5.8666666667rem
}

header .logo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 26.6666666667rem;
  height: 100%;
  transform: translate(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  text-indent: -2666.4rem
}

header .header-title {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  transform: translate(-50%);
  font-size: 4.8rem;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap
}

.menu-btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  padding: 0 4.2666666667rem
}

.menu-btn ul li {
  width: 5.3333333333rem;
  height: .5333333333rem;
  margin: 1.0666666667rem 0;
  border-radius: .5333333333rem;
  background-color: var(--header-burger-icon-color)
}

.service-btn {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 12rem;
  max-width: 18.6666666667rem;
  height: 13.3333333333rem
}

.service-btn .item-icon {
  width: 6.6666666667rem;
  height: 5.3333333333rem;
  margin-bottom: .5333333333rem;
  background-color: var(--header-service-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain
}

.service-btn p {
  color: var(--header-service-icon-color);
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.service-btn p a {
  color: var(--header-service-icon-color)
}

.forum-btn {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 12rem;
  max-width: 17.3333333333rem;
  height: 13.3333333333rem
}

.forum-btn p {
  color: var(--header-service-icon-color);
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all
}

.forum-btn p a {
  color: var(--header-service-icon-color)
}

.login-btn {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 12rem;
  max-width: 17.3333333333rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background: none
}

.login-btn p {
  color: var(--header-service-icon-color);
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all
}

.login-btn p a {
  color: var(--header-service-icon-color)
}

.back-btn,
.editor-btn {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 13.3333333333rem;
  height: 13.3333333333rem
}

.back-btn a,
.editor-btn a {
  display: block;
  width: 100%;
  height: 100%
}

.back-btn {
  background: var(--header-back-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 30%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 30%
}

.editor-btn {
  background: var(--mail-editor-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 35%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 35%
}

.app-download {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 12rem;
  max-width: 17.3333333333rem;
  height: 13.3333333333rem
}

.app-download p {
  color: var(--header-service-icon-color);
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all
}

.app-download p a {
  color: var(--header-service-icon-color)
}

.nav-category {
  display: flex;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  background: var(--nav-bg);
  border-radius: 1.3333333333rem
}

.nav-category:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 1.3333333333rem;
  background: var(--content-bg)
}

.nav-category:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: .4rem;
  background: var(--nav-underline)
}

.nav-category .btn {
  position: relative;
  width: 100%;
  margin-top: 2.6666666667rem;
  transition: all .3s
}

.nav-category .btn a {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-decoration: none
}

.nav-category .btn .icon-list {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  margin: 0 auto 3.7333333333rem;
  padding-top: .5333333333rem;
  border-radius: 100%;
  background: var(--nav-category-bg);
  box-shadow: .2666666667rem .2666666667rem .2666666667rem 0 var(--nav-category-shadow), inset 0 1.3333333333rem 1.3333333333rem 0 var(--nav-category-inset-shadow)
}

.nav-category .btn .icon-list img {
  display: none
}

.nav-category .btn .icon-list video {
  display: block;
  width: 8rem;
  height: 8rem
}

.nav-category .btn p {
  margin-bottom: 3.2rem;
  color: var(--nav-category-txt);
  font-size: 3.2rem;
  font-weight: 600;
  text-align: center
}

.nav-category.active {
  position: fixed;
  z-index: 3;
  top: 12.8rem;
  animation: slide-out-top .2s cubic-bezier(.55, .085, .68, .53) both
}

.nav-category.active .btn p {
  display: none
}

@keyframes slide-out-top {
  0% {
    height: 88px;
    opacity: 1
  }

  to {
    height: 64px;
    opacity: 1
  }
}

.nav-category .slick-current .icon-list {
  z-index: 2;
  padding-top: 0;
  transform: translateY(-2px) scale(1.25);
  transition: transform .5s ease;
  background: var(--nav-category-bg-active);
  box-shadow: inset -.2666666667rem -.2666666667rem .5333333333rem #ffffff40, inset .2666666667rem .5333333333rem .5333333333rem #ffffff40
}

.nav-category .slick-current .icon-list img {
  display: block;
  width: 8rem;
  height: 8rem
}

.nav-category .slick-current .icon-list video {
  display: none
}

.nav-category .slick-current p {
  color: var(--nav-category-txt-active)
}

.nav-category .slick-current:before {
  background-color: var(--nav-category-bg-active-circle);
  box-shadow: 0 .5333333333rem 1.3333333333rem #0000004d
}

.nav-category .slick-current:after {
  display: block
}

.nav-category .tab-indicator {
  position: absolute;
  z-index: -1;
  top: 0;
  width: auto;
  min-width: 18.1818181818%;
  height: 100%;
  transform: translate(0);
  transition: transform .3s ease-out;
  border-radius: 4rem 4rem 13.3333333333rem 13.3333333333rem
}

.nav-category .tab-indicator:after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  width: 100%;
  height: 18.1333333333rem;
  background: var(--content-bg);
  mask: url(/assets/images/tab-indicator.svg) no-repeat center/100%;
  -webkit-mask: url(/assets/images/tab-indicator.svg) no-repeat center/100%
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 0 2.1333333333rem;
  background-color: var(--footer-bg)
}

.footer-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 4.2666666667rem 0;
  text-align: left;
  color: var(--footer-txt)
}

.footer-top .pay {
  width: 100%;
  height: auto
}

.footer-top div {
  margin-bottom: 2.1333333333rem
}

.footer-top div li {
  display: inline-block;
  margin: 1.0666666667rem 0
}

.footer-top div li+li {
  margin-right: 2.1333333333rem
}

.footer-top div li:first-child {
  margin-right: 2.1333333333rem
}

.footer-top div h2 {
  margin: 0 0 1.0666666667rem;
  color: var(--footer-title);
  font-size: 3.2rem
}

.footer-top div img {
  height: 4.8rem;
  width: auto;
  aspect-ratio: 1/1 auto
}

.footer-top div a {
  display: block
}

.footer-top ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--footer-area-bg);
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.footer-top .pay-normal-size {
  flex: 0 0 100%
}

.footer-top .pay-normal-size li:nth-child(4n) {
  margin: 0
}

.footer-top .pay-normal-size img {
  height: 6.4rem
}

.footer-top .safe,
.footer-top .license,
.footer-top .partner {
  flex: 0 0 47.6%
}

.footer-top .safe img,
.footer-top .license img,
.footer-top .partner img {
  height: 7.4666666667rem
}

.footer-top .license,
.footer-top .partner {
  flex: 0 0 50%;
  margin-right: 2.1333333333rem
}

.footer-top .footer-social {
  flex: 1 0 100%
}

.footer-top .footer-social ul {
  display: grid;
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(7, 1fr)
}

.footer-top .footer-social ul li {
  margin: 0;
  text-align: center
}

.footer-top .footer-social img {
  height: 8rem;
  width: auto
}

.footer-top .about-us {
  width: 100%;
  flex: 1 0 50%
}

.footer-top .about-us ul {
  display: grid;
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(3, 1fr)
}

.footer-top .about-us ul li {
  display: inline-grid;
  position: relative;
  margin: 1.0666666667rem 0;
  padding: 0 1.0666666667rem
}

.footer-top .about-us ul li+:nth-child(3n):after {
  display: none
}

.footer-top .about-us ul li:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(100% + 1.0666666667rem);
  width: .2666666667rem;
  height: 100%;
  background-image: linear-gradient(to bottom, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-y;
  background-size: 1.6rem 1.6rem
}

.footer-top .about-us a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--footer-link);
  font-size: 3.4666666667rem;
  text-align: center;
  text-decoration: underline
}

.footer-column div:nth-child(2n-1) {
  margin-right: 0
}

.footer-column .pay {
  flex: 1 0 100%;
  margin: 0 0 2.6666666667rem
}

.footer-column .safe,
.footer-column .footer-social {
  flex: 1 0 40%
}

.float-banner {
  position: fixed;
  bottom: 13.3333333333rem;
  left: 2.6666666667rem;
  filter: drop-shadow(0 0 1.6rem var(--offset-shadow))
}

.float-banner .close {
  position: absolute;
  z-index: 2;
  top: -4rem;
  right: -4rem;
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  border-radius: 100%;
  opacity: 1;
  background-color: var(--content-bg)
}

.float-banner .close:before,
.float-banner .close:after {
  content: "";
  display: block;
  position: absolute;
  top: 2.9333333333rem;
  left: 1.3333333333rem;
  width: 4rem;
  height: .5333333333rem;
  background-color: var(--color-title)
}

.float-banner .close:before {
  transform: rotate(45deg)
}

.float-banner .close:after {
  transform: rotate(-45deg)
}

.float-banner a {
  display: inline-flex;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.float-banner img {
  width: auto;
  height: auto;
  min-width: 13.3333333333rem;
  min-height: 13.3333333333rem;
  max-width: 32rem;
  max-height: 32rem
}

.toolbar.beforelogin {
  display: flex;
  position: fixed;
  z-index: 112;
  inset-block-end: 0;
  width: 100%;
  height: 13.3333333333rem;
  box-shadow: 0 -.2666666667rem 1.0666666667rem var(--toolbar-shadow);
  gap: 1.0666666667rem;
  padding: 1.8666666667rem 2.1333333333rem;
  background: var(--toolbar-bg);
  margin: 0
}

.toolbar.beforelogin a {
  display: block;
  text-decoration: none
}

.toolbar.beforelogin .register-button,
.toolbar.beforelogin .login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 4rem;
  font-weight: 600;
  text-align: center;
  border-radius: 1.0666666667rem;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 2.6666666667rem
}

.toolbar.beforelogin .register-button a,
.toolbar.beforelogin .login-button a {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  text-shadow: none;
  text-align: center;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 3.4666666667rem;
  line-height: normal;
  margin: 0
}

.toolbar.beforelogin .login-button {
  background: var(--index-login-btn-bg);
  box-shadow: 0 1.0666666667rem 2.1333333333rem 0 var(--index-login-btn-shadow), inset 0 0 1.0666666667rem 0 var(--index-login-btn-shadow-inset)
}

.toolbar.beforelogin .login-button a {
  color: var(--index-login-btn-txt)
}

.toolbar.beforelogin .register-button {
  background: var(--index-register-btn-bg);
  box-shadow: 0 1.0666666667rem 2.1333333333rem 0 var(--index-register-btn-shadow), inset 0 0 1.0666666667rem 0 var(--index-register-btn-shadow-inset)
}

.toolbar.beforelogin .register-button a {
  color: var(--index-register-btn-txt)
}

.language-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1.3333333333rem 2.1333333333rem;
  background: var(--language-bg);
  text-align: center;
  width: 25.3333333333rem;
  flex: 0 0 25.3333333333rem;
  border-radius: 1.0666666667rem;
  box-sizing: border-box;
  gap: 2.1333333333rem;
  box-shadow: inset 0 0 1.0666666667rem var(--language-shadow)
}

.language-select p {
  color: var(--language-txt);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.language-select img {
  width: 6.6666666667rem;
  height: auto;
  border-radius: 100%;
  aspect-ratio: 1/1
}

.loading .banner-v1 .item-pic:before {
  animation: shine 1s infinite ease-in-out;
  background-image: linear-gradient(-45deg, transparent 0%, transparent 25%, color-mix(in srgb, var(--content-bg), white 10%) 50%, transparent 75%, transparent 100%);
  background-repeat: repeat-y;
  background-position: -360% 0%;
  background-size: 80% 100%;
  background-color: var(--content-bg);
  box-shadow: inset 0 0 1.3333333333rem #7e7878
}

.loading .recommend-card:before,
.loading .games-box:before,
.loading .icon-marquee:before,
.loading .card1 li:before,
.loading .card2 li:before {
  animation: shine 1s infinite ease-in-out;
  background-image: linear-gradient(-45deg, transparent 0%, transparent 25%, color-mix(in srgb, var(--content-bg), white 10%) 50%, transparent 75%, transparent 100%);
  background-repeat: repeat-y;
  background-position: -360% 0%;
  background-size: 80% 100%;
  background-color: var(--content-bg);
  box-shadow: inset 0 0 1.3333333333rem #7e7878
}

@keyframes shine {
  to {
    background-position: 640% 0
  }
}

.mcd-style .btn-loading {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit
}

.mcd-style .btn-loading:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--btn-loading-border);
  width: 22px;
  height: 22px;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  animation: loading1 1s ease infinite;
  z-index: 10
}

.mcd-style .btn-loading:before {
  z-index: 5;
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px dashed var(--btn-loading-border);
  width: 22px;
  height: 22px;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  animation: loading1 1s linear infinite
}

@keyframes loading1 {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.pop-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: height .5s;
  background: var(--pop-bg);
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw)
}

@supports (height: 100dvh) {
  .pop-bg {
    height: 100dvh
  }
}

@supports not (height: 100dvh) {
  .pop-bg {
    height: 100vh
  }
}

.pop-bg.zindex-up {
  z-index: 122
}

.pop-wrap {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-height: 95vh;
  transform: translate(-50%, -55%);
  transition: transform .3s;
  animation: hide 0s 1s 1 forwards;
  border-radius: 1.3333333333rem;
  opacity: 0;
  background: var(--pop-bg-content);
  background-image: var(--pop-bg-gradient);
  box-shadow: 0 1px 6px 0 var(--pop-bg-shadow), inset 0 1px 2px var(--pop-bg-shadow);
  color: var(--pop-txt)
}

.pop-wrap.show {
  display: block
}

.pop-wrap.ani {
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .3s .3s ease-in-out;
  opacity: 1
}

.pop-wrap.promotion-pop {
  position: fixed;
  height: auto;
  background: var(--pop-promotion-bg);
  color: var(--pop-promotion-txt);
  overflow: hidden;
  max-width: 160rem
}

.pop-wrap.promotion-pop.scroll-enabled {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.pop-wrap.promotion-pop .pop-title {
  padding: 2.1333333333rem;
  border-radius: 0;
  background: var(--pop-promotion-title-bg1)
}

.pop-wrap.promotion-pop .content-style .times {
  color: var(--pop-promotion-txt)
}

.pop-wrap.promotion-pop .content-style .times:before {
  background-color: var(--pop-promotion-clock-icon-color)
}

.pop-wrap.pop-success .btn-closed,
.pop-wrap.pop-fail .btn-closed {
  position: absolute;
  top: 0;
  right: 0;
  width: 12rem;
  height: 12rem;
  background: var(--pop-close-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%
}

.pop-wrap.pop-prompt {
  display: inline-flex;
  align-items: center;
  top: 53%;
  left: 0;
  right: 0;
  margin: 5% auto;
  padding: 2.1333333333rem 3.2rem 2.1333333333rem 2.1333333333rem;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 90%;
  text-align: center;
  background: var(--pop-refresh-amount-bg);
  color: var(--pop-refresh-amount-txt);
  transform: scale(0)
}

.pop-wrap.pop-prompt h4 {
  line-height: 4.2666666667rem;
  word-break: break-word
}

.pop-wrap.pop-prompt.show {
  transform: scale(1);
  opacity: 1
}

.pop-wrap.pop-prompt .item-icon {
  display: block;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  margin: 0 1.0666666667rem 0 0;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 65%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 65%;
  background-color: var(--pop-refresh-amount-txt)
}

.pop-wrap .detail-banner {
  overflow: hidden;
  border-radius: 1.3333333333rem 1.3333333333rem 0 0;
  line-height: 0
}

.pop-wrap .detail-banner img {
  width: 100%;
  height: auto
}

.pop-wrap .btn-close {
  position: absolute;
  display: inline-block;
  z-index: 1;
  top: 0;
  right: 0;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  transition: .5s;
  background: var(--pop-close-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%
}

.pop-wrap .pop-title {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 13.3333333333rem;
  padding: 2.1333333333rem;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  text-align: center
}

.pop-wrap .pop-title h3 {
  display: inline-block;
  width: 82%;
  height: auto;
  overflow: hidden;
  color: var(--pop-title);
  font-size: 4.2666666667rem;
  font-weight: 500;
  line-height: 1.2
}

.pop-wrap .pop-inner {
  position: relative;
  padding: 2.1333333333rem 2.1333333333rem 4.2666666667rem;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left
}

.pop-wrap.form-verification {
  border-radius: 1.3333333333rem;
  padding: 10.6666666667rem 5.3333333333rem;
  background: var(--pop-form-verification-bg, var(--pop-promotion-bg))
}

.pop-wrap.form-verification .cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6.4rem;
  text-align: center
}

.pop-wrap.form-verification .icon {
  width: 24rem;
  height: 24rem
}

.pop-wrap.form-verification .item-icon {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%
}

.pop-wrap.form-verification .icon+.info {
  margin-top: 3.2rem
}

.pop-wrap.form-verification .info p {
  line-height: 1.2
}

.pop-wrap.form-verification .info p+p {
  display: block;
  margin-top: 3.2rem
}

.pop-wrap.form-verification .info-title {
  font-size: 4.2666666667rem
}

.pop-wrap.form-verification .info-subtitle {
  color: var(--pop-verification-subtitle-color, var(--pop-promotion-txt));
  font-size: 3.2rem
}

.pop-wrap.form-verification.failed .info-title {
  color: var(--pop-verification-failed-title-color, var(--color-danger))
}

.pop-wrap.form-verification.expired .info-title {
  color: var(--pop-verification-expired-title-color, var(--color-danger))
}

.pop-wrap.form-verification.success .info-title {
  color: var(--pop-verification-success-title-color, var(--color-success))
}

.pop-wrap.form-verification .button {
  margin: 0;
  width: 100%;
  height: 10.6666666667rem;
  font-size: 4rem;
  line-height: 10.6666666667rem;
  background: var(--pop-form-verification-btn-bg, var(--btn-main-bg))
}

.pop-wrap.form-verification .button a {
  color: var(--pop-form-verification-btn-txt, var(--btn-main-txt))
}

.pop-language {
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: var(--pop-language-header-bg);
  opacity: 0
}

@supports (height: 100dvh) {
  .pop-language {
    height: 100dvh
  }
}

@supports not (height: 100dvh) {
  .pop-language {
    height: 100vh
  }
}

@supports (height: 100dvh) {
  .pop-language {
    max-height: 100dvh
  }
}

@supports not (height: 100dvh) {
  .pop-language {
    max-height: 100vh
  }
}

.pop-language .pop-title {
  border-radius: 0
}

.pop-language .pop-title h3 {
  color: var(--pop-language-title)
}

.pop-language .btn-close {
  background: var(--pop-language-close-icon-color)
}

.pop-language .pop-inner {
  height: calc(100% - 13.3333333333rem);
  max-height: calc(100vh - 13.3333333333rem);
  overflow-x: auto;
  overflow-y: auto;
  background: var(--pop-language-content-bg)
}

.pop-language .pop-inner .language-list {
  display: grid;
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  height: auto;
  padding: 0
}

.pop-language .pop-inner .language-list li {
  display: block;
  position: relative;
  flex-flow: nowrap;
  width: 100%;
  border: 0;
  border-radius: 1.3333333333rem;
  background: var(--pop-language-item-bg)
}

.pop-language .pop-inner .language-list li:nth-child(2n) {
  margin-right: 0
}

.pop-language .pop-inner .language-list .left-language-area {
  position: relative;
  width: 100%
}

.pop-language .pop-inner .language-list .left-language-area img {
  display: block;
  margin: 4rem auto 1.3333333333rem
}

.pop-language .pop-inner .language-list .left-language-area p {
  display: block;
  width: 100%;
  line-height: 3;
  text-align: center
}

.pop-language .pop-inner .language-list .right-language-area {
  display: flex;
  flex-wrap: wrap;
  width: 100%
}

.pop-language .pop-inner .language-list .right-language-area .radio-box {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 2.1333333333rem;
  font-size: 3.7333333333rem;
  vertical-align: top
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li {
  z-index: 0;
  flex: auto;
  width: calc(50% - 1.0666666667rem);
  height: 9.0666666667rem;
  margin-bottom: 2.1333333333rem;
  padding: 0 2.1333333333rem;
  overflow: hidden;
  border-radius: 1.3333333333rem;
  background: var(--pop-language-btn);
  box-shadow: inset 0 .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 90%), inset 0 -.2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 90%);
  color: var(--pop-language-txt);
  font-size: 3.2rem;
  line-height: 9.0666666667rem;
  text-align: center;
  word-break: break-all;
  font-family: var(--custom-font), var(--custom-serif)
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li:nth-child(2n) {
  margin-left: 2.1333333333rem
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li.active {
  border: 0;
  background: var(--pop-language-btn-border);
  color: var(--pop-language-btn-txt)
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li.active:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: .2666666667rem;
  left: .3333333333rem;
  width: calc(100% - .6666666667rem);
  height: calc(100% - .5333333333rem);
  border-radius: 1.3333333333rem;
  background: var(--pop-language-btn-bg-active)
}

.btn-box {
  display: flex;
  width: 100%;
  margin: 4.2666666667rem 0 0;
  text-align: right
}

.btn-box .button {
  display: inline-block;
  width: 100%;
  padding: 0 2.6666666667rem
}

.btn-box .button+.button {
  margin-left: 4.2666666667rem
}

.btn-box.other-choice {
  margin-top: 0
}

.pop-inner {
  max-height: 60vh
}

.pop-inner h4 {
  font-size: 4.2666666667rem;
  line-height: 1.5
}

.pop-inner .times {
  font-size: 3.7333333333rem;
  line-height: 1.5
}

.pop-inner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto
}

.pop-inner .btn-box .button {
  width: 100%
}

.notshow-checkbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 10.1333333333rem;
  padding: 0 5.3333333333rem;
  background: var(--pop-notshow-bg)
}

.notshow-checkbox .check-input {
  display: none
}

.notshow-checkbox .check-label:hover {
  cursor: pointer
}

.notshow-checkbox .check-cube {
  display: inline-block;
  position: relative;
  width: 4rem;
  height: 4rem;
  margin-right: 5px;
  border: 1px solid var(--pop-notshow-check-border);
  background: var(--pop-notshow-check-bg);
  border-radius: 2px;
  vertical-align: middle;
  overflow: hidden
}

.notshow-checkbox .check-cube__icon {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  transition: transform .3s ease-out .1s, opacity .3s ease-out;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%
}

.notshow-checkbox .check-input:checked+.check-label .check-cube__icon {
  transform: translate(0)
}

.notshow-checkbox .text {
  display: inline-block;
  color: var(--pop-notshow-txt);
  font-size: 3.7333333333rem;
  line-height: 9.3333333333rem
}

.promotion-pop {
  height: auto;
  background-color: var(--pop-promotion-bg)
}

.promotion-pop .pop-title h3 {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--pop-promotion-title)
}

.promotion-pop .btn-close:before {
  background: var(--pop-promotion-close-icon-color)
}

.language-list {
  display: block;
  margin: 0 auto
}

.language-list .left-language-area,
.language-list .right-language-area {
  display: inline-block;
  text-align: left;
  vertical-align: top
}

.language-list .left-language-area p,
.language-list .right-language-area p {
  padding-bottom: 0
}

.language-list .left-language-area {
  width: 35%
}

.language-list .left-language-area img {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  margin-right: 2.6666666667rem;
  border-radius: 100%;
  box-shadow: 0 0 .5333333333rem #0006;
  vertical-align: middle
}

.language-list .left-language-area p {
  display: inline-block;
  width: 53%;
  color: color-mix(in srgb, var(--pop-language-txt), transparent 40%);
  font-size: 3.2rem;
  line-height: 3;
  vertical-align: middle
}

.language-list .left-language-area span {
  display: inline-block;
  min-width: 2.6666666667rem
}

.language-list .right-language-area {
  display: inline-flex;
  flex-flow: row wrap;
  width: 65%
}

.pop-setwallet {
  padding: 4.2666666667rem 2.1333333333rem
}

.pop-setwallet .btn-closed {
  position: absolute;
  top: 0;
  right: 0;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%;
  background: var(--pop-close-icon-color)
}

.pop-setwallet .title {
  padding: 0 8.5333333333rem 2.1333333333rem 0;
  color: var(--pop-promotion-bonuswallet-title);
  font-size: 4.2666666667rem
}

.pop-setwallet .wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4.2666666667rem 0;
  padding: 6.4rem 4.2666666667rem;
  border-radius: 1.3333333333rem;
  background: var(--pop-promotion-bonuswallet-wallet-bg);
  color: var(--pop-promotion-bonuswallet-wallet-txt);
  font-size: 3.2rem
}

.pop-setwallet label {
  position: relative;
  height: 6.4rem;
  overflow: hidden;
  color: var(--form-txt);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 6.4rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap
}

.pop-setwallet .number {
  margin: 2.1333333333rem 0;
  color: var(--pop-promotion-bonuswallet-wallet-number);
  font-size: 6.4rem
}

.pop-setwallet .number span {
  margin-right: 1.0666666667rem;
  font-size: 5.3333333333rem
}

.pop-setwallet .prompt {
  margin-bottom: 0;
  color: var(--pop-promotion-bonuswallet-wallet-txt)
}

.pop-setwallet .bonus {
  display: flex;
  justify-content: space-between;
  color: var(--pop-promotion-bonuswallet-wallet-txt);
  font-size: 3.2rem
}

.pop-setwallet .btn-box {
  margin-top: 4.2666666667rem
}

.pop-setwallet .button {
  height: 9.6rem;
  font-size: 3.7333333333rem;
  line-height: 9.6rem
}

.pop-setwallet .deposit-now {
  margin-top: 4.2666666667rem;
  text-align: center
}

.pop-setwallet .deposit-now a {
  color: var(--pop-promotion-bonuswallet-link);
  text-decoration: underline
}

.pop-setwallet .tips {
  position: relative;
  width: 100%;
  margin: 4.2666666667rem 0;
  font-size: 3.7333333333rem;
  text-align: center
}

.pop-setwallet .tips:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 100%;
  border: .2666666667rem solid var(--pop-promotion-bonuswallet-deposit-now-border)
}

.pop-setwallet .tips span {
  display: inline;
  padding: 0 2.1333333333rem;
  background: var(--pop-promotion-bonuswallet-deposit-now-bg)
}

.pop-wrap.pop-editor {
  display: block;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translate(0);
  opacity: 1
}

.pop-wrap.pop-editor ul {
  width: 100%
}

.pop-wrap.pop-editor ul li {
  display: inline-block;
  width: 100%;
  padding: 0 5.3333333333rem;
  overflow: hidden;
  transition: all .3s;
  font-size: 3.7333333333rem;
  line-height: 14.6666666667rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap
}

.pop-wrap.pop-editor ul li:active {
  filter: brightness(.95)
}

.pop-wrap.pop-editor ul.editor-menu {
  display: none;
  border-radius: 5.3333333333rem 5.3333333333rem 0 0;
  background: var(--mail-editor-pop-bg)
}

.pop-wrap.pop-editor ul.editor-menu.show {
  display: block
}

.pop-wrap.pop-editor ul.editor-menu li {
  color: var(--mail-editor-pop-txt)
}

.pop-wrap.pop-editor ul.editor-check {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--mail-editor-pop-check-bg)
}

.pop-wrap.pop-editor ul.editor-check.show {
  display: flex
}

.pop-wrap.pop-editor ul.editor-check li {
  width: auto;
  color: var(--mail-editor-pop-check-txt)
}

.primary-btn {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none
}

.pop-go-to-biometrics {
  width: 90%;
  height: auto;
  padding: 10.6666666667rem 5.3333333333rem 5.3333333333rem;
  border-radius: 5.3333333333rem;
  background: var(--pop-bg-content);
  background-image: var(--pop-bg-gradient)
}

.pop-go-to-biometrics .btn-close {
  background: var(--pop-close-icon-color)
}

.pop-go-to-biometrics .box-loading {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  margin: 0 auto 10.6666666667rem
}

.pop-go-to-biometrics .box-loading video {
  position: absolute;
  z-index: 10;
  width: 32rem;
  height: 32rem
}

.pop-go-to-biometrics .box-loading .circle-wave {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 40%
}

.pop-go-to-biometrics .box-loading .circle-wave:after {
  content: "";
  display: block;
  position: absolute;
  top: 1.3333333333rem;
  right: 1.3333333333rem;
  width: 95%;
  height: 95%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--biometric-face-bg);
  background-repeat: no-repeat;
  background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-1 {
  z-index: 5;
  width: 49.3333333333rem;
  animation: circle-spin 4s infinite linear;
  opacity: .6;
  background-image: linear-gradient(to bottom right, var(--biometric-wave-color-1), var(--biometric-wave-color-2))
}

.pop-go-to-biometrics .box-loading .circle-wave-1:after {
  content: "";
  display: block;
  position: absolute;
  top: 1.3333333333rem;
  left: 2.6666666667rem;
  width: 95%;
  height: 95%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--biometric-face-bg);
  background-repeat: no-repeat;
  background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-2 {
  z-index: 4;
  width: 50.6666666667rem;
  animation: circle-spin 8s infinite linear;
  opacity: .7;
  background-image: linear-gradient(to bottom right, var(--biometric-wave-color-2), var(--biometric-wave-color-3))
}

.pop-go-to-biometrics .box-loading .circle-wave-2:after {
  content: "";
  display: block;
  position: absolute;
  right: 2.6666666667rem;
  bottom: 1.3333333333rem;
  width: 95%;
  height: 95%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--biometric-face-bg);
  background-repeat: no-repeat;
  background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-3 {
  z-index: 3;
  width: 52rem;
  animation: circle-spin 12s infinite linear;
  opacity: .4;
  background-image: linear-gradient(to bottom right, var(--biometric-wave-color-1), var(--biometric-wave-color-2))
}

.pop-go-to-biometrics .box-loading .circle-wave-3:after {
  content: "";
  display: block;
  position: absolute;
  top: 2.6666666667rem;
  left: 1.3333333333rem;
  width: 95%;
  height: 95%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--biometric-face-bg);
  background-repeat: no-repeat;
  background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-4 {
  z-index: 2;
  width: 53.3333333333rem;
  animation: circle-spin 18s infinite linear;
  opacity: .6;
  background-image: linear-gradient(to bottom right, var(--biometric-wave-color-2), var(--biometric-wave-color-3))
}

.pop-go-to-biometrics .box-loading .circle-wave-4:after {
  content: "";
  display: block;
  position: absolute;
  right: 1.3333333333rem;
  bottom: 2.6666666667rem;
  width: 95%;
  height: 95%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--biometric-face-bg);
  background-repeat: no-repeat;
  background-size: cover
}

.pop-go-to-biometrics .title {
  margin-bottom: 2.6666666667rem;
  color: var(--biometric-title);
  font-size: 7.4666666667rem;
  font-weight: 600;
  text-align: center
}

.pop-go-to-biometrics .sub-title {
  margin-bottom: 10.6666666667rem;
  color: var(--biometric-content);
  font-size: 4.2666666667rem;
  line-height: 1.4;
  text-align: center
}

.pop-go-to-biometrics .button {
  height: 14.9333333333rem;
  font-size: 5.3333333333rem;
  line-height: 14.9333333333rem
}

.pop-checkbox-agree {
  display: flex;
  justify-content: center;
  margin-top: 2.6666666667rem;
  line-height: 3
}

.promotion-pop ul {
  padding-left: 20px;
  list-style: disc
}

.promotion-pop ul ul {
  list-style: circle
}

.promotion-pop ul ul ul {
  list-style: square
}

.pop-otp-verification {
  position: fixed;
  z-index: 9000;
  bottom: -100%;
  width: 100%;
  max-height: 95vh;
  padding-top: 4.2666666667rem;
  transform: translate(0);
  transition: bottom .3s;
  border-radius: 5.3333333333rem 5.3333333333rem 0 0;
  background: var(--pop-bg-content)
}

.pop-otp-verification.active {
  bottom: 0
}

.pop-otp-verification .btn-closed {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 12rem;
  height: 12rem;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%;
  background: var(--pop-close-icon-color)
}

.pop-transaction-records-details {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 9000;
  bottom: -150%;
  width: 100%;
  height: 80%;
  transform: translate(0);
  transition: bottom .3s;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  background: var(--pop-bg-content)
}

.pop-transaction-records-details.active {
  bottom: 0
}

.pop-transaction-records-details .bank-name {
  position: absolute;
  z-index: 10000;
  top: -14.9333333333rem;
  left: 50%;
  max-width: 100%;
  padding: 2.1333333333rem 4.2666666667rem;
  transform: translate(-50%);
  border-radius: 2.1333333333rem;
  background: var(--pop-transaction-details-bank-name-bg);
  color: var(--pop-transaction-details-bank-name-txt);
  font-weight: 500;
  white-space: nowrap
}

.pop-transaction-records-details .bank-name img {
  display: inline-block;
  width: auto;
  height: 6.4rem;
  margin-right: 4.2666666667rem;
  vertical-align: middle
}

.pop-transaction-records-details .bank-name span {
  display: inline-block;
  position: relative;
  width: auto;
  white-space: nowrap
}

.pop-transaction-records-details .btn-closed {
  position: absolute;
  z-index: 101;
  top: 0;
  right: 0;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  background: var(--pop-transaction-details-close-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%
}

.pop-transaction-records-details .header {
  flex: none;
  position: relative;
  z-index: 60;
  width: 100%;
  height: 13.3333333333rem;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  background: var(--pop-transaction-details-header-bg);
  color: var(--pop-transaction-details-header-txt);
  font-size: 4.2666666667rem;
  font-weight: 500;
  line-height: 13.3333333333rem;
  text-align: center
}

.pop-transaction-records-details .pop-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: inherit;
  overflow: hidden;
  padding-top: 0
}

.pop-transaction-records-details .pop-content .tab-btn-page {
  background: var(--pop-transaction-details-tab-bg)
}

.pop-transaction-records-details .pop-content .tab-btn-section {
  flex: none
}

.pop-transaction-records-details .pop-content .tab-content {
  flex: 1;
  height: 100%
}

.pop-transaction-records-details .pop-content .inner-wrap {
  height: inherit
}

.pop-transaction-records-details .member-content {
  background: var(--pop-transaction-details-btn-area-bg);
  text-align: center
}

.pop-transaction-records-details .member-content .tips {
  display: none;
  margin: 4rem 0;
  color: var(--pop-transaction-details-tips-txt)
}

.pop-transaction-records-details .member-content .button {
  margin: 4.2666666667rem;
  overflow: hidden
}

.pop-transaction-records-details .member-content .button .countdown {
  display: none;
  position: absolute;
  z-index: 1;
  bottom: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 12rem;
  border-radius: .8rem;
  background-color: var(--btn-main-bg-disabled);
  color: var(--btn-main-txt-disabled);
  font-size: 4rem;
  line-height: 8rem;
  text-align: center
}

.pop-transaction-records-details .member-content .button .countdown.fade-in {
  animation: button-push .5s ease
}

.pop-transaction-records-details .member-content .button .countdown.fade-in:before {
  content: "";
  display: block;
  position: absolute;
  top: -5.3333333333rem;
  width: 100%;
  height: 5.3333333333rem;
  background: var(--btn-main-bg-disabled);
  mask: url(/assets/images/player/bg-wave.svg) no-repeat center/100%;
  -webkit-mask: url(/assets/images/player/bg-wave.svg) no-repeat center/100%
}

.pop-transaction-records-details .member-content .button .countdown.fade-out {
  animation: button-pull .5s ease
}

.pop-transaction-records-details .member-content .button .countdown.fade-out:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 5.3333333333rem;
  transform: rotate(180deg);
  background: var(--primary);
  mask: url(/assets/images/player/bg-wave.svg) no-repeat center/100%;
  -webkit-mask: url(/assets/images/player/bg-wave.svg) no-repeat center/100%
}

.pop-transaction-records-details .member-content .button .countdown .timer {
  position: relative;
  top: 0;
  left: -2.6666666667rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  box-shadow: 0 0 0 .4rem var(--pop-transaction-details-timer)
}

.pop-transaction-records-details .member-content .button .countdown .timer:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36.5%;
  height: .4rem;
  transform-origin: 0 50%;
  animation: spinClockwise 2s linear infinite;
  border-radius: 1.3333333333rem;
  background-color: var(--pop-transaction-details-timer)
}

.pop-transaction-records-details .member-content .button .countdown .timer:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25%;
  height: .4rem;
  transform-origin: 0 50%;
  animation: spinClockwise 12s linear infinite;
  border-radius: 1.3333333333rem;
  background-color: var(--pop-transaction-details-timer)
}

.transaction-details-wrap {
  height: 100%;
  margin: 0;
  padding: 4.2666666667rem;
  overflow-x: hidden;
  overflow-y: auto
}

.transaction-details-wrap .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.6666666667rem 0
}

.transaction-details-wrap .title h3 {
  width: 70%;
  color: var(--pop-transaction-details-title);
  font-size: 4.5333333333rem;
  font-weight: 500
}

.transaction-details-wrap .title .tags {
  min-width: 21.8666666667rem;
  padding: 1.3333333333rem;
  overflow: hidden;
  transform: scale(.9);
  border-radius: 1.0666666667rem;
  color: var(--transaction-record-status-txt);
  font-size: 3.2rem;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap
}

.timeline-box {
  position: relative;
  margin-top: 2.6666666667rem;
  padding-bottom: 2.6666666667rem
}

.timeline-box .date {
  margin-bottom: 2.6666666667rem;
  margin-left: 13.3333333333rem;
  color: var(--pop-transaction-details-date);
  font-size: 3.4666666667rem
}

.timeline-block {
  position: relative;
  margin-bottom: 2.9333333333rem
}

.timeline-block:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 4.5333333333rem;
  width: .5333333333rem;
  height: calc(100% + 9.3333333333rem);
  border-radius: 2.6666666667rem
}

.timeline-block:last-child:before {
  top: -9.3333333333rem;
  height: 14.6666666667rem
}

.timeline-block .point {
  position: absolute;
  top: -5.3333333333rem;
  left: 3.4666666667rem;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  border-radius: 50%;
  outline: 1.3333333333rem solid var(--content-bg);
  box-shadow: .2666666667rem .2666666667rem #0000001a
}

.timeline-block .bounce {
  animation: bounce-point .5s .8s
}

.timeline-block .content {
  display: inline-flex;
  width: calc(100% - 12.8rem);
  min-height: 14.6666666667rem;
  margin-left: 12.8rem;
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--pop-transaction-details-message-bg);
  box-shadow: .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 90%), inset 0 .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 80%)
}

.timeline-block .content .text {
  width: 76%;
  color: var(--pop-transaction-details-message-txt);
  font-size: 3.7333333333rem;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-line
}

.timeline-block .content .text+.time {
  margin-top: 1.3333333333rem
}

.timeline-block .content .time {
  width: 24%;
  color: var(--pop-transaction-details-message-txt);
  font-size: 2.9333333333rem;
  text-align: right
}

.timeline-block.current:before {
  height: 110%
}

.timeline-block.current .point {
  display: flex;
  z-index: 1;
  top: -6.4rem;
  left: 1.8666666667rem;
  align-items: center;
  justify-content: center;
  width: 5.8666666667rem;
  height: 5.8666666667rem;
  border: .8rem solid var(--content-bg);
  box-shadow: .2666666667rem .2666666667rem #0000001a, inset .2666666667rem .2666666667rem #0000001a
}

.timeline-block.current .point span {
  position: relative;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  background: var(--content-bg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.timeline-block.current .text {
  color: var(--pop-transaction-details-message-current-txt);
  font-weight: 500
}

.details-box {
  padding: 2.6666666667rem 0;
  overflow: hidden;
  border-radius: 2.6666666667rem
}

.details-box .info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  padding: 4.2666666667rem;
  background: var(--pop-transaction-details-table-bg);
  color: var(--pop-transaction-details-table-txt)
}

.details-box .info:nth-child(2n) {
  background: var(--pop-transaction-details-table-bg-even)
}

.details-box .info .name {
  font-size: 3.4666666667rem;
  font-weight: 500
}

.details-box .info .value {
  font-size: 3.4666666667rem;
  text-align: right;
  word-break: break-word
}

.pop-content.success .transaction-details-wrap .tags,
.pop-content.success .transaction-details-wrap .timeline-block .point {
  background: var(--transaction-record-positive)
}

.pop-content.success .transaction-details-wrap .timeline-block:before {
  background: var(--transaction-record-positive)
}

.pop-content.success .transaction-details-wrap .current .point {
  outline: .5333333333rem solid var(--transaction-record-positive);
  background: var(--transaction-record-positive) !important
}

.pop-content.success .transaction-details-wrap .current .point span {
  top: 3%
}

.pop-content.processing .transaction-details-wrap .tags,
.pop-content.processing .transaction-details-wrap .timeline-block .point {
  background: var(--transaction-record-pending)
}

.pop-content.processing .transaction-details-wrap .timeline-block:before {
  background: var(--transaction-record-pending)
}

.pop-content.processing .transaction-details-wrap .current .point {
  outline: .5333333333rem solid var(--transaction-record-pending);
  background: var(--transaction-record-pending) !important
}

.pop-content.processing .transaction-details-wrap .current .point span {
  top: 5%;
  animation: wiggle 2s .5s infinite
}

.pop-content.fail .transaction-details-wrap .tags,
.pop-content.fail .transaction-details-wrap .timeline-block .point {
  background: var(--transaction-record-negative)
}

.pop-content.fail .transaction-details-wrap .timeline-block:before {
  background: var(--transaction-record-negative)
}

.pop-content.fail .transaction-details-wrap .current .point {
  outline: .5333333333rem solid var(--transaction-record-negative);
  background: var(--transaction-record-negative) !important
}

.pop-content.reverted .tags,
.pop-content.reverted .timeline-block .point {
  background: var(--transaction-record-revert)
}

.pop-content.reverted .timeline-block:before {
  background: var(--transaction-record-revert)
}

.pop-content.reverted .current .point {
  outline: .5333333333rem solid var(--transaction-record-revert);
  background: var(--transaction-record-revert) !important
}

@keyframes table-arrow {
  0% {
    transform: translate(-50%, -50%) rotate(180deg)
  }

  to {
    transform: translateY(-50%) rotate(180deg)
  }
}

@keyframes circle-spin {
  0% {
    transform: rotate(360deg)
  }
}

@keyframes error-ani {

  0%,
  to {
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-3px, 0, 0)
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(3px, 0, 0)
  }
}

@keyframes bounce-point {
  0% {
    transform: scale(.6)
  }

  60% {
    transform: scale(1.2)
  }

  to {
    transform: scale(1)
  }
}

@keyframes wiggle {

  0%,
  7% {
    transform: rotate(0)
  }

  15% {
    transform: rotate(-15deg)
  }

  20% {
    transform: rotate(10deg)
  }

  25% {
    transform: rotate(-10deg)
  }

  30% {
    transform: rotate(6deg)
  }

  35% {
    transform: rotate(-4deg)
  }

  40%,
  to {
    transform: rotate(0)
  }
}

@keyframes slide {
  0% {
    visibility: hidden;
    transform: translate(100px)
  }

  60% {
    transform: translate(-5px)
  }

  to {
    visibility: visible;
    transform: translate(0)
  }
}

@keyframes spinClockwise {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes button-push {
  0% {
    bottom: -12rem
  }

  to {
    bottom: 0
  }
}

@keyframes button-pull {
  0% {
    bottom: 0
  }

  to {
    bottom: -12rem
  }
}

.pop-login-fail {
  position: absolute;
  width: calc(100% - 8.5333333333rem);
  height: auto;
  padding: 2.1333333333rem 4.2666666667rem;
  transition: top .3s;
  animation: errorTipsShow .5s alternate linear forwards;
  border: .2666666667rem solid var(--alert-login-fail-tips-border);
  border-radius: 2.6666666667rem;
  background: var(--alert-login-fail-tips-bg)
}

.pop-login-fail .login-fail-tip {
  display: flex;
  align-items: center;
  justify-content: center
}

.pop-login-fail .login-fail-tip .login-fail-icon {
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  margin-right: 2.1333333333rem
}

.pop-login-fail .login-fail-tip .login-fail-icon video {
  width: 100%
}

.pop-login-fail .login-fail-tip span {
  width: 90%;
  color: var(--alert-login-fail-tips-txt);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: .2666666667rem;
  line-height: 4rem
}

.pop-login-fail.active {
  display: inline;
  opacity: 1
}

.pop-login-fail.hide {
  animation: errorTipsHIde .5s alternate linear forwards
}

@keyframes errorTipsShow {
  0% {
    top: -13.8666666667rem
  }

  to {
    top: 13.8666666667rem
  }
}

@keyframes errorTipsHIde {
  0% {
    top: 13.8666666667rem
  }

  to {
    top: -13.8666666667rem
  }
}

.pop-reset-password,
.pop-account-lock {
  position: fixed;
  z-index: 9000;
  bottom: -100%;
  width: 100%;
  max-height: 90vh;
  padding: 4.2666666667rem;
  transform: translate(0);
  transition: bottom .5s;
  border-radius: 5.3333333333rem 5.3333333333rem 0 0;
  background: var(--pop-login-fail-bg);
  box-shadow: 0 -.5333333333rem 4rem #0003
}

.pop-reset-password .title,
.pop-account-lock .title {
  margin-bottom: 8.5333333333rem;
  color: var(--pop-login-fail-title);
  font-weight: 600;
  letter-spacing: .2666666667rem;
  text-align: center;
  line-height: 6.4rem
}

.pop-reset-password p,
.pop-account-lock p {
  margin-bottom: 8rem;
  color: var(--pop-login-fail-txt);
  font-size: 3.4666666667rem;
  letter-spacing: .2666666667rem;
  line-height: 5.3333333333rem;
  text-align: center
}

.pop-reset-password .pop-btn-box,
.pop-account-lock .pop-btn-box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between
}

.pop-reset-password .pop-btn-box .button,
.pop-account-lock .pop-btn-box .button {
  width: 100%;
  height: 12rem;
  margin: 0 auto 2.6666666667rem;
  font-size: 4rem;
  line-height: 12rem
}

.pop-reset-password .pop-btn-box .button+.button,
.pop-account-lock .pop-btn-box .button+.button {
  margin-left: 4.2666666667rem
}

.pop-reset-password.active,
.pop-account-lock.active {
  bottom: 0
}

.pop-reset-password.active img,
.pop-account-lock.active img {
  animation: fallin .6s .2s forwards
}

.icon-check,
.icon-close,
.icon-lock {
  position: relative;
  z-index: 10;
  left: 50%;
  width: 32rem;
  height: 32rem;
  margin: 4.2666666667rem 0;
  transform: translate(-50%)
}

.icon-check video,
.icon-close video,
.icon-lock video {
  width: 100%
}

.pop-notification .content-style .table {
  margin-bottom: 17.3333333333rem
}

.pop-notification .content-style p {
  margin: 2.6666666667rem 0
}

.pop-notification .btn-box {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 2.1333333333rem 4.2666666667rem 4.2666666667rem;
  background: var(--pop-bg-content)
}

.pop-notification .btn-box .button {
  color: var(--color-walletcard-txt)
}

.pop-notification .btn-box .btn-primary {
  background: var(--pop-bonuswallet-card-start-btn)
}

.pop-notification .btn-box .btn-cancel {
  background: var(--color-walletcard-cancel-btn)
}

.rotating-pop {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: opacity .5s .1s;
  opacity: 0;
  background: #000000e6;
  pointer-events: none;
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw)
}

@supports (height: 100dvh) {
  .rotating-pop {
    height: 100dvh
  }
}

@supports not (height: 100dvh) {
  .rotating-pop {
    height: 100vh
  }
}

.rotating-pop.show {
  opacity: 1;
  pointer-events: auto
}

.rotating-phone-wrap {
  position: relative;
  bottom: 10%;
  width: 26.6666666667rem;
  height: 26.6666666667rem
}

.phone-rotating-tips {
  position: relative;
  bottom: 10%;
  width: 90%;
  color: #fff;
  font-size: 2.4rem;
  text-align: center
}

.phone-rotating-tips span {
  display: inline-block;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  margin-right: 1.0666666667rem;
  mask-repeat: no-repeat;
  mask-position: top center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: cover;
  vertical-align: middle;
  background: #fff
}

.beforelogin,
.afterlogin {
  display: flex;
  position: relative;
  z-index: 1;
  bottom: 0;
  width: calc(100% - 8.5333333333rem);
  height: 16rem;
  margin: 4.2666666667rem;
  box-shadow: 0 2.1333333333rem 2.1333333333rem var(--board-before-shadow)
}

.beforelogin a,
.afterlogin a {
  text-align: left;
  padding: 1.0666666667rem 4.2666666667rem;
  border-radius: 5.3333333333rem;
  box-shadow: 0 .5333333333rem 1.0666666667rem var(--board-btn-shadow), inset -.5333333333rem .2666666667rem .8rem color-mix(in srgb, var(--inset-shadow), transparent 50%);
  font-size: 3.2rem;
  line-height: 1.2;
  text-decoration: none
}

.beforelogin .main-wallet,
.afterlogin .main-wallet {
  width: 33%;
  border-radius: 2.6666666667rem 0 0 2.6666666667rem;
  box-shadow: inset .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 80%)
}

.beforelogin .main-wallet video,
.afterlogin .main-wallet video {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 31.4666666667rem;
  height: 20.8rem
}

.beforelogin .login-button,
.afterlogin .login-button {
  width: 34%;
  height: 100%;
  background: var(--board-login-bg);
  box-shadow: inset 0 .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 50%);
  font-weight: 600;
  text-align: center
}

.beforelogin .login-button a,
.afterlogin .login-button a {
  margin-left: 2.1333333333rem;
  background: var(--board-login-btn-bg);
  color: var(--board-login-btn-txt);
  text-shadow: 0 0 .8rem var(--board-login-btn-txt-shadow)
}

.beforelogin .register-button a,
.afterlogin .register-button a {
  background: var(--board-register-btn-bg);
  color: var(--board-register-btn-txt);
  text-shadow: 0 0 .8rem var(--board-register-btn-txt-shadow)
}

.beforelogin .deposit-button a,
.afterlogin .deposit-button a {
  background: var(--board-deposit-btn-bg);
  color: var(--board-deposit-btn-txt);
  text-shadow: 0 0 .8rem var(--board-deposit-btn-txt-shadow)
}

.beforelogin .register-button,
.beforelogin .deposit-button,
.afterlogin .register-button,
.afterlogin .deposit-button {
  width: 33%;
  height: 100%;
  border-radius: 0 2.6666666667rem 2.6666666667rem 0;
  background: var(--board-register-bg);
  box-shadow: inset 0 .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 50%);
  font-weight: 700;
  text-align: center
}

.beforelogin .main-wallet {
  background: var(--board-before-bg)
}

.afterlogin .main-wallet {
  background: var(--board-after-bg)
}

.afterlogin .main-wallet,
.afterlogin .balance {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 65%;
  height: 100%;
  padding: 2.6666666667rem 4.8rem
}

.afterlogin .main-wallet video,
.afterlogin .balance video {
  left: 42.5%
}

.afterlogin .main-wallet .wallet,
.afterlogin .main-wallet .text,
.afterlogin .balance .wallet,
.afterlogin .balance .text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--board-wallet-txt);
  font-size: 3.2rem;
  line-height: 4.8rem
}

.afterlogin .main-wallet .amount,
.afterlogin .main-wallet .bonus,
.afterlogin .balance .amount,
.afterlogin .balance .bonus {
  color: var(--board-wallet-amount);
  font-size: 4.2666666667rem;
  font-weight: 500;
  line-height: 6.9333333333rem
}

.afterlogin .main-wallet .icon,
.afterlogin .balance .icon {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem
}

.afterlogin .icon-refresh {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: 2.1333333333rem;
  background: var(--board-wallet-refresh-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.afterlogin .icon-refresh.active {
  animation: rotate 1s forwards
}

.afterlogin .deposit-button {
  width: 37%
}

.third-party-login.forgot-password {
  min-height: 100%
}

.third-party-login.forgot-password .logo-box {
  margin: 7.4666666667rem auto
}

.third-party-login.forgot-password .member-error-wrap {
  display: grid;
  line-height: 20px
}

.third-party-login.forgot-password .input-group {
  padding: 0
}

.third-party-login.forgot-password .input-group+.input-group {
  margin-top: 3.2rem
}

.third-party-login.forgot-password .input-group label {
  padding: 0
}

.third-party-login.forgot-password .button {
  margin: 2.6666666667rem 2.1333333333rem;
  width: calc(100% - 4.2666666667rem);
  height: 12rem;
  font-size: 4rem;
  line-height: 12rem;
  background: var(--forgot-password-layout-btn-bg, var(--btn-main-bg))
}

.third-party-login.forgot-password .button a {
  color: var(--forgot-password-layout-btn-txt, var(--btn-main-txt))
}

.third-party-login.forgot-password .button.btn-secondary {
  background: var(--forgot-password-layout-btn-secondary-bg, var(--btn-secondary-bg))
}

.third-party-login.forgot-password .button.btn-secondary a {
  color: var(--forgot-password-layout-btn-secondary-txt, var(--btn-secondary-txt))
}

.third-party-login.forgot-password .contact-wrap .cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6.4rem
}

.third-party-login.forgot-password .contact-wrap .icon {
  margin-top: 3.2rem;
  width: 32rem;
  height: auto
}

.third-party-login.forgot-password .contact-wrap .icon video,
.third-party-login.forgot-password .contact-wrap .icon img {
  width: 100%
}

.third-party-login.forgot-password .contact-wrap .icon+.info {
  margin-top: 2.1333333333rem
}

.third-party-login.forgot-password .contact-wrap .info {
  color: var(--forgot-password-contact-txt-color, var(--color-title));
  font-size: 4.2666666667rem;
  line-height: 1.3;
  text-align: center
}

.third-party-login.forgot-password .contact-wrap .btn-group {
  margin: 2.1333333333rem
}

.third-party-login.forgot-password .contact-wrap .button {
  width: 100%;
  margin: 3.2rem 0
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--forgot-password-reset-tips-bg, var(--accordion-bg))
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap.show .a-content {
  height: 100%;
  max-height: 80rem;
  opacity: 1
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap.show .a-arrow {
  transform: rotate(180deg);
  transform-origin: center
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap.show ol:after {
  left: 0
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap .a-icon {
  margin-left: 0
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap .a-content {
  color: var(--forgot-password-reset-content-txt-color, var(--accordion-txt))
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap .a-list {
  list-style: auto;
  padding: 2.1333333333rem 2.1333333333rem 2.1333333333rem 4.2666666667rem
}

.third-party-login.forgot-password .reset-wrap .accordion-wrap .a-list li {
  margin: 1.0666666667rem 4.2666666667rem
}

.third-party-login.forgot-password .reset-wrap .error-message:before {
  flex: 0 0 4.2666666667rem
}

.third-party-login.forgot-password .reset-wrap .button {
  width: calc(100% - 4.2666666667rem);
  margin: 2.6666666667rem 2.1333333333rem
}

.announcement-row {
  display: flex;
  position: relative;
  width: 100%;
  height: 8rem;
  margin: 1.0666666667rem 0;
  background-color: var(--announvement-bg);
  color: var(--announvement-txt);
  font-size: 3.2rem;
  line-height: 8rem
}

.announcement-row:before {
  content: "";
  display: block;
  width: 8rem;
  height: 8rem;
  margin-left: 2.1333333333rem;
  background: var(--announvement-icon-color);
  mask: var(--announvement-icon) no-repeat center center/50%;
  -webkit-mask: var(--announvement-icon) no-repeat center center/50%
}

.announcement-row .marquee {
  width: 100%;
  margin: 0 2.1333333333rem;
  overflow: hidden
}

.announcement-row .marquee ul {
  display: flex;
  flex-direction: row;
  width: -moz-fit-content;
  width: fit-content
}

.announcement-row .marquee li {
  display: inline-block;
  margin-right: 25px
}

.announcement-row .marquee li p {
  white-space: nowrap
}

.announcement-row .marquee li a {
  color: var(--announvement-txt);
  text-decoration: none
}

html.is-desktop .announcement-row:before {
  margin-bottom: 0
}

.member-menu {
  display: none;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0
}

.member-menu.active {
  display: block
}

.member-head {
  position: relative;
  width: 100%;
  height: 45.3333333333rem
}

.member-menu-content {
  padding: 3.2rem;
  background: var(--sidenav-bg)
}

.member-menu-box {
  width: 100%;
  height: auto;
  margin: 0 0 3.2rem;
  padding-top: 1.0666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--sidenav-category-area-bg);
  box-shadow: inset 0 .2666666667rem .5333333333rem color-mix(in srgb, var(--inset-shadow), transparent 90%);
  font-size: 3.2rem
}

.member-menu-box:nth-child(1) {
  background: none;
  box-shadow: none
}

.member-menu-box:nth-child(1) .title {
  padding: 0
}

.member-menu-box .title {
  width: 100%;
  padding: 0 4.2666666667rem
}

.member-menu-box .title h2 {
  color: var(--sidenav-shortcut-txt);
  line-height: 8rem
}

.member-menu-box ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 0 2.1333333333rem
}

.member-menu-box ul :nth-child(2n).active {
  animation: shake-r 1s linear infinite both
}

.member-menu-box ul li {
  position: relative;
  width: 25%;
  padding: 2.1333333333rem;
  background: none;
  box-shadow: none
}

.member-menu-box ul li.active {
  animation: shake-lr 1s linear infinite both
}

.member-menu-box ul li.scalein {
  animation: scale-in-center .2s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes shake-lr {

  0%,
  to {
    transform: rotate(0);
    transform-origin: 50% 50%
  }

  10% {
    transform: rotate(1deg)
  }

  20%,
  40%,
  60% {
    transform: rotate(-2deg)
  }

  30%,
  50%,
  70% {
    transform: rotate(2deg)
  }

  80% {
    transform: rotate(-1deg)
  }

  90% {
    transform: rotate(1deg)
  }
}

@keyframes shake-r {

  0%,
  to {
    transform: rotate(0);
    transform-origin: 50% 50%
  }

  10% {
    transform: rotate(-1deg)
  }

  20%,
  40%,
  60% {
    transform: rotate(2deg)
  }

  30%,
  50%,
  70% {
    transform: rotate(-2deg)
  }

  80% {
    transform: rotate(1deg)
  }

  90% {
    transform: rotate(-1deg)
  }
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.member-menu-box ul li a {
  display: block;
  text-decoration: none
}

.member-menu-box ul li a p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  color: var(--sidenav-shortcut-icon-txt);
  line-height: 3.7333333333rem;
  text-align: center
}

.member-menu-box ul li a h6 {
  display: block;
  color: var(--color-text);
  font-size: 2.6666666667rem;
  line-height: 3.7333333333rem
}

.member-menu-box ul li a span {
  display: block;
  position: relative;
  left: 50%;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 75%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 75%;
  background-color: var(--member-menu-icon-bg);
  transform: translate(-50%);
  margin-bottom: 2.1333333333rem
}

.member-menu-box ul li a .use-icon-path {
  background-color: unset;
  display: flex;
  justify-content: center;
  align-items: center
}

.member-menu-box ul li a .use-icon-path i {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-color: unset;
  -webkit-background-repeat: no-repeat;
  -webkit-background-position: center;
  -webkit-background-size: 100%;
  width: 6.4rem;
  height: 6.4rem;
  display: block;
  overflow: hidden;
  border-radius: 1.3333333333rem
}

.member-menu-box ul li a:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: var(--sidenav-category-icon-bg);
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  transform: translate(52%)
}

.member-menu-box ul li .notice {
  display: none;
  position: absolute;
  top: 30%;
  right: 45%;
  width: 4rem;
  height: 4rem;
  transform: translate(150%, -150%);
  border-radius: 50%;
  background: var(--sidenav-set-shortcut-add-icon-bg)
}

.member-menu-box ul li .notice:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 2.6666666667rem;
  height: .5333333333rem;
  transform: translate(-50%, -50%);
  border-radius: 1.3333333333rem;
  background: var(--sidenav-set-shortcut-add-icon-color)
}

.member-menu-box ul li .notice:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: .5333333333rem;
  height: 2.6666666667rem;
  transform: translate(-50%, -50%);
  border-radius: 1.3333333333rem;
  background: var(--sidenav-set-shortcut-add-icon-color)
}

.member-menu-box ul li .notice.inbox {
  display: block;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4rem;
  text-align: center;
  color: var(--sidenav-set-shortcut-add-icon-color)
}

.member-menu-box ul li .notice.inbox:after,
.member-menu-box ul li .notice.inbox:before {
  content: none
}

.member-menu-box ul li .notice-exclamation {
  position: absolute;
  top: 30%;
  right: 45%;
  width: 4rem;
  height: 4rem;
  transform: translate(150%, -150%);
  border-radius: 50%;
  background: var(--sidenav-category-real-time-bonus-notice-bg)
}

.member-menu-box ul li .icon-exclamation {
  display: block;
  width: 4rem;
  height: 4rem;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  background: var(--sidenav-category-real-time-bonus-notice-txt)
}

.member-menu-box .member-menu-shortcut li .notice {
  background: var(--sidenav-set-shortcut-edit-icon-bg);
  color: var(--sidenav-set-shortcut-edit-icon-color);
  font-size: 3.7333333333rem;
  font-weight: 700;
  line-height: 3.7333333333rem;
  text-align: center
}

.member-menu-box .member-menu-shortcut li .notice:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  width: 2.6666666667rem;
  height: .5333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--sidenav-set-shortcut-edit-icon-color)
}

.member-menu-box .member-menu-shortcut li .notice:before {
  display: none
}

.member-menu-box .button-set,
.member-menu-box .button-setup {
  position: relative;
  width: 25%;
  padding: 1.8666666667rem
}

.member-menu-box .button-set .icon-set,
.member-menu-box .button-setup .icon-set {
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  margin: 0 auto 2.6666666667rem;
  border-radius: 50%;
  background: var(--sidenav-set-shortcut-icon-bg)
}

.member-menu-box .button-set .icon-set:before,
.member-menu-box .button-setup .icon-set:before {
  content: "";
  display: block;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  background: var(--sidenav-set-shortcut-icon-color);
  mask: var(--sidenav-set-shortcut-icon);
  -webkit-mask: var(--sidenav-set-shortcut-icon)
}

.member-menu-box .button-set p,
.member-menu-box .button-setup p {
  color: var(--sidenav-shortcut-icon-txt);
  line-height: 3.7333333333rem;
  text-align: center
}

.member-menu-box .button-setup {
  display: none;
  animation: button-center .1s cubic-bezier(.25, .46, .45, .94) both
}

.member-menu-box .button-setup .icon-set {
  background: var(--sidenav-set-shortcut-set-icon-color)
}

.member-menu-box .button-setup .icon-set:before {
  mask: var(--sidenav-set-shortcut-edit-icon);
  -webkit-mask: var(--sidenav-set-shortcut-edit-icon)
}

@keyframes button-center {
  0% {
    transform: scale(.6);
    opacity: 1
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.member-menu-box .member-menu-service {
  padding: 2.1333333333rem 5.3333333333rem
}

.member-menu-box .member-menu-service li {
  width: 50%
}

.member-menu-box .member-menu-service li a:before {
  display: none
}

.member-menu-box .member-menu-service li.active {
  animation: none
}

.member-menu-box .member-menu-service a {
  display: block;
  font-size: 3.2rem;
  text-decoration: none
}

.member-menu-box .member-menu-service a p {
  margin-bottom: 1.3333333333rem;
  color: var(--sidenav-service-title);
  font-weight: 600;
  text-align: left
}

.member-menu-box .member-menu-service a span {
  color: var(--sidenav-service-txt);
  text-align: left
}

.member-menu-point {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 0 2.1333333333rem 2.1333333333rem;
  text-align: center;
  padding: 2.6666666667rem 4.2666666667rem
}

.member-menu-point i {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 8.5333333333rem;
  height: 8.5333333333rem;
  margin-right: 2.1333333333rem
}

.member-menu-point i .item-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 60%;
  -webkit-mask-size: 75%;
  mask-repeat: no-repeat;
  mask-position: 60%;
  mask-size: 75%;
  background-color: var(--third-party-personal-item-icon-color);
  z-index: 2
}

.member-menu-point i:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--profile-member-menu-point-bg)
}

.member-menu-point p {
  display: block;
  color: var(--profile-tips-txt);
  font-size: 3.2rem;
  line-height: 1.5;
  text-align: start
}

.member-menu-point p span {
  color: var(--profile-tips-link)
}

.member-menu-logout {
  width: 100%;
  height: auto;
  margin: 4.2666666667rem 0;
  border-radius: 2.6666666667rem;
  background: var(--secondary);
  box-shadow: inset 0 .2666666667rem .5333333333rem color-mix(in srgb, var(--inset-shadow), transparent 90%);
  font-weight: 500
}

.member-menu-logout a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.2666666667rem;
  text-decoration: none
}

.member-menu-logout a p {
  display: inline-block;
  color: var(--color-title);
  font-size: 5.3333333333rem;
  line-height: 4.2666666667rem;
  text-align: center;
  text-shadow: 0 .2666666667rem .8rem color-mix(in srgb, var(--text-shadow), transparent 50%)
}

@keyframes scale-out-center {
  0% {
    transform: scale(1);
    opacity: 1
  }

  to {
    transform: scale(0);
    opacity: 0
  }
}

@keyframes setbubble {
  0% {
    transform: translate(-50%, -50%) scale(0)
  }

  10% {
    transform: translate(-50%, -50%) scale(1);
    border-width: 40px
  }

  20%,
  90%,
  to {
    transform: translate(-50%, -50%) scale(1);
    border-width: 0
  }
}

@keyframes seticon {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(180deg)
  }
}

.member-content {
  display: block;
  position: relative;
  width: 100%;
  height: auto
}

.member-content .phone p {
  padding: 0
}

.member-content .button {
  width: calc(100% - 8.5333333333rem);
  margin: 4.2666666667rem auto
}

.login-info-box {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0 .5333333333rem
}

.forgetpassword-buttn {
  font-size: 3.4666666667rem
}

.forgetpassword-buttn a {
  display: block;
  padding: 1.0666666667rem;
  border: .2666666667rem solid var(--login-forgetpassword-btn-border);
  border-radius: 1.3333333333rem;
  color: var(--login-forgetpassword-btn-txt);
  text-decoration: none
}

.member-content p,
.login-biometric-content p {
  padding: 0 4.2666666667rem;
  color: var(--login-txt);
  font-size: 3.4666666667rem;
  line-height: 1.2;
  text-align: center
}

.member-content p a,
.login-biometric-content p a {
  color: var(--login-link);
  margin-left: 2.1333333333rem
}

.member-content .signup a,
.login-biometric-content .signup a {
  margin-left: 2.1333333333rem;
  text-decoration: underline
}

.member-box {
  position: relative;
  margin: 4.2666666667rem 4.2666666667rem 0
}

.member-box:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: .2666666667rem;
  background-color: var(--pop-promotion-table-content-border)
}

.radius .inputbox:after {
  left: 1%;
  width: 98%
}

.radius .inputbox:last-child:after {
  height: 0
}

.radius.member-box:after {
  height: 0
}

.login-biometric-content {
  text-align: center
}

.login-biometric-content .member-box {
  text-align: left
}

.login-biometric-content .button {
  margin: 4.2666666667rem
}

.biometric-group {
  display: inline-block;
  margin-top: 8.5333333333rem;
  text-decoration: none
}

.biometric-group .btn-biometric {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 26.6666666667rem;
  height: 26.6666666667rem;
  margin: 0 auto 2.1333333333rem;
  animation: pop 2.5s linear infinite;
  border-radius: 50%;
  background: var(--biometric-btn)
}

.biometric-group .btn-biometric .item-icon {
  display: block;
  width: 55%;
  height: 55%;
  background: #fff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.biometric-group .btn-biometric video,
.biometric-group .btn-biometric img {
  position: relative;
  width: 21.3333333333rem;
  height: 21.3333333333rem
}

.biometric-group .btn-biometric .ripple {
  position: absolute;
  z-index: -1;
  width: 26.6666666667rem;
  height: 26.6666666667rem;
  animation: shrink 2.5s linear infinite;
  border-radius: 50%;
  background: var(--biometric-btn)
}

.biometric-group span {
  display: block;
  color: var(--biometric-btn-txt);
  font-size: 4rem;
  text-align: center
}

.biometric-group.identify {
  position: relative;
  padding: 2.6666666667rem
}

.biometric-group.identify:before,
.biometric-group.identify:after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 32rem;
  height: 32rem;
  transform: translate(-50%);
  border: 2.1333333333rem solid transparent;
  border-radius: 100%
}

.biometric-group.identify:before {
  z-index: 130;
  animation: identify 1s linear infinite;
  border-top-color: var(--biometric-btn)
}

.biometric-group.identify:after {
  border: 2.1333333333rem solid color-mix(in srgb, var(--biometric-btn), transparent 80%)
}

.biometric-group.identify .ripple {
  display: none
}

.biometric-group.identify .btn-biometric {
  margin-bottom: 8.5333333333rem
}

@keyframes pop {
  0% {
    transform: scale(1)
  }

  80% {
    transform: scale(1)
  }

  90% {
    transform: scale(1.05)
  }

  to {
    transform: scale(1)
  }
}

@keyframes shrink {
  0% {
    width: 0;
    height: 0;
    opacity: 0
  }

  80% {
    opacity: .3
  }

  to {
    width: 37.3333333333rem;
    height: 37.3333333333rem;
    opacity: 0
  }
}

@keyframes identify {
  0% {
    transform: rotate(0) translate(-50%);
    transform-origin: 0
  }

  to {
    transform: rotate(360deg) translate(-50%);
    transform-origin: 0
  }
}

.layout-brand {
  display: block
}

.layout-brand.active {
  display: none
}

.layout-brand.fish .card1 li img {
  width: 75%;
  margin: 0 auto 1.6rem
}

.layout-list {
  display: none
}

.layout-list.active {
  display: block
}

.card1,
.card2 {
  width: 100%;
  height: auto;
  margin-bottom: 2.6666666667rem;
  border-radius: .8rem
}

.card1 ul,
.card2 ul {
  display: grid;
  grid-gap: 1.0666666667rem;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: auto
}

.card1 li,
.card2 li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  border-radius: 4.2666666667rem;
  background: var(--nav-item-bg);
  box-shadow: 0 1.6rem 1.3333333333rem color-mix(in srgb, var(--nav-item-bg-shadow), transparent 90%), inset 0 .2666666667rem .5333333333rem color-mix(in srgb, var(--inset-shadow), transparent 90%)
}

.card1 li span,
.card2 li span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 5.3333333333rem;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 70%
}

.card1 li span.icon-new,
.card2 li span.icon-new {
  width: 7.2rem;
  height: 7.2rem;
  left: 0;
  background-position: top left;
  background-size: 100%
}

.card1 li a,
.card2 li a {
  display: block;
  text-decoration: none
}

.card1 li img,
.card2 li img {
  display: block;
  width: 50%;
  margin: 1.0666666667rem auto;
  height: auto
}

.card1 li p,
.card2 li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .5333333333rem 1.3333333333rem 2.6666666667rem;
  color: var(--color-title);
  font-size: 3.2rem;
  text-align: center
}

.card1 li .nav-icon-color,
.card2 li .nav-icon-color {
  position: relative;
  width: 11.2rem;
  height: 11.2rem;
  margin: 1.0666666667rem auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  background-color: var(--nav-icon-normal-bg)
}

.card1 li .icon-all-provider,
.card2 li .icon-all-provider {
  display: block;
  position: relative;
  margin: 1.0666666667rem auto;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  background-color: var(--icon-all-provider-bg)
}

.card2 ul {
  grid-template-columns: repeat(3, 1fr)
}

.card2 li img {
  width: 40%
}

.icon-sport {
  display: block;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 1.0666666667rem auto;
  aspect-ratio: 1/1
}

.icon-sport.custom-cricket {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--menu-icon-normal-bg)
}

.nextevent {
  position: relative;
  height: 62.9333333333rem
}

.nextevent .title {
  display: flex;
  align-items: center;
  margin: 2.1333333333rem 0;
  color: var(--event-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  letter-spacing: .2666666667rem;
  vertical-align: middle
}

.nextevent .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: .5333333333rem;
  background: var(--event-border);
  vertical-align: middle
}

.nextevent .event-card {
  display: flex;
  width: 100%
}

.nextevent .case {
  position: relative;
  width: 45%;
  margin: 4rem 0 4rem 5.3333333333rem
}

.nextevent .case .team-img {
  display: flex
}

.nextevent .case .team-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 16rem;
  margin-right: 5.3333333333rem
}

.nextevent .case .team-flag img {
  display: block;
  z-index: 1;
  width: auto;
  height: 55%;
  filter: drop-shadow(0 .5333333333rem 1.0666666667rem #281a70)
}

.nextevent .event-img {
  position: relative;
  width: 50%;
  height: 41.3333333333rem;
  margin-right: 4rem
}

.nextevent .event-img img {
  display: block;
  position: absolute;
  right: 0;
  bottom: 5%;
  width: 100%;
  height: auto
}

.nextevent .slider {
  width: 100%;
  margin: 0 auto;
  transition: all ease-in-out .3s;
  opacity: 1
}

.nextevent .slider .slick-track {
  position: relative;
  padding: 2.1333333333rem 0 0
}

.nextevent .slider .slick-slide {
  position: relative;
  height: 46.6666666667rem;
  margin: 0 4.2666666667rem;
  border-radius: 4.2666666667rem
}

.nextevent .slider .slick-slide a {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%)
}

.nextevent .slick-dots {
  position: absolute;
  z-index: 2;
  bottom: -7.4666666667rem;
  left: 50%;
  transform: translate(-50%)
}

.nextevent .slick-dots li {
  display: inline-block;
  position: relative;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  margin: 0 2.1333333333rem;
  overflow: hidden;
  text-indent: -2666.4rem;
  cursor: pointer
}

.nextevent .slick-dots li button {
  display: block;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  padding: 1.0666666667rem;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer
}

.nextevent .slick-dots li button:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  border-radius: 50%;
  background: var(--event-slick-dot)
}

.nextevent .slick-dots .slick-active button:before {
  background-color: var(--event-slick-dot-active)
}

.mcd-style .nextevent {
  padding: 0 2.1333333333rem;
  height: auto
}

.mcd-style .nextevent .banner {
  height: auto
}

.mcd-style .nextevent .banner .banner-v1 {
  height: auto !important
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap {
  height: auto
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item-drag {
  height: 54.1333333333rem;
  padding-top: 0%
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item {
  height: auto;
  padding: 0
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item .item-pic {
  height: 54.1333333333rem;
  border-radius: 1.3333333333rem;
  background-size: cover
}

.progress-bar .bar {
  position: relative;
  width: 100%;
  height: 1.3333333333rem;
  margin-bottom: 1.3333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--bonuswallet-progress-bar-bg);
  box-shadow: inset 0 0 .2666666667rem 0 var(--bonuswallet-progress-bar-bg-shadow)
}

.progress-bar .bar-inner {
  position: absolute;
  left: 0;
  width: 60%;
  height: 100%;
  border-radius: 1.3333333333rem;
  background: var(--bonuswallet-progress-bar-bg-mine);
  box-shadow: 0 .2666666667rem .8rem .2666666667rem color-mix(in srgb, var(--bonuswallet-progress-bar-bg-shadow-mine), transparent 60%), 0 0 .8rem color-mix(in srgb, var(--bonuswallet-progress-bar-bg-shadow-mine), transparent 60%)
}

.progress-bar .bar-inner:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: .8rem;
  height: .8rem;
  transform: translate(-50%, -50%);
  border-radius: .8rem;
  background-color: #fff;
  box-shadow: 0 0 .5333333333rem .2666666667rem var(--bonuswallet-progress-bar-bg-shadow-mine)
}

.progress-bar .number {
  display: flex;
  align-content: center;
  justify-content: space-between;
  color: var(--bonuswallet-progress-bar-txt);
  font-size: 2.6666666667rem
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner,
.ticket-wrap .progress-bar .bar .bar-inner {
  background: var(--bonuswallet-progress-bar-bg-active);
  box-shadow: 0 .2666666667rem .8rem .2666666667rem color-mix(in srgb, var(--bonuswallet-progress-bar-bg-active-shadow), transparent 60%), 0 0 .8rem color-mix(in srgb, var(--bonuswallet-progress-bar-bg-active-shadow), transparent 60%)
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner:after,
.ticket-wrap .progress-bar .bar .bar-inner:after {
  box-shadow: 0 0 .5333333333rem .2666666667rem var(--bonuswallet-progress-bar-bg-active-shadow)
}

.searchpage {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 17.0666666667rem;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--content-bg);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  right: -100%;
  opacity: 0;
  transition: right .3s, opacity 0s .3s
}

.searchpage .search-top-info {
  opacity: 0
}

.searchpage.active {
  right: 0;
  opacity: 1;
  transition: right .3s, opacity 0s 0s
}

.searchpage.active .search-top-info {
  opacity: 1
}

.searchpage.game-page-filter {
  transition: right 0s .3s, opacity .3s
}

.searchpage.active-fide-in {
  right: 0;
  opacity: 1;
  transition: opacity .3s .3s
}

.searchpage.active-fide-in .search-top-info {
  opacity: 1
}

.searchpage.active-fide-in .search-top-info input {
  width: calc(100% - 16rem)
}

.searchpage .button {
  border: 0;
  outline: none;
  font-size: 5.3333333333rem;
  line-height: 13.3333333333rem
}

@keyframes accordion-move-up {
  0% {
    top: 0
  }

  75% {
    top: 13.3333333333rem
  }

  to {
    top: 0
  }
}

.search-top-block {
  z-index: 0;
  display: block;
  position: relative;
  top: 0;
  opacity: 1;
  transition: top .3s, z-index 0s .3s
}

.search-top-block:after {
  content: "";
  z-index: -1;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 13.3333333333rem;
  background: var(--pop-search-header-bg)
}

.search-top-block.active-move-up {
  pointer-events: none;
  z-index: 99999;
  top: -13.3333333333rem;
  opacity: 0;
  transition: top .3s, opacity .3s .5s
}

.search-top-block.active-move-up:after {
  animation: accordion-move-up .4s
}

.search-top-block.active-move-up input {
  margin-left: 13.3333333333rem;
  width: calc(100% - 16rem)
}

.search-top-info {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 13.3333333333rem;
  background: var(--pop-search-header-bg)
}

.search-top-info .back {
  display: block;
  width: 13.3333333333rem;
  height: 100%;
  text-indent: -2666.4rem;
  background: var(--pop-search-back-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 30%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 30%;
  cursor: pointer
}

.search-top-info input {
  position: relative;
  width: calc(100% - 3.2rem);
  height: 10.6666666667rem;
  padding: 0;
  border: 0;
  border-radius: 2.6666666667rem;
  outline: none;
  background: var(--pop-search-input-bg);
  color: var(--pop-search-input-txt);
  font-size: 3.7333333333rem;
  text-indent: 5.3333333333rem;
  margin-left: 0;
  transition: margin-left .3s, width .3s
}

.search-top-info input::placeholder {
  color: var(--pop-search-input-placeholder)
}

.search-top-info input:has(+div.icon-search) {
  width: calc(100% - 26.6666666667rem)
}

.search-top-info .icon-search {
  display: block;
  width: 13.3333333333rem;
  height: 100%;
  background: var(--pop-search-search-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 35%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 35%
}

.search-top-info h6 {
  overflow: hidden;
  color: var(--filter-title);
  font-weight: 500;
  line-height: 13.3333333333rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 4.8rem
}

.search-top-info h6~.back {
  position: absolute;
  left: 0
}

.searchpage-main {
  position: relative;
  padding: 4.2666666667rem 2.1333333333rem
}

.searchpage-main .clear-result {
  position: absolute;
  top: 4.2666666667rem;
  right: 2.1333333333rem;
  color: var(--pop-search-clear-txt);
  font-size: 3.2rem;
  text-decoration: underline
}

.searchpage-main h2 {
  margin-bottom: 1.0666666667rem;
  color: var(--pop-search-title);
  font-size: 4.2666666667rem;
  font-weight: 500
}

.searchpage-main .check-group {
  padding: 2.1333333333rem;
  background: var(--pop-search-inner-bg)
}

.searchpage-main ul {
  margin-bottom: 0
}

.search-checkbox-group ul {
  display: grid;
  grid-gap: 1.0666666667rem;
  grid-template-columns: repeat(3, 1fr);
  justify-content: flex-start;
  margin-bottom: 4.2666666667rem;
  overflow: hidden
}

.search-checkbox-group li {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.search-checkbox-group li:nth-child(3n) {
  margin-right: 0
}

.search-checkbox-group [type=checkbox]+label,
.search-checkbox-group [type=radio]+label {
  padding: 0 3.2rem;
  overflow: hidden;
  background: var(--radio-bg);
  color: var(--radio-txt);
  line-height: 10.6666666667rem
}

.searchpage-bar {
  position: fixed;
  z-index: 10;
  right: -50%;
  bottom: 0;
  width: 100%;
  padding: 2.1333333333rem;
  transform: translate(50%);
  transition: all .3s;
  background-color: var(--content-bg)
}

.searchpage-bar.active {
  right: 50%
}

.date-input {
  position: relative;
  width: 100%;
  margin-right: 0
}

.date-input input {
  box-sizing: border-box;
  border: 0;
  border-radius: 1.3333333333rem;
  outline: none;
  color: var(--search-item-txt);
  text-align: left
}

.date-input input::placeholder {
  color: var(--search-item-txt)
}

.date-input input::-webkit-calendar-picker-indicator {
  display: none
}

.search-tab-desktop-popup .searchpage,
.search-tab-desktop-popup .searchpage-bar {
  position: absolute
}

html:lang(vn) .referral-partner .search-checkbox-group ul {
  grid-template-columns: repeat(2, 1fr)
}

.no-result {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 80rem;
  background: var(--transaction-record-table-body-empty-bg)
}

.no-result .pic {
  display: flex
}

.no-result img {
  display: block;
  width: 30%;
  height: auto;
  margin: auto;
  opacity: .3;
  filter: brightness(2)
}

.no-result video {
  position: relative;
  left: 50%;
  width: 42.6666666667rem;
  height: 42.6666666667rem;
  transform: translate(-50%);
  opacity: .7
}

.no-result .img-no-data {
  position: relative;
  left: 50%;
  width: 42.6666666667rem;
  height: 42.6666666667rem;
  transform: translate(-50%);
  opacity: .7;
  filter: brightness(1);
  margin: 0
}

.no-result .text {
  margin-top: 2.6666666667rem;
  color: var(--form-input-txt-placeholder);
  font-size: 3.4666666667rem;
  line-height: 1.5;
  text-align: center
}

.switch-mode {
  display: grid;
  grid-gap: 4.2666666667rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 4.2666666667rem
}

.switch-mode li {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--switch-bg);
  color: var(--radio-txt);
  text-align: center
}

.switch-mode li.active {
  background: var(--switch-bg-checked);
  color: var(--radio-txt-checked)
}

.switch-mode li.active i {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  border-bottom-right-radius: 2.1333333333rem;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center
}

.switch-mode li.active:after {
  content: "";
  position: absolute;
  top: .2666666667rem;
  left: .2666666667rem;
  width: calc(100% - .5333333333rem);
  height: calc(100% - .5333333333rem);
  border-radius: 2.5333333333rem;
  background: var(--checkbox-bg-checked)
}

.switch-mode li video,
.switch-mode li h4,
.switch-mode li p,
.switch-mode li img {
  z-index: 1;
  color: var(--mode-txt)
}

.switch-mode li video,
.switch-mode li img {
  position: relative;
  left: 10%;
  width: 80%;
  margin-bottom: 2.1333333333rem
}

.switch-mode li h4 {
  margin: 2.1333333333rem 0;
  font-size: 3.7333333333rem;
  font-weight: 500
}

.switch-mode li p {
  font-size: 3.2rem
}

.mode-tips {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 4.2666666667rem;
  transform: translate(-50%);
  border-radius: 1.3333333333rem;
  background: var(--mode-tips-bg);
  color: var(--mode-tips-txt);
  font-weight: 500
}

.inner-block {
  margin: 5.3333333333rem
}

.inner-block li {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background: var(--switch-bg);
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  color: var(--radio-txt)
}

.inner-block .toggle-box p {
  color: color-mix(in srgb, var(--color-title), transparent 20%)
}

.recommend {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 0 2.1333333333rem
}

.recommend .recommend-title {
  display: flex;
  align-items: center;
  margin: 4.2666666667rem 0 1.6rem;
  color: var(--event-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  letter-spacing: .2666666667rem;
  vertical-align: middle
}

/* .recommend .recommend-title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 3.2rem;
  border-radius: .5333333333rem;
  background: var(--event-border);
  vertical-align: middle
} */

.recommend .recommend-bg {
  width: 100%;
  height: auto
}

.recommend .recommend-bg .recommend-main {
  display: block;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0
}

.recommend-card {
  display: inline-block;
  position: relative;
  width: 72rem;
  height: 41.3333333333rem;
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%);
  vertical-align: top;
  overflow: hidden
}

.recommend-card:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.recommend-card a {
  display: block;
  text-decoration: none
}

.recommend-card>a {
  height: 100%
}

.recommend-card>a>img {
  width: 100%;
  height: 100%
}

.recommend-card+.recommend-card {
  margin-left: 0
}

.games .recommend-main {
  display: block
}

.games .recommend-main .games-box {
  display: inline-block;
  width: 48rem;
  margin: 0 2.1333333333rem 2.1333333333rem 0;
  line-height: 0;
  vertical-align: top
}

.games .recommend-main .games-box .text {
  line-height: 1.3
}

.games .recommend-main .games-box:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.verified-success-wrap {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  padding: 4.2666666667rem;
  margin: 4.2666666667rem;
  background: var(--pop-register-success-bg);
  border-radius: 1.3333333333rem;
  text-align: center;
  z-index: 129
}

.verified-success-close {
  position: absolute;
  right: 2.6666666667rem;
  top: 2.6666666667rem;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  cursor: pointer
}

.verified-success-close:before,
.verified-success-close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: .5333333333rem;
  background-color: var(--pop-verify-add-success-close-icon);
  border-radius: 10rem
}

.verified-success-close:before {
  transform: translate(-50%, -50%) rotate(45deg)
}

.verified-success-close:after {
  transform: translate(-50%, -50%) rotate(-45deg)
}

.verified-success-cont .top-inner h4,
.verified-success-cont .top-inner h3 {
  font-family: var(--custom-font), var(--custom-serif);
  line-height: 1.2;
  font-size: 4.2666666667rem
}

.verified-success-cont .top-inner h3 {
  color: var(--third-party-register-success-subtitle);
  font-weight: 700
}

.verified-success-cont .top-inner h3+h4 {
  margin: 4.2666666667rem 0 0
}

.verified-success-cont .top-inner h4 {
  color: var(--third-party-register-success-subtitle);
  font-size: 3.7333333333rem
}

.verified-success-cont .top-inner p {
  margin-top: 4.2666666667rem;
  color: var(--third-party-register-success-txt);
  font-size: 3.2rem
}

.third-party-login .verified-success-wrap .button {
  width: 100%;
  margin: 3.2rem 0
}

@font-face {
  font-family: aBigDeal;
  src: local("aBigDeal"), url(aBigDeal.1671204006a25bbb.woff) format("woff"), url(aBigDeal.0ceaed960312a7e3.ttf) format("opentype")
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.games {
  position: relative;
  width: 100%;
  height: auto
}

.games .jackpot {
  position: relative;
  height: 24rem;
  margin: 2.1333333333rem auto;
  background-position: center;
  background-size: cover;
  width: calc(100% - 4.2666666667rem);
  border-radius: 1.3333333333rem
}

.games .jackpot .text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  text-align: center
}

.games .jackpot h2 {
  margin-bottom: 1.3333333333rem;
  color: var(--slot-jackpot-total);
  font-size: 4rem;
  text-shadow: 0 0 2.6666666667rem rgba(0, 0, 0, .5)
}

.games .jackpot span {
  display: block;
  color: var(--slot-jackpot-amount);
  font-size: 7.4666666667rem;
  font-weight: 700;
  text-shadow: 0 0 2.6666666667rem rgba(0, 0, 0, .5)
}

.games .games-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2.1333333333rem;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 1.0666666667rem
}

.games .games-box {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: .8rem
}

.games .games-box .text {
  position: relative;
  width: 100%;
  height: auto;
  padding: 1.3333333333rem 2.6666666667rem;
  background-color: var(--slot-card-bg)
}

.games .games-box .text h3 {
  width: 83%;
  margin-bottom: 1.3333333333rem;
  overflow: hidden;
  color: var(--slot-card-title);
  font-size: 4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3
}

.games .games-box .text p {
  width: 83%;
  color: var(--slot-card-txt);
  font-size: 3.4666666667rem
}

.games .games-box .text span {
  display: inline-block;
  color: var(--slot-card-number);
  font-weight: 700;
  vertical-align: middle
}

.games .games-box .like {
  position: absolute;
  top: 50%;
  right: 2.6666666667rem;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto
}

.games .games-box.new:before {
  content: "NEW";
  display: block;
  position: absolute;
  z-index: 1;
  top: 2.6666666667rem;
  left: 2.6666666667rem;
  padding: 0 1.0666666667rem;
  border-radius: .5333333333rem;
  background-color: var(--slot-tag-new-bg);
  color: var(--slot-tag-new-txt);
  font-size: 2.6666666667rem;
  line-height: 4.8rem;
  text-align: center;
  text-shadow: 0 .2666666667rem .2666666667rem color-mix(in srgb, var(--text-shadow), transparent 80%)
}

.games .pic {
  position: relative;
  width: 100%;
  height: auto;
  line-height: 0
}

.games .pic img {
  width: 100%;
  height: 32rem
}

.games .prompt {
  width: 100%;
  padding: 4.2666666667rem 0 8rem;
  font-size: 3.4666666667rem;
  text-align: center
}

.games .jackpot-banner-wrapper {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  transform: translateY(56px);
  padding: 1.6rem 2.1333333333rem 0
}

.games .jackpot-banner-wrapper .jackpot-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.0666666667rem
}

.games.jackpot .search-top-block:not(.active-move-up) {
  padding-bottom: 176px;
  pointer-events: none
}

.games.jackpot .search-top-block:not(.active-move-up) .search-top-info {
  pointer-events: auto
}

.games.loading mcd-waterfall-scroll {
  display: block;
  min-height: 100vh
}

.games .game-jackpot-number-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: Helvetica Neue
}

.games .game-jackpot-number-group p {
  position: absolute;
  margin: 0;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transform: translate(-50%, -50%)
}

.games .game-jackpot-number-group p.center-peak-grand {
  top: 75%;
  left: 50%;
  color: #ffe77d;
  font-size: 3.2rem
}

.games .game-jackpot-number-group p.center-peak-major {
  top: 80%;
  left: 80%;
  font-size: 3.2rem
}

.games .game-jackpot-number-group p.center-peak-mini {
  top: 80%;
  left: 20%;
  font-size: 3.2rem
}

.games .game-jackpot-number-group p.twin-base-grand {
  top: 45%;
  left: 37%;
  color: #ffe77d;
  font-size: 5.8666666667rem
}

.games .game-jackpot-number-group p.twin-base-major {
  top: 81%;
  left: 51%;
  font-size: 3.2rem
}

.games .game-jackpot-number-group p.twin-base-mini {
  top: 81%;
  left: 22%;
  font-size: 3.2rem
}

.games .game-jackpot-number-group p.wide-to-narrow-grand {
  top: 27%;
  left: 34%;
  color: #ffe77d;
  font-size: 3.7333333333rem
}

.games .game-jackpot-number-group p.wide-to-narrow-major {
  top: 55%;
  left: 34%;
  font-size: 3.2rem
}

.games .game-jackpot-number-group p.wide-to-narrow-mini {
  top: 81%;
  left: 34%;
  font-size: 3.2rem
}

.games .game-jackpot-number-group p.left-aligned-grand {
  top: 60%;
  left: 34%;
  font-size: 5.3333333333rem
}

.games .game-jackpot-number-group p.center-aligned-grand {
  top: 69%;
  left: 50%;
  font-size: 6.9333333333rem
}

.games .game-jackpot-number-group p.right-aligned-grand {
  top: 58%;
  left: 66%;
  font-size: 5.3333333333rem
}

.games-main.main-vertical {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(29.3333333333rem, 1fr));
  grid-gap: 1.3333333333rem;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 2.4rem
}

.games-main.main-vertical .games-box {
  position: relative;
  margin: 0 auto;
  overflow: visible !important;
  cursor: pointer
}

.games-main.main-vertical .games-box .text {
  display: none
}

.games-main.main-vertical .games-box .pic a {
  display: block;
  position: relative;
  border-radius: 1.8666666667rem;
  overflow: hidden
}

.games-main.main-vertical .games-box .pic a:before {
  content: "";
  display: block;
  padding-bottom: 132.8%
}

.games-main.main-vertical .games-box .pic a:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

.games-main.main-vertical .games-box .pic a .image-label {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2
}

.games-main.main-vertical .games-box .pic a .image-label__img {
  position: absolute;
  right: 0;
  left: auto;
  width: 13.3333333333rem;
  height: 13.3333333333rem
}

.games-main.main-vertical .games-box .pic a img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover
}

.games-main.main-vertical .games-box .pic a .default-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}

.games-main.main-vertical .games-box .like {
  position: absolute;
  top: 0;
  right: auto;
  width: 8rem;
  height: 8rem;
  transform: translateY(0) rotate(0);
  transition: all .3s ease-in;
  z-index: 3
}

.games-main.main-vertical .games-box .like img {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 3;
  width: 5.3333333333rem;
  opacity: 0;
  animation: fadeIn .5s forwards
}

.games-main.main-vertical .default-image,
.games-main.main-vertical .image {
  font-family: "aBigDeal", var(--custom-font);
  color: #fff
}

.games-main.main-vertical .default-image__title,
.games-main.main-vertical .image__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9.6rem;
  margin: 0 auto;
  text-align: center;
  padding: 0 2.6666666667rem;
  font-size: 3.4666666667rem;
  z-index: 2;
  line-height: 3.7333333333rem;
  letter-spacing: .2666666667rem;
  overflow: hidden;
  text-overflow: ellipsis
}

.games-main.main-vertical .default-image .game-group,
.games-main.main-vertical .image .game-group {
  position: absolute;
  bottom: 4.2666666667rem;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.8666666667rem;
  line-height: 1.8666666667rem;
  letter-spacing: .8rem;
  z-index: 2
}

.games-main.main-vertical .default-image img.games-main.main-vertical .default-image,
.games-main.main-vertical .default-image .games-main.main-vertical .image__img,
.games-main.main-vertical .image img.games-main.main-vertical .default-image,
.games-main.main-vertical .image .games-main.main-vertical .image__img {
  width: 100%;
  height: 100%
}

:root {
  --date-ball-translateX: 600%
}

.content-main:has(.search-top-block):has(mcd-top-banner mcd-carousel-frame-alpha) .search-top-block {
  padding-bottom: 45.0666666667rem
}

.content-main:has(.search-top-block):has(mcd-game-jackpot) .search-top-block {
  padding-bottom: 28.2666666667rem
}

.content-main:has(.search-top-block) mcd-top-banner,
.content-main:has(.search-top-block) mcd-game-jackpot {
  position: absolute;
  width: 100%;
  top: 13.3333333333rem
}

.slot-game,
.casino-game {
  position: relative;
  top: 24rem;
  width: 100%;
  height: auto;
  padding-bottom: 22.6666666667rem
}

.slot-game .banner,
.casino-game .banner {
  background-color: transparent
}

.slot-game .banner .slider .slick-slide,
.casino-game .banner .slider .slick-slide {
  height: 56rem
}

.slot-game .banner .slider .slick-slide .banner-image,
.casino-game .banner .slider .slick-slide .banner-image {
  border-radius: 4.2666666667rem;
  background-position: bottom
}

.slot-game .banner .slider .slick-slide .banner-image:after,
.casino-game .banner .slider .slick-slide .banner-image:after {
  content: "";
  display: block;
  height: 100%;
  border-radius: 4.2666666667rem;
  background: linear-gradient(0deg, #000, #00000080, #0000 40%);
  box-shadow: .5333333333rem .5333333333rem 2.1333333333rem #0000004d
}

.slot-game .ranking,
.casino-game .ranking {
  display: flex;
  position: relative;
  z-index: 2;
  top: -8rem;
  margin: 0;
  padding: 4.2666666667rem 4.2666666667rem 0;
  overflow-x: scroll;
  overflow-y: hidden;
  list-style: none
}

.slot-game .ranking li,
.casino-game .ranking li {
  position: relative;
  margin: 0 .8rem
}

.slot-game .ranking li:first-child,
.casino-game .ranking li:first-child {
  margin-left: 0
}

.slot-game .ranking li:last-child,
.casino-game .ranking li:last-child {
  margin-right: 0
}

.slot-game .ranking li span,
.casino-game .ranking li span {
  position: absolute;
  z-index: -1;
  top: -5.3333333333rem;
  left: 0;
  color: transparent;
  font-size: 14.6666666667rem;
  font-weight: 700;
  text-shadow: 0 0 1.0666666667rem var(--new-slot-ranking-txt), 0 .2666666667rem 1.0666666667rem var(--new-slot-ranking-txt);
  -webkit-text-stroke: .2666666667rem var(--new-slot-ranking-txt-border)
}

.slot-game .ranking li a,
.casino-game .ranking li a {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 25.6rem;
  height: 29.3333333333rem;
  filter: drop-shadow(0 0 1.0666666667rem var(--new-slot-ranking-img-shadow))
}

.slot-game .ranking li .outline-border,
.casino-game .ranking li .outline-border {
  width: 100%;
  height: 100%;
  background: var(--new-slot-ranking-img-border) no-repeat center
}

.slot-game .ranking li img,
.casino-game .ranking li img {
  position: absolute;
  z-index: -1;
  width: 90%;
  height: 90%;
  mask: var(--new-slot-ranking-mask) no-repeat center;
  -webkit-mask: var(--new-slot-ranking-mask) no-repeat center
}

.slot-game .recommend-wrap,
.casino-game .recommend-wrap {
  display: flex;
  width: 100%;
  height: auto;
  margin-bottom: 4rem;
  padding: 1.6rem 4.2666666667rem 2.6666666667rem;
  overflow-x: auto;
  overflow-y: hidden
}

.slot-game .recommend-wrap .recommend-scroll,
.casino-game .recommend-wrap .recommend-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  list-style: none
}

.slot-game .recommend-wrap .recommend-scroll li,
.casino-game .recommend-wrap .recommend-scroll li {
  display: flex;
  position: relative;
  width: 42.6666666667rem;
  height: 53.3333333333rem;
  overflow: visible;
  transform: rotateY(0)
}

.slot-game .recommend-wrap .recommend-scroll li a,
.casino-game .recommend-wrap .recommend-scroll li a {
  display: block;
  position: relative;
  width: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  perspective: 213.3333333333rem
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-rotate,
.casino-game .recommend-wrap .recommend-scroll li .recommend-rotate {
  display: block;
  width: 100%
}

.slot-game .recommend-wrap .recommend-scroll li img,
.casino-game .recommend-wrap .recommend-scroll li img {
  position: absolute;
  bottom: -.8rem;
  left: -.5333333333rem;
  width: 43.7333333333rem;
  border-radius: 0 0 3.2rem 3.2rem
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-bg,
.casino-game .recommend-wrap .recommend-scroll li .recommend-bg {
  transform: translateZ(-20px);
  transform-origin: center;
  mask: url(/assets/images/slotgame/trapezoid-mask.svg) no-repeat center;
  -webkit-mask: url(/assets/images/slotgame/trapezoid-mask.svg) no-repeat center
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-char,
.casino-game .recommend-wrap .recommend-scroll li .recommend-char {
  transform: translateZ(15px);
  transition: all .5s
}

.slot-game .recommend-wrap .recommend-scroll li .info-block,
.casino-game .recommend-wrap .recommend-scroll li .info-block {
  position: absolute;
  bottom: 1.0666666667rem;
  left: 3%;
  width: 94%;
  height: 14.4rem;
  padding-top: 2.1333333333rem;
  transform: translateZ(20px);
  border-radius: 2.6666666667rem;
  -webkit-backdrop-filter: blur(.1066666667vw);
  backdrop-filter: blur(.1066666667vw)
}

.slot-game .recommend-wrap .recommend-scroll li h4,
.casino-game .recommend-wrap .recommend-scroll li h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1.0666666667rem 4.2666666667rem;
  color: var(--new-slot-recommend-txt);
  font-size: 3.7333333333rem;
  font-weight: 500
}

.slot-game .recommend-wrap .recommend-scroll li h5,
.casino-game .recommend-wrap .recommend-scroll li h5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1.0666666667rem 4.2666666667rem;
  opacity: .7;
  color: var(--new-slot-recommend-txt);
  font-size: 3.2rem
}

.slot-game .games-wrap,
.casino-game .games-wrap {
  margin: 4.2666666667rem 3.2rem
}

.slot-game .games-wrap .grid,
.casino-game .games-wrap .grid {
  margin: 0;
  padding: 0;
  list-style: none
}

.slot-game .games-wrap .grid li,
.casino-game .games-wrap .grid li {
  display: flex;
  justify-content: center;
  width: 33%;
  margin-bottom: 1.0666666667rem;
  padding: 1.0666666667rem 1.0666666667rem 2.1333333333rem;
  float: left;
  border-radius: 2.6666666667rem;
  opacity: 0
}

.slot-game .games-wrap .grid li:before,
.casino-game .games-wrap .grid li:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 2.1333333333rem;
  width: calc(100% - 2.1333333333rem);
  height: 8rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--new-slot-game-list-shadow), transparent 100%) 0%, var(--new-slot-game-list-shadow) 100%)
}

.slot-game .games-wrap .grid li:after,
.casino-game .games-wrap .grid li:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2.6666666667rem;
  left: 50%;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  transform: translate(-50%);
  background: var(--new-slot-game-list-circle-star-icon) no-repeat center
}

.slot-game .games-wrap .grid li img,
.casino-game .games-wrap .grid li img {
  max-width: 100%;
  border-radius: 2.6666666667rem
}

.slot-game .games-wrap .grid li.shown,
.casino-game .games-wrap .grid li.shown {
  opacity: 1
}

.slot-game .games-wrap .grid li.animate,
.casino-game .games-wrap .grid li.animate {
  transform: translateY(53.3333333333rem);
  animation: effect-2 .65s ease forwards
}

.slot-game .games-wrap .grid li .favorite,
.casino-game .games-wrap .grid li .favorite {
  position: absolute;
  z-index: 1;
  bottom: 1.2rem;
  width: 5.8666666667rem;
  height: 5.8666666667rem;
  padding: 2.1333333333rem;
  transform: translateZ(0);
  transform-style: preserve-3d
}

.slot-game .games-wrap .grid li .favorite.active video,
.casino-game .games-wrap .grid li .favorite.active video {
  position: absolute;
  z-index: 1;
  top: -10.6666666667rem;
  left: 50%;
  width: 8.5333333333rem;
  height: auto;
  transform: translate(-50%)
}

.slot-game .games-wrap .grid.effect-2,
.casino-game .games-wrap .grid.effect-2 {
  transform: translateY(53.3333333333rem);
  animation: effect-2 .65s ease forwards
}

.slot-game .title,
.casino-game .title {
  display: flex;
  align-items: center;
  height: 4.2666666667rem;
  margin: 0 4.2666666667rem 0 8.5333333333rem;
  color: var(--event-title);
  font-size: 3.7333333333rem;
  font-weight: 500
}

.slot-game .title:before,
.casino-game .title:before {
  content: "";
  position: absolute;
  left: 4.2666666667rem;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  border-radius: .5333333333rem;
  background: var(--event-border)
}

.provider-wrap {
  display: flex;
  position: fixed;
  z-index: 110;
  top: 13.0666666667rem;
  width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--new-slot-search-bg)
}

.provider-wrap .provider-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 3.2rem 2.1333333333rem
}

.provider-wrap .provider-scroll .search-block {
  position: relative;
  text-align: center
}

.search-block .magnifier {
  display: flex;
  position: absolute;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 14.4rem;
  height: 14.4rem;
  margin: 0 2.1333333333rem
}

.search-block .magnifier svg {
  z-index: 999;
  margin: 0 auto
}

.search-block .magnifier svg g {
  stroke: var(--new-slot-search-icon-color)
}

.search-block .magnifier circle {
  stroke-dasharray: 45.55 45.55;
  stroke-dashoffset: 91.1
}

.search-block .magnifier path {
  stroke-dasharray: 27.91 27.91;
  stroke-dashoffset: -23
}

.search-block .input-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 14.4rem;
  height: 14.4rem;
  margin: 0 2.1333333333rem;
  border: .5333333333rem solid var(--new-slot-search-border);
  border-radius: 50%;
  background: var(--new-slot-input-bg)
}

.search-block .input-box .search {
  display: block;
  width: 100%;
  min-width: 9.0666666667rem;
  height: 100%;
  padding: 0 4.2666666667rem;
  border: 0;
  border-radius: 2.6666666667rem;
  outline: none;
  background: transparent;
  color: var(--new-slot-input-txt);
  font-size: 3.7333333333rem;
  font-weight: 500
}

.search-block .input-box .clear {
  display: none;
  position: relative;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  margin-right: 4.2666666667rem;
  padding: 2.1333333333rem;
  border: 0;
  border-radius: 50%;
  background: var(--new-slot-clear-icon-color);
  font-size: 3.2rem;
  font-weight: 500;
  mask: var(--new-slot-clear-icon) no-repeat center/100%;
  -webkit-mask: var(--new-slot-clear-icon) no-repeat center/100%
}

.search-block .input-box .cancel {
  display: none;
  position: relative;
  padding: 1.0666666667rem 4.2666666667rem;
  border-left: .4rem solid var(--new-slot-cancel-border);
  color: var(--new-slot-cancel-txt);
  font-size: 3.2rem
}

.provider-scroll ul {
  display: flex;
  margin: 0;
  padding-left: 0;
  list-style: none
}

.provider-scroll ul li {
  display: grid;
  position: relative;
  grid-template-columns: 14.4rem;
  grid-template-rows: 14.4rem auto;
  margin: 1.0666666667rem 2.1333333333rem 0;
  text-align: center;
  background: var(--new-slot-provider-bg);
  border-radius: 50%
}

.provider-scroll ul li .provider {
  position: absolute;
  left: 50%;
  width: 8rem;
  height: 8rem;
  margin-top: 3.2rem;
  transform: translate(-50%)
}

.provider-scroll ul li:before {
  content: "";
  display: block;
  border: .5333333333rem solid var(--new-slot-provider-border);
  border-radius: 50%;
  box-shadow: 0 0 0 1.0666666667rem color-mix(in srgb, var(--new-slot-provider-shadow), transparent 70%)
}

.provider-scroll ul li.active:before {
  border: .5333333333rem solid var(--new-slot-provider-border-active);
  box-shadow: 0 0 1.0666666667rem 1.0666666667rem color-mix(in srgb, var(--new-slot-provider-shadow-active), transparent 70%)
}

.search-wrap,
.results-wrap {
  display: none;
  position: fixed;
  z-index: 114;
  top: 34.6666666667rem;
  left: 0;
  width: 100%;
  height: calc(100% - 34.6666666667rem);
  overflow-x: hidden;
  overflow-y: auto
}

.search-box {
  display: none;
  position: relative;
  top: 0;
  width: 100%;
  height: 100vh;
  padding: 4.2666666667rem 4.2666666667rem 17.0666666667rem;
  overflow-y: auto;
  border-radius: 0 0 4rem 4rem;
  background: var(--new-slot-search-area-bg)
}

.search-box:after {
  content: "";
  display: block;
  position: fixed;
  bottom: 0;
  width: calc(100% - 8.5333333333rem);
  height: 21.3333333333rem;
  background: var(--new-slot-search-area-bg)
}

.search-box .recently-played,
.search-box .my-favorites {
  display: inline-flex;
  position: relative;
  align-items: center;
  width: 48%;
  height: 15.4666666667rem;
  margin-bottom: 6.4rem;
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  color: #fff;
  font-size: 3.2rem;
  font-weight: 500;
  text-decoration: none
}

.search-box .recently-played:before,
.search-box .my-favorites:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 15.4666666667rem;
  mix-blend-mode: overlay
}

.search-box .recently-played {
  background: var(--new-slot-recently-played-bg)
}

.search-box .recently-played:before {
  background: var(--new-slot-recently-played) no-repeat center/contain
}

.search-box .my-favorites {
  float: right;
  background: var(--new-slot-my-favorites-bg)
}

.search-box .my-favorites:before {
  background: var(--new-slot-my-favorites) no-repeat center/contain
}

.search-box .button {
  position: fixed;
  z-index: 9000;
  bottom: 4.2666666667rem;
  width: calc(100% - 8.5333333333rem)
}

.results-box {
  display: none;
  position: relative;
  z-index: 9000;
  top: 0;
  width: 100%;
  height: auto;
  padding: 0 4.2666666667rem 4.2666666667rem;
  overflow-y: auto;
  border-radius: 0 0 4rem 4rem;
  background: var(--new-slot-search-area-bg)
}

.results-box .results-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.1333333333rem
}

.results-box .results-info span {
  align-self: center;
  color: var(--new-slot-results-title);
  font-size: 3.2rem;
  font-weight: 500
}

.results-box .results-info .layout-icon {
  width: 4rem;
  height: 8.2666666667rem
}

.results-box .results-info .layout-icon g {
  stroke: var(--new-slot-results-layout-icon-color)
}

.game-list {
  display: none;
  padding: 0
}

.game-list li {
  display: grid;
  position: relative;
  grid-template-columns: 17.0666666667rem auto 6.4rem 21.3333333333rem;
  align-items: center;
  column-gap: 4.2666666667rem;
  row-gap: 1.0666666667rem
}

.game-list li+li {
  margin-top: 4.2666666667rem
}

.game-list li img {
  grid-row: 1/span 2;
  max-width: 100%;
  border-radius: 1.3333333333rem
}

.game-list li h5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  grid-column-start: 2;
  grid-row-start: 1;
  align-self: flex-end;
  margin: 0;
  color: var(--new-slot-game-list-title);
  font-size: 3.7333333333rem;
  font-weight: 500
}

.game-list li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column-start: 2;
  grid-row-start: 2;
  align-self: flex-start;
  margin: 0;
  color: var(--new-slot-game-list-subtitle);
  font-size: 3.2rem
}

.game-list li .favorite {
  position: relative;
  grid-row: 1/span 2;
  width: 6.4rem;
  height: 6.4rem;
  padding: 2.6666666667rem;
  background: var(--new-slot-game-list-star-icon) no-repeat center;
  justify-self: center
}

.game-list li .favorite.active video {
  position: absolute;
  z-index: 1;
  top: -12.5333333333rem;
  left: 50%;
  width: 9.6rem;
  height: auto;
  transform: translate(-50%)
}

.game-list li button {
  grid-row: 1/span 2;
  height: 10.6666666667rem;
  border: transparent;
  border-radius: 2.6666666667rem;
  background: var(--new-slot-game-list-btn-bg);
  color: var(--new-slot-game-list-btn-txt);
  font-size: 3.4666666667rem;
  font-weight: 500
}

.game-list li button.active {
  background: var(--new-slot-game-list-btn-bg-active);
  color: var(--new-slot-game-list-btn-txt-active)
}

.game-list.active {
  display: block
}

.game-grid {
  display: none;
  grid-gap: 2.1333333333rem;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0
}

.game-grid li {
  display: flex;
  position: relative;
  justify-content: center;
  padding-bottom: 2.1333333333rem;
  float: left;
  border-radius: 2.6666666667rem
}

.game-grid li:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 2.1333333333rem;
  width: 100%;
  height: 8rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--new-slot-search-area-bg), transparent 100%) 0%, var(--new-slot-search-area-bg) 100%)
}

.game-grid li:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2.6666666667rem;
  left: 50%;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  transform: translate(-50%);
  background: var(--new-slot-game-list-circle-star-icon) no-repeat center
}

.game-grid li img {
  max-width: 100%;
  border-radius: 2.6666666667rem
}

.game-grid li .favorite {
  position: absolute;
  z-index: 1;
  bottom: 1.2rem;
  width: 5.8666666667rem;
  height: 5.8666666667rem;
  padding: 2.1333333333rem;
  transform: translateZ(0);
  transform-style: preserve-3d
}

.game-grid li .favorite.active video {
  position: absolute;
  z-index: 1;
  top: -10.6666666667rem;
  left: 50%;
  width: 8.5333333333rem;
  height: auto;
  transform: translate(-50%)
}

.game-grid.active {
  display: grid
}

.category {
  padding-bottom: 4.2666666667rem
}

.category h4 {
  display: inline-block;
  align-items: center;
  height: 4.2666666667rem;
  opacity: 0;
  color: var(--new-slot-category-title);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.2666666667rem;
  font-weight: 500
}

.category span {
  margin-left: 4.2666666667rem;
  opacity: 0;
  color: color-mix(in srgb, var(--new-slot-category-title), transparent 50%);
  font-size: 3.2rem
}

.category ul {
  display: grid;
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 4.2666666667rem 0;
  padding: 0;
  list-style: none
}

.category ul li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 10.6666666667rem;
  border-radius: 2.6666666667rem;
  opacity: 0;
  background: var(--new-slot-radio-bg);
  color: var(--new-slot-radio-txt);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 10.6666666667rem;
  text-align: center;
  padding: 0 1.0666666667rem
}

.category ul li.active {
  background: var(--new-slot-radio-border-checked);
  color: var(--new-slot-radio-txt-checked)
}

.category ul li.active:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  border-bottom-right-radius: 3.2rem;
  background: var(--checkbox-check-icon) no-repeat center
}

.category ul li.active:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: .2666666667rem;
  left: .2666666667rem;
  width: calc(100% - .5333333333rem);
  height: calc(100% - .5333333333rem);
  border-radius: 2.5333333333rem;
  background: var(--checkbox-bg-checked)
}

.category.history span {
  float: right
}

.category.history ul {
  grid-gap: .2666666667rem;
  grid-template-columns: 1fr
}

.category.history ul li {
  display: flex;
  position: relative;
  align-items: center;
  padding: 4.2666666667rem 6.4rem 4.2666666667rem 8rem;
  border-radius: 0;
  background: transparent;
  text-align: left
}

.category.history ul li:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 32%;
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  background: var(--new-slot-history-clock-icon-color);
  mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/100%;
  -webkit-mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/100%
}

.category.history ul li+li {
  border-top: .2666666667rem solid var(--new-slot-history-border)
}

.category.history ul li .clear {
  display: block;
  position: absolute;
  right: 0;
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  background: var(--new-slot-history-clear-icon-color);
  mask: url(/assets/images/icon-set/icon-delete.svg) no-repeat center/100%;
  -webkit-mask: url(/assets/images/icon-set/icon-delete.svg) no-repeat center/100%
}

.category.history ul li.active {
  background: transparent
}

.category.history ul li.active:before {
  border-bottom-right-radius: 0
}

.category.history ul li.active:after {
  display: none
}

.prize-pool-wrap {
  position: relative;
  margin: 0 4.2666666667rem
}

.prize-pool-wrap .jackpot {
  width: 100%
}

.prize-pool-wrap .marquee-block {
  position: absolute;
  top: 17.6rem;
  left: 50%;
  width: 100%;
  height: 4.5333333333rem;
  overflow: hidden;
  transform: translate(-50%)
}

.prize-pool-wrap .marquee {
  position: relative;
  color: #ffef27;
  font-size: 4rem;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 .5333333333rem 1.0666666667rem rgba(0, 0, 0, .5)
}

.prize-pool-wrap .marquee .player-id,
.prize-pool-wrap .marquee .money {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block
}

.prize-pool-wrap .marquee span {
  position: relative;
  top: -.5333333333rem;
  margin: 0 1.0666666667rem;
  color: #fff
}

.prize-pool-wrap .marquee .player-id {
  max-width: 26.6666666667rem
}

.prize-pool-wrap .marquee .money {
  max-width: 40rem
}

.prize-pool-wrap .prize-pool-money {
  position: absolute;
  right: 5.3333333333rem;
  bottom: 11.4666666667rem;
  color: #fff;
  font-family: Inconsolata, monospace;
  font-size: 7.4666666667rem;
  font-weight: 700;
  letter-spacing: 1.0666666667rem
}

.prize-pool-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

.recently-played-wrap,
.my-favorites-wrap {
  position: relative;
  height: 100%
}

.recently-played-wrap .banner-wrap,
.my-favorites-wrap .banner-wrap {
  position: relative
}

.recently-played-wrap .banner-wrap img,
.my-favorites-wrap .banner-wrap img {
  width: 100%;
  height: auto;
  -webkit-mask: url(/assets/images/slotgame/irregular-mask.svg) no-repeat center;
  mask: url(/assets/images/slotgame/irregular-mask.svg) no-repeat center;
  mask-size: 100% auto;
  -webkit-mask: url(/assets/images/slotgame/irregular-mask.svg) no-repeat center;
  -webkit-mask-size: 100% auto
}

.recently-played-wrap .game-box,
.my-favorites-wrap .game-box {
  position: relative;
  top: -21.3333333333rem;
  width: 100%;
  height: auto;
  padding: 4.2666666667rem;
  overflow-y: auto
}

.recently-played-wrap .game-box .date-info,
.my-favorites-wrap .game-box .date-info {
  position: relative;
  top: 0;
  margin-bottom: 4.2666666667rem;
  color: var(--new-slot-details-date-txt);
  font-size: 4.2666666667rem;
  font-weight: 500;
  letter-spacing: .5333333333rem;
  text-shadow: 0 .5333333333rem 1.0666666667rem color-mix(in srgb, var(--new-slot-details-date-txt-shadow), transparent 20%)
}

.recently-played-wrap .game-box .date-info:after,
.my-favorites-wrap .game-box .date-info:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 80%;
  height: .2666666667rem;
  transform: translateY(-50%);
  opacity: .08;
  background: var(--new-slot-details-date-border)
}

.recently-played-wrap .game-box:nth-of-type(2) .date-info,
.my-favorites-wrap .game-box:nth-of-type(2) .date-info {
  color: #fff;
  text-shadow: 0 .5333333333rem 1.0666666667rem rgba(0, 0, 0, .8)
}

.recently-played-wrap .game-box:nth-of-type(2) .date-info:after,
.my-favorites-wrap .game-box:nth-of-type(2) .date-info:after {
  background: transparent
}

.recently-played-wrap .list-loading,
.my-favorites-wrap .list-loading {
  top: -23.4666666667rem
}

.recently-played-wrap .select-date,
.my-favorites-wrap .select-date {
  display: grid;
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  width: 100%;
  height: 21.3333333333rem;
  border-top-left-radius: 2.6666666667rem;
  border-top-right-radius: 2.6666666667rem;
  background: var(--new-slot-details-select-date-bg);
  box-shadow: 0 0 2.1333333333rem #0003;
  text-align: center
}

.recently-played-wrap .select-date .day,
.my-favorites-wrap .select-date .day {
  display: flex;
  z-index: 5000;
  flex-direction: column;
  justify-content: center;
  height: 100%
}

.recently-played-wrap .select-date .day.active .date,
.my-favorites-wrap .select-date .day.active .date {
  transition: color .5s ease-in-out;
  color: var(--new-slot-details-select-date-txt-active)
}

.recently-played-wrap .select-date span,
.my-favorites-wrap .select-date span {
  color: var(--new-slot-details-select-date-week-txt);
  font-size: 3.7333333333rem
}

.recently-played-wrap .select-date .date,
.my-favorites-wrap .select-date .date {
  width: 7.4666666667rem;
  height: 7.4666666667rem;
  margin-top: 2.1333333333rem;
  transform: translate(50%);
  color: var(--new-slot-details-select-date-txt);
  font-size: 3.7333333333rem;
  line-height: 7.2rem
}

.recently-played-wrap .select-date svg,
.my-favorites-wrap .select-date svg {
  position: absolute
}

.recently-played-wrap .target-wrap,
.my-favorites-wrap .target-wrap {
  position: absolute;
  z-index: 4000;
  bottom: 0;
  left: .2666666667rem;
  width: 100%;
  height: 16rem;
  filter: url(#goo)
}

.recently-played-wrap .target-wrap .ball-box,
.my-favorites-wrap .target-wrap .ball-box {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 14.2857142857%;
  height: 100%
}

.recently-played-wrap .target-wrap .ball-box .ball,
.my-favorites-wrap .target-wrap .ball-box .ball {
  position: absolute;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  background: var(--new-slot-details-select-date-ball)
}

.recently-played-wrap .target-wrap .ball-box:first-child,
.my-favorites-wrap .target-wrap .ball-box:first-child {
  transform: translate(600%)
}

.recently-played-wrap .target-wrap .ball-box.big,
.my-favorites-wrap .target-wrap .ball-box.big {
  transform: translate(var(--date-ball-translateX));
  transition: transform .5s ease-in-out .35s;
  pointer-events: none
}

.recently-played-wrap .game-grid li:before,
.my-favorites-wrap .game-grid li:before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--new-slot-details-game-grid-shadow), transparent 100%) 0%, var(--new-slot-details-game-grid-shadow) 100%)
}

.my-favorites-wrap .game-box {
  position: absolute;
  top: 53.3333333333rem
}

.animate-jello {
  animation: jello-horizontal .9s both
}

.pop-slot-details-filter,
.pop-casino-details-filter {
  position: fixed;
  z-index: 9000;
  bottom: -100%;
  width: 100%;
  max-height: 80vh;
  padding: 4.2666666667rem 4.2666666667rem 14.9333333333rem;
  transform: translate(0);
  transition: bottom .3s;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  background: var(--new-slot-details-pop-bg)
}

.pop-slot-details-filter.active,
.pop-casino-details-filter.active {
  bottom: 0
}

.pop-slot-details-filter .category h4,
.pop-slot-details-filter .category span,
.pop-slot-details-filter .category li,
.pop-casino-details-filter .category h4,
.pop-casino-details-filter .category span,
.pop-casino-details-filter .category li {
  opacity: 1
}

.pop-slot-details-filter .category li.active,
.pop-casino-details-filter .category li.active {
  position: relative;
  z-index: 0
}

.pop-slot-details-filter .pop-btn-group,
.pop-casino-details-filter .pop-btn-group {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2.1333333333rem #0003
}

.pop-slot-details-filter .pop-btn-group .btn-left,
.pop-slot-details-filter .pop-btn-group .btn-right,
.pop-casino-details-filter .pop-btn-group .btn-left,
.pop-casino-details-filter .pop-btn-group .btn-right {
  position: relative;
  width: 50%;
  height: 14.9333333333rem;
  background: var(--new-slot-details-pop-btn-bg);
  color: var(--new-slot-details-pop-btn-txt);
  font-weight: 500;
  line-height: 14.9333333333rem;
  text-align: center
}

.pop-slot-details-filter .pop-btn-group .btn-left,
.pop-casino-details-filter .pop-btn-group .btn-left {
  border-top-left-radius: 2.6666666667rem;
  color: color-mix(in srgb, var(--new-slot-details-pop-btn-txt), transparent 50%)
}

.pop-slot-details-filter .pop-btn-group .btn-left:after,
.pop-casino-details-filter .pop-btn-group .btn-left:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: .2666666667rem;
  height: calc(100% - 6.4rem);
  transform: translateY(-50%);
  background: var(--new-slot-details-pop-btn-border)
}

.pop-slot-details-filter .pop-btn-group .btn-right,
.pop-casino-details-filter .pop-btn-group .btn-right {
  border-top-right-radius: 2.6666666667rem
}

header.empty .header-right-btn-group {
  display: none
}

.game-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  text-align: center
}

.game-empty-box video {
  width: 26.6666666667rem;
  height: 26.6666666667rem;
  margin-bottom: 4.2666666667rem;
  opacity: .7
}

.game-empty-box h5 {
  margin-bottom: 2.1333333333rem;
  color: var(--new-slot-details-empty-txt);
  font-size: 4.2666666667rem;
  font-weight: 500
}

.game-empty-box h6 {
  margin-bottom: 6.4rem;
  opacity: .5;
  color: var(--new-slot-details-empty-txt);
  font-size: 3.2rem
}

.game-empty-box .button {
  height: 9.6rem;
  line-height: 9.6rem;
  font-size: 3.4666666667rem
}

.my-favorites-wrap .game-empty-box {
  margin-top: 10.6666666667rem
}

.my-favorites-wrap .game-empty-box .icon-no-data {
  width: 21.3333333333rem;
  height: 21.3333333333rem
}

.recommend-box {
  padding: 4.2666666667rem
}

.recommend-box .title {
  display: flex;
  align-items: center;
  height: 4.2666666667rem;
  margin: 4.2666666667rem;
  color: var(--event-title);
  font-size: 3.7333333333rem;
  font-weight: 500
}

.recommend-box .title:before {
  content: "";
  position: absolute;
  left: 4.2666666667rem;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  border-radius: .5333333333rem;
  background: var(--event-border)
}

.recommend-box .title:after {
  content: "";
  position: absolute;
  right: 4.2666666667rem;
  width: 50%;
  height: .2666666667rem;
  opacity: .08;
  background: var(--new-slot-details-date-border)
}

@keyframes effect-2 {
  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes scale-up-center {
  0% {
    transform: rotate(0) scale(.6);
    opacity: 0
  }

  to {
    transform: rotate(360deg) scale(1);
    opacity: 1
  }
}

@keyframes jello-horizontal {
  0% {
    transform: scaleZ(1)
  }

  30% {
    transform: scale3d(1.25, .75, 1)
  }

  40% {
    transform: scale3d(.75, 1.25, 1)
  }

  50% {
    transform: scale3d(1.15, .85, 1)
  }

  65% {
    transform: scale3d(.95, 1.05, 1)
  }

  75% {
    transform: scale3d(1.05, .95, 1)
  }

  to {
    transform: scaleZ(1)
  }
}

@keyframes data-loading {

  0%,
  50%,
  to {
    transform: scale(1)
  }

  25% {
    transform: scale(.6)
  }

  75% {
    transform: scale(1.4)
  }
}

.casino-game {
  top: 4.2666666667rem;
  margin-bottom: 0;
  padding-bottom: 0
}

.casino-game .banner {
  margin-bottom: 6.6666666667rem
}

.casino-game .game-title {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.casino-game .game-title .filter {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 13.3333333333rem;
  height: 13.3333333333rem
}

.casino-game .game-title .filter:before {
  content: "";
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-bottom: .5333333333rem;
  background-color: var(--event-title);
  -webkit-mask: url(/assets/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
  mask: url(/assets/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
  mask-size: 100% auto;
  -webkit-mask: url(/assets/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
  -webkit-mask-size: 100% auto
}

.casino-game .game-title .filter .badge {
  display: flex;
  position: absolute;
  top: 1.0666666667rem;
  right: .5333333333rem;
  align-items: center;
  justify-content: center;
  width: 5.8666666667rem;
  height: 5.8666666667rem;
  border-radius: 50%;
  background: #cd1818;
  color: #fff;
  font-size: 3.4666666667rem;
  font-weight: 500
}

.pop-casino-details-filter {
  padding: 8rem 4.2666666667rem 14.9333333333rem
}

.pop-casino-details-filter .recently-played,
.pop-casino-details-filter .my-favorites {
  display: inline-flex;
  position: relative;
  align-items: center;
  width: 48%;
  height: 15.4666666667rem;
  margin-bottom: 6.4rem;
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  color: #fff;
  font-size: 3.2rem;
  font-weight: 500;
  text-decoration: none
}

.pop-casino-details-filter .recently-played:before,
.pop-casino-details-filter .my-favorites:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 15.4666666667rem;
  mix-blend-mode: overlay
}

.pop-casino-details-filter .recently-played {
  background: var(--new-slot-recently-played-bg)
}

.pop-casino-details-filter .recently-played:before {
  background: var(--new-slot-recently-played) no-repeat center/contain
}

.pop-casino-details-filter .my-favorites {
  float: right;
  background: var(--new-slot-my-favorites-bg)
}

.pop-casino-details-filter .my-favorites:before {
  background: var(--new-slot-my-favorites) no-repeat center/contain
}

.iplimit-card-wrap {
  display: block;
  height: auto;
  border-radius: 1.3333333333rem;
  box-shadow: 0 .8rem 1.3333333333rem color-mix(in srgb, var(--offset-shadow), transparent 90%);
  font-size: 0;
  word-wrap: break-word;
  word-break: break-all
}

.iplimit-card-wrap .top-inner,
.iplimit-card-wrap .bottom-inner {
  font-size: 4.2666666667rem;
  line-height: 1.5
}

.iplimit-card-wrap .top-inner h3 {
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 12.8rem;
  font-weight: 700;
  line-height: normal
}

.iplimit-card-wrap .top-inner h4 {
  margin-bottom: 8rem;
  font-size: 4.8rem
}

.games-empty-container {
  display: inline-block;
  position: relative;
  width: calc(100% - 4.2666666667rem);
  margin: 0 2.1333333333rem 12.8rem;
  padding: 4.2666666667rem;
  background: var(--slot-empty-bg);
  text-align: center;
  vertical-align: middle
}

.games-empty-container .bottom-inner {
  width: 100%;
  height: 40vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.games-empty-container .top-inner {
  width: 100%;
  margin: auto;
  text-align: center
}

.games-empty-container .top-inner h3,
.games-empty-container .top-inner h4 {
  color: var(--slot-empty-txt)
}

.games-empty-container .top-inner h3 {
  display: inline-block;
  font-size: 18.1333333333rem;
  vertical-align: middle
}

.games-empty-container .top-inner h4 {
  margin-bottom: 15px;
  opacity: .8;
  line-height: 1.8
}

.content-full-height {
  text-align: center
}

.reguster-success-body {
  background: var(--pop-register-success-mask)
}

.register-success-cont .btn-secondary {
  color: var(--pop-register-success-home-btn-txt)
}

.reguster-success-fast-body {
  display: flex;
  flex-direction: inherit;
  align-items: center;
  justify-content: center;
  background: var(--fast-register-success-bg);
  text-align: center
}

.reguster-success-fast-body .register-success-cont {
  width: 90%
}

.reguster-success-fast-body .register-success-cont .top-inner h3,
.reguster-success-fast-body .register-success-cont .top-inner h4 {
  color: var(--color-success)
}

.reguster-success-fast-body .register-success-cont .top-inner>p {
  color: var(--fast-register-success-cont-text)
}

.reguster-success-fast-body .register-success-btn {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%
}

.reguster-success-fast-body .register-success-btn>.btn-default {
  width: 100%;
  margin: 0
}

.reguster-success-fast-body .register-success-btn .button {
  flex: 1 1 auto;
  margin: 0 1.3333333333rem 2.6666666667rem;
  border: 0
}

.register-success-wrap,
.register-fail-wrap,
.pop-biometric-success {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding: 4.2666666667rem;
  transform: translate(-50%, -50%);
  border-radius: 2.6666666667rem;
  background: var(--pop-register-success-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 .5333333333rem .5333333333rem .2666666667rem #0000001a, 0 1.0666666667rem 1.0666666667rem .2666666667rem #0000001a, 0 2.1333333333rem 2.1333333333rem .2666666667rem #0000001a, 0 4.2666666667rem 4.2666666667rem .2666666667rem #0000001a, 0 8.5333333333rem 8.5333333333rem .2666666667rem #0000001a;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all
}

.register-success-wrap:before,
.register-fail-wrap:before,
.pop-biometric-success:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle
}

.register-success-cont,
.register-fail-cont,
.biometric-success-cont,
.verified-success-cont {
  display: inline-block;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  vertical-align: middle
}

.register-success-cont .top-inner h3,
.register-fail-cont .top-inner h3,
.biometric-success-cont .top-inner h3,
.verified-success-cont .top-inner h3 {
  color: var(--pop-register-success-title);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 7.4666666667rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word
}

.register-success-cont .top-inner h4,
.register-fail-cont .top-inner h4,
.biometric-success-cont .top-inner h4,
.verified-success-cont .top-inner h4 {
  margin-bottom: 2.1333333333rem;
  color: var(--pop-register-success-subtitle);
  font-size: 4.8rem;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all
}

.register-success-cont .top-inner p,
.register-fail-cont .top-inner p,
.biometric-success-cont .top-inner p,
.verified-success-cont .top-inner p {
  max-height: 42.6666666667rem;
  margin-bottom: 4.2666666667rem;
  padding: 1.0666666667rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--pop-register-success-txt);
  font-size: 4rem;
  line-height: 1.5;
  word-break: break-word
}

.register-success-cont .top-inner .link,
.register-fail-cont .top-inner .link,
.biometric-success-cont .top-inner .link,
.verified-success-cont .top-inner .link {
  display: block;
  color: var(--pop-verification-link);
  text-decoration: underline;
  white-space: nowrap
}

.register-success-cont .btn-default,
.register-success-cont .btn-cancel,
.register-fail-cont .btn-default,
.register-fail-cont .btn-cancel,
.biometric-success-cont .btn-default,
.biometric-success-cont .btn-cancel,
.verified-success-cont .btn-default,
.verified-success-cont .btn-cancel {
  display: inline-block;
  width: auto;
  min-width: 40%;
  height: 12rem;
  padding: 0 2.6666666667rem;
  line-height: 12rem;
  text-decoration: none
}

.register-success-cont .btn-secondary,
.register-fail-cont .btn-secondary,
.biometric-success-cont .btn-secondary,
.verified-success-cont .btn-secondary {
  margin-right: 2.6666666667rem
}

.register-success-cont .btn-cancel,
.register-fail-cont .btn-cancel,
.biometric-success-cont .btn-cancel,
.verified-success-cont .btn-cancel {
  background: #555
}

.register-fail-cont .top-inner h3 {
  color: var(--pop-register-fail-title)
}

.register-fail-cont .top-inner>p {
  padding: 0
}

.comfirm-info {
  text-align: left
}

.btn-edit-group,
.register-success-btn {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%
}

.btn-edit-group .button,
.register-success-btn .button {
  flex: 1 1 auto;
  margin: 0 1.0666666667rem 2.1333333333rem;
  border: 0
}

.success-checkmark {
  width: 24rem;
  height: 25.3333333333rem;
  margin: 0 auto;
  overflow: hidden
}

.success-checkmark .check-icon {
  position: relative;
  box-sizing: content-box;
  width: 21.3333333333rem;
  height: 21.3333333333rem;
  border: 1.0666666667rem solid var(--register-success-check-icon);
  border-radius: 50%
}

.success-checkmark .check-icon:before {
  top: .8rem;
  left: -.5333333333rem;
  width: 8rem;
  transform-origin: 100% 50%;
  border-radius: 26.6666666667rem 0 0 26.6666666667rem
}

.success-checkmark .check-icon:after {
  top: 0;
  left: 8rem;
  width: 16rem;
  transform-origin: 0 50%;
  animation: rotate-circle 4s ease-in;
  border-radius: 0 26.6666666667rem 26.6666666667rem x 0
}

.success-checkmark .check-icon:before,
.success-checkmark .check-icon:after {
  content: "";
  position: absolute;
  height: 26.6666666667rem;
  transform: rotate(-45deg);
  background: var(--register-success-check-icon-clip)
}

.success-checkmark .check-icon .icon-line {
  display: block;
  position: absolute;
  z-index: 10;
  height: 1.3333333333rem;
  border-radius: .5333333333rem;
  background-color: var(--register-success-check-icon)
}

.success-checkmark .check-icon .icon-line.line-tip {
  top: 12.2666666667rem;
  left: 3.7333333333rem;
  width: 6.6666666667rem;
  transform: rotate(45deg);
  animation: icon-line-tip .7s
}

.success-checkmark .check-icon .icon-line.line-long {
  top: 10.1333333333rem;
  right: 2.1333333333rem;
  width: 12.5333333333rem;
  transform: rotate(-45deg);
  animation: icon-line-long .7s
}

.success-checkmark .check-icon .icon-circle {
  position: absolute;
  z-index: 10;
  top: -1.0666666667rem;
  left: -1.0666666667rem;
  box-sizing: content-box;
  width: 21.3333333333rem;
  height: 21.3333333333rem;
  border: 1.0666666667rem solid color-mix(in srgb, var(--register-success-check-icon), transparent 50%);
  border-radius: 50%
}

.success-checkmark .check-icon .icon-fix {
  position: absolute;
  z-index: 1;
  top: 2.1333333333rem;
  left: 6.9333333333rem;
  width: 1.3333333333rem;
  height: 22.6666666667rem;
  transform: rotate(-45deg);
  background-color: var(--register-success-check-icon-clip)
}

.fail-checkmark {
  width: 24rem;
  height: 25.3333333333rem;
  margin: 0 auto;
  overflow: hidden
}

.fail-checkmark .check-icon {
  position: relative;
  box-sizing: content-box;
  width: 21.3333333333rem;
  height: 21.3333333333rem;
  border: 1.0666666667rem solid var(--register-fail-check-icon);
  border-radius: 50%
}

.fail-checkmark .check-icon:before {
  top: .8rem;
  left: -.5333333333rem;
  width: 8rem;
  transform-origin: 100% 50%;
  border-radius: 26.6666666667rem 0 0 26.6666666667rem
}

.fail-checkmark .check-icon:after {
  top: 0;
  left: 8rem;
  width: 16rem;
  transform-origin: 0 50%;
  animation: rotate-circle 4s ease-in;
  border-radius: 0 26.6666666667rem 26.6666666667rem x 0
}

.fail-checkmark .check-icon:before,
.fail-checkmark .check-icon:after {
  content: "";
  position: absolute;
  height: 26.6666666667rem;
  transform: rotate(-45deg);
  background: var(--register-fail-check-icon-clip)
}

.fail-checkmark .check-icon .icon-line {
  display: block;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 0;
  height: 1.3333333333rem;
  transform-origin: left;
  border-radius: .5333333333rem;
  background-color: var(--register-fail-check-icon)
}

.fail-checkmark .check-icon .icon-line.line-tip {
  transform: rotate(45deg) translate(-50%);
  animation: icon-line .4s .5s forwards
}

.fail-checkmark .check-icon .icon-line.line-long {
  transform: rotate(-45deg) translate(-50%);
  animation: icon-line .4s .5s forwards
}

.fail-checkmark .check-icon .icon-circle {
  position: absolute;
  z-index: 10;
  top: -1.0666666667rem;
  left: -1.0666666667rem;
  box-sizing: content-box;
  width: 21.3333333333rem;
  height: 21.3333333333rem;
  border: 1.0666666667rem solid color-mix(in srgb, var(--register-fail-check-icon), transparent 50%);
  border-radius: 50%
}

.fail-checkmark .check-icon .icon-fix {
  position: absolute;
  z-index: 1;
  top: 2.1333333333rem;
  left: 6.9333333333rem;
  width: 1.3333333333rem;
  height: 22.6666666667rem;
  transform: rotate(-45deg);
  background-color: var(--register-fail-check-icon-clip)
}

@keyframes icon-line {
  0% {
    width: 0
  }

  to {
    width: 13.3333333333rem
  }
}

@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg)
  }

  5% {
    transform: rotate(-45deg)
  }

  12% {
    transform: rotate(-405deg)
  }

  to {
    transform: rotate(-405deg)
  }
}

@keyframes icon-line-tip {
  0% {
    top: 5.0666666667rem;
    left: .2666666667rem;
    width: 0
  }

  54% {
    top: 5.0666666667rem;
    left: .2666666667rem;
    width: 0
  }

  70% {
    top: 9.8666666667rem;
    left: -2.1333333333rem;
    width: 13.3333333333rem
  }

  84% {
    top: 12.8rem;
    left: 5.6rem;
    width: 4.5333333333rem
  }

  to {
    top: 12rem;
    left: 3.7333333333rem;
    width: 6.6666666667rem
  }
}

@keyframes icon-line-long {
  0% {
    top: 14.4rem;
    right: 12.2666666667rem;
    width: 0
  }

  65% {
    top: 14.4rem;
    right: 12.2666666667rem;
    width: 0
  }

  84% {
    top: 9.3333333333rem;
    right: 0;
    width: 14.6666666667rem
  }

  to {
    top: 10.1333333333rem;
    right: 2.1333333333rem;
    width: 12.5333333333rem
  }
}

.header-inner-promotion {
  background: var(--page-main-header-bg);
  color: var(--header-title)
}

.header-inner-promotion .page-main-close {
  cursor: pointer;
  opacity: 1;
  position: relative;
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2.6666666667rem;
  z-index: 2
}

.header-inner-promotion .page-main-close:hover {
  opacity: .7
}

.header-inner-promotion .page-main-close:after,
.header-inner-promotion .page-main-close:before {
  content: "";
  display: block;
  height: 80%;
  width: .5rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  background-color: var(--color-title);
  transform-origin: 50% 50%
}

.header-inner-promotion .page-main-close:after {
  transform: translateY(-50%) rotate(-45deg)
}

.header-inner-promotion .page-main-close:before {
  transform: translateY(-50%) rotate(45deg)
}

.header-inner-promotion .page-main-close:before,
.header-inner-promotion .page-main-close:after {
  border-radius: 10rem;
  background: var(--page-main-close-color)
}

.promotion {
  width: 100%;
  height: auto
}

.promotion .promotion-main {
  padding: 0 2.1333333333rem
}

.promotion .prompt {
  margin: 4.2666666667rem 0 8rem;
  font-size: 3.4666666667rem;
  text-align: center
}

.content-style h1 {
  font-size: 8.5333333333rem;
  font-weight: 700
}

.content-style h2 {
  font-size: 6.4rem;
  font-weight: 700
}

.content-style h3 {
  margin-bottom: 1.0666666667rem;
  overflow: hidden;
  color: var(--promotion-card-title);
  font-size: 4.2666666667rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap
}

.content-style h4 {
  margin-bottom: 2.1333333333rem;
  font-size: 3.7333333333rem;
  font-weight: 700
}

.content-style p {
  min-height: 6.6666666667rem;
  margin: 1.0666666667rem 0;
  font-size: 3.7333333333rem;
  line-height: 1.5;
  word-wrap: break-word
}

.content-style a:not(.button):not(.button a) {
  display: inline-block;
  height: 100%;
  color: var(--pop-promotion-link);
  text-decoration: none;
  padding: 0 1.0666666667rem
}

.content-style strong {
  font-weight: 700
}

.content-style em {
  font-style: italic
}

.content-style ol,
.content-style ul {
  margin: 2.6666666667rem 0
}

.content-style ol li,
.content-style ul li {
  margin: 0 0 1.3333333333rem;
  font-size: 3.4666666667rem;
  line-height: 5.3333333333rem
}

.content-style ol li {
  margin: 0 0 1.3333333333rem 4rem;
  list-style-type: decimal;
  text-indent: 0
}

.content-style .table {
  width: 100%;
  margin-bottom: 4rem;
  overflow-x: scroll;
  overflow-y: hidden;
  border-radius: 2.6666666667rem;
  text-align: left;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch
}

.content-style table tbody {
  border-radius: 2.6666666667rem
}

.content-style table th,
.content-style table td {
  width: 20%;
  padding: 2.1333333333rem 4.2666666667rem;
  border: .2666666667rem solid var(--pop-promotion-table-content-border);
  font-size: 3.4666666667rem;
  line-height: 4.2666666667rem;
  text-align: left
}

.content-style table td {
  background: var(--pop-promotion-table-content-bg);
  color: var(--pop-promotion-table-content-txt)
}

.content-style table th {
  background: var(--pop-promotion-table-content-title-bg);
  color: var(--pop-promotion-table-content-title-txt)
}

.content-style .times {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--promotion-clock-icon-color);
  font-size: 3.4666666667rem
}

.content-style .times i {
  display: inline-block;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-right: 1.3333333333rem;
  background-color: var(--promotion-clock-icon-color);
  vertical-align: middle;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 80%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 80%;
  flex: 0 0 5.3333333333rem
}

.content-style .times span {
  text-align: left
}

.content-style .form-wrap {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 0 2.6666666667rem;
  overflow-x: scroll;
  border-radius: 2.6666666667rem;
  background: var(--pop-turnover-table-bg);
  -webkit-overflow-scrolling: touch
}

.content-style .form-wrap .arrow {
  position: absolute;
  top: 50%;
  right: .5333333333rem;
  width: 6.6666666667rem;
  height: 6.6666666667rem;
  animation: table-arrow .5s infinite alternate;
  background: var(--pop-turnover-arrow-icon-color);
  mask-repeat: no-repeat;
  mask-position: 50%;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50%;
  -webkit-mask-size: 50%
}

.content-style .form-wrap .form-wrap-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start
}

.content-style .form-wrap .form-wrap-col div {
  display: flex;
  width: -webkit-fill-available;
  padding: 2.6666666667rem 2.1333333333rem;
  color: var(--pop-turnover-table-txt);
  font-size: 3.2rem;
  white-space: nowrap
}

.content-style .game-platform ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 2.6666666667rem
}

.content-style .game-platform li {
  flex: 0 0 23%;
  margin-right: 2%;
  font-weight: 500
}

.content-style .game-platform img {
  width: 100%;
  height: auto
}

.content-style .button {
  width: 100%;
  height: 9.6rem;
  margin-top: 2.1333333333rem;
  font-size: 3.7333333333rem;
  line-height: 9.6rem
}

.content-style .button .toggle {
  display: inline-block;
  position: relative;
  width: 4rem;
  height: 4rem;
  margin-right: .8rem;
  transition: all .3s;
  border-radius: 4rem;
  background-color: #fff;
  vertical-align: middle
}

.content-style .button .toggle:before,
.content-style .button .toggle:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.1333333333rem;
  height: .4rem;
  transform: translate(-50%, -50%);
  border-radius: .5333333333rem;
  background-color: var(--primary)
}

.content-style .button .toggle:after {
  width: .4rem;
  height: 2.1333333333rem
}

.content-style .button-box .button {
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
  color: var(--btn-status-txt);
  overflow: hidden
}

.content-style .button-box .button:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  background: var(--btn-before-bg);
  width: 100%;
  height: 100%
}

.content-style .button-box .button+.button {
  margin-left: 2.6666666667rem
}

.content-style .button-box .button__attend {
  background: var(--btn-attend-bg)
}

.content-style .button-box .button__request {
  background: var(--btn-request-bg);
  color: var(--btn-request-status-txt)
}

.content-style .button-box .button__joined {
  background: var(--btn-joined-bg);
  color: var(--btn-joined-status-txt)
}

.content-style .button-box .button__apply {
  background: var(--btn-apply-bg);
  color: var(--btn-apply-status-txt)
}

.content-style .button-box .button__detail {
  background: var(--btn-detail-bg);
  color: var(--btn-detail-status-txt)
}

.content-style .button-box .button__deposit {
  background: var(--btn-deposit-bg);
  color: var(--btn-deposit-status-txt)
}

.promotion-toggle {
  height: auto
}

.promotion-toggle.active .text-main {
  max-height: 800rem
}

.promotion-toggle.active .text-main h3,
.promotion-toggle.active .text-main p {
  overflow: auto;
  text-overflow: inherit;
  white-space: normal
}

.promotion-toggle.active .button .toggle {
  transform: rotate(225deg)
}

.promotion-box {
  position: relative;
  width: 100%;
  margin-bottom: 2.1333333333rem;
  overflow: hidden;
  border-radius: 1.3333333333rem;
  background: var(--promotion-bg);
  color: var(--promotion-card-txt);
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.promotion-box__tag {
  display: block;
  position: absolute;
  z-index: 2;
  top: 2.6666666667rem;
  left: 0;
  border-radius: 0 1.3333333333rem 1.3333333333rem 0;
  padding: 0 2.1333333333rem;
  font-size: 2.6666666667rem;
  line-height: 4.8rem;
  text-align: center;
  text-shadow: 0 .2666666667rem .2666666667rem color-mix(in srgb, var(--text-shadow), transparent 80%)
}

.promotion-box__tag:before,
.promotion-box__tag:after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.3333333333rem;
  height: 1.3333333333rem
}

.promotion-box__tag:before {
  top: -5px
}

.promotion-box__tag:after {
  display: none
}

html.is-mobile .promotion-box__tag:after {
  display: block;
  bottom: -5px;
  transform: rotateX(180deg)
}

.promotion-box .tag--free {
  background-color: var(--promotion-tag-free-bg);
  color: var(--promotion-tag-free-txt)
}

.promotion-box .tag--free:before,
.promotion-box .tag--free:after {
  background: radial-gradient(circle at right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 71%, var(--promotion-tag-free-bg) 0%)
}

.promotion-box .tag--bonus {
  background-color: var(--promotion-tag-bonus-bg);
  color: var(--promotion-tag-bonus-txt)
}

.promotion-box .tag--bonus:before,
.promotion-box .tag--bonus:after {
  background: radial-gradient(circle at right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 71%, var(--promotion-tag-bonus-bg) 0%)
}

.promotion-box .pic {
  position: relative;
  width: 100%;
  height: 31.4666666667rem;
  background-color: #ddd;
  animation: fadeIn .5s
}

.promotion-box .pic img {
  display: block;
  width: 100%;
  height: 100%
}

.promotion-box .cutoff {
  position: absolute;
  right: 2.1333333333rem;
  bottom: 2.1333333333rem;
  width: auto;
  height: 6.6666666667rem;
  padding: 0 2.1333333333rem;
  border-radius: .5333333333rem;
  background: var(--promotion-info-bg);
  color: var(--promotion-info-txt);
  font-size: 3.2rem;
  line-height: 6.6666666667rem;
  text-align: center
}

.promotion-box .promotion-box-inner {
  display: block;
  width: 100%;
  height: auto;
  padding: 3.2rem
}

.promotion-box .promotion-box-inner .text-main {
  display: block;
  width: 100%;
  max-height: 12.8rem;
  overflow: hidden;
  transition: all .6s
}

.button-box {
  display: flex;
  overflow: hidden
}

.promo-code-form {
  margin-bottom: 4.2666666667rem
}

.promo-code-form .input-group {
  height: 8rem;
  padding-bottom: 0;
  border-radius: 1.3333333333rem
}

.promo-code-form .input-group .promo-code-add-btn {
  position: absolute;
  text-align: center;
  line-height: 8rem;
  border-radius: 0 3px 3px 0;
  opacity: 1;
  background: var(--form-inputgroup-btn-bg);
  color: var(--form-inputgroup-btn-txt);
  inset: 0 0 0 auto;
  width: 12rem;
  height: 8rem
}

.promo-code-form .input-group input {
  height: 8rem;
  background-color: var(--form-inputgroup-input-bg);
  color: var(--form-inputgroup-input-txt);
  border-color: var(--form-inputgroup-input-border)
}

.promo-code-form .input-group input::placeholder {
  color: var(--form-inputgroup-input-txt-placeholder)
}

.promo-code-form .input-group input:focus {
  border-color: var(--form-inputgroup-input-border-focus)
}

@keyframes spin {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.custom-promo-code-form {
  margin-bottom: 3.7333333333rem
}

.custom-promo-code-form .promo-code-title {
  cursor: pointer;
  opacity: 1;
  display: block;
  color: var(--form-inputgroup-input-title);
  margin-bottom: 2.6666666667rem;
  font-size: 3.7333333333rem;
  display: flex;
  align-items: center
}

.custom-promo-code-form .promo-code-title .icon-arrow {
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  padding-top: .5333333333rem;
  margin-left: 2.6666666667rem;
  transition: transform .3s;
  background: var(--form-inputgroup-input-title)
}

.custom-promo-code-form .promo-code-title.fold .icon-arrow {
  transform: rotateX(180deg)
}

.custom-promo-code-form .promo-code-title:hover {
  opacity: .7
}

.custom-promo-code-form .input-group {
  height: 13.3333333333rem;
  padding-bottom: 0;
  border-radius: 1.3333333333rem;
  font-size: 3.7333333333rem;
  margin-bottom: 2.6666666667rem;
  transition: height .3s
}

.custom-promo-code-form .input-group .promo-code-add-btn {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 0 3px 3px 0;
  padding: 0 1.3333333333rem;
  opacity: 1;
  background-color: var(--form-inputgroup-btn-bg);
  color: var(--form-inputgroup-btn-txt);
  inset: 0 0 0 auto;
  min-width: 18.6666666667rem;
  max-width: 37.3333333333rem;
  height: 13.3333333333rem;
  transition: height .3s
}

.custom-promo-code-form .input-group .promo-code-add-btn span {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.custom-promo-code-form .input-group .promo-code-add-btn:hover {
  opacity: .7
}

.custom-promo-code-form .input-group .icon-loader {
  width: 7.4666666667rem;
  height: 7.4666666667rem;
  background: var(--form-inputgroup-btn-txt);
  animation: spin 2s linear infinite
}

.custom-promo-code-form .input-group input {
  height: 13.3333333333rem;
  padding: 0 3.2rem;
  transition: height .3s;
  font-size: 3.7333333333rem;
  background-color: var(--form-inputgroup-input-bg);
  color: var(--form-inputgroup-input-txt)
}

.custom-promo-code-form .input-group input:focus {
  padding: 0 2.9333333333rem;
  border: .2666666667rem solid var(--form-inputgroup-btn-bg)
}

.custom-promo-code-form .input-group input::placeholder {
  font-size: 3.7333333333rem
}

.custom-promo-code-form .input-group.fold {
  height: 0rem
}

.custom-promo-code-form .input-group.fold input {
  height: 0rem;
  border: 0
}

.custom-promo-code-form .input-group.fold .promo-code-add-btn {
  height: 0rem
}

.custom-promo-code-form .input-group.fold .promo-code-add-btn span,
.custom-promo-code-form .input-group.fold .promo-code-msg {
  display: none
}

.custom-promo-code-form .promo-code-msg {
  font-size: 3.7333333333rem;
  display: flex;
  align-items: center
}

.custom-promo-code-form .promo-code-msg .icon {
  flex-shrink: 0;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-right: 1.6rem;
  padding: .5333333333rem;
  display: none
}

.custom-promo-code-form .promo-code-msg.error {
  color: var(--color-danger)
}

.custom-promo-code-form .promo-code-msg.error .icon-error {
  display: block;
  background: var(--color-danger)
}

.custom-promo-code-form .promo-code-msg.success {
  color: var(--color-success)
}

.custom-promo-code-form .promo-code-msg.success .icon-success {
  display: block;
  background: var(--color-success)
}

.custom-promo-code-form .icon {
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 90%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 90%
}

.content .aboutus-wrap {
  min-height: 100vh
}

.aboutus-body {
  position: relative;
  flex: 1;
  margin: 2.1333333333rem 2.1333333333rem 13.8666666667rem
}

.article-content {
  width: auto;
  padding: 2.1333333333rem;
  background: var(--about-us-bg)
}

.article-content-title {
  margin-bottom: 4.2666666667rem;
  color: var(--about-us-table-title);
  font-size: 4.2666666667rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5
}

.article-detail {
  margin-bottom: 6.4rem;
  line-height: 1.5
}

.article-detail-tile {
  margin-bottom: 2.1333333333rem;
  color: var(--about-us-title);
  font-weight: 700
}

.article-detail-tile .link {
  color: var(--about-us-mail-link)
}

.article-detail-sub-tile {
  color: var(--about-us-table-title-txt);
  font-size: 3.4666666667rem;
  font-style: italic;
  font-weight: 700
}

.article-detail-content .text {
  width: inherit;
  margin-bottom: 6.4rem;
  color: var(--about-us-table-title-txt);
  font-size: 3.4666666667rem;
  line-height: 1.6
}

.article-detail-content .list-number,
.article-detail-content .list-number-suffix-parentheses,
.article-detail-content .list-lower-alpha,
.article-detail-content .list-dot {
  width: inherit;
  margin-bottom: 5.3333333333rem;
  margin-left: 5.3333333333rem;
  color: var(--about-us-table-title-txt);
  font-size: 3.4666666667rem;
  line-height: 1.6
}

.article-detail-content .list-number>li,
.article-detail-content .list-number-suffix-parentheses>li,
.article-detail-content .list-lower-alpha>li,
.article-detail-content .list-dot>li {
  display: list-item;
  padding-bottom: 1.3333333333rem;
  counter-increment: li
}

.article-detail-content .list-number li {
  list-style: decimal
}

.article-detail-content .list-dot li {
  list-style: disc
}

.article-detail-content .list-number-suffix-parentheses,
.article-detail-content .list-lower-alpha {
  position: relative;
  counter-reset: count
}

.article-detail-content .list-number-suffix-parentheses>li,
.article-detail-content .list-lower-alpha>li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  counter-increment: count
}

.article-detail-content .list-number-suffix-parentheses>li>span,
.article-detail-content .list-lower-alpha>li>span {
  flex: 1
}

.article-detail-content .list-number-suffix-parentheses>li:before,
.article-detail-content .list-lower-alpha>li:before {
  display: inline-block;
  margin-right: 1.3333333333rem
}

.article-detail-content .list-nowrap>li {
  flex-wrap: nowrap
}

.article-detail-content .list-number-suffix-parentheses>li:before {
  content: counter(count) ") "
}

.article-detail-content .list-lower-alpha>li:before {
  content: counter(count, lower-alpha) "."
}

.article-detail-content .point {
  display: block;
  margin-left: 4.2666666667rem
}

.article-detail-content .point:before {
  content: "\25b8";
  display: block;
  margin-right: 2.1333333333rem;
  margin-left: -4rem;
  color: var(--primary)
}

.article-detail-content .point-list>li {
  display: block;
  width: 100%
}

.article-detail-content .link {
  display: block;
  color: var(--about-us-mail-link)
}

.article-detail .table {
  margin-bottom: 5.3333333333rem;
  border-collapse: separate;
  border: .2666666667rem solid var(--about-us-table-title-border);
  border-radius: 2.6666666667rem;
  background-color: var(--about-us-table-bg);
  font-size: 3.2rem;
  line-height: 1.4
}

.article-detail .table-title {
  padding: 0 2.6666666667rem;
  border-bottom: 0;
  background-color: var(--about-us-table-title-bg);
  color: var(--about-us-table-title);
  text-align: center;
  vertical-align: middle
}

.article-detail .table-title:first-child {
  border-radius: 2.1333333333rem 0 0
}

.article-detail .table-title:last-child {
  border-radius: 0 2.1333333333rem 0 0
}

.article-detail .table td {
  padding: 1.6rem;
  border-top: .2666666667rem solid var(--about-us-table-title-border);
  color: var(--color-text)
}

.article-detail .txt-center {
  text-align: center
}

.phone-area-code {
  flex: 0 0 32%;
  margin-right: 2.1333333333rem
}

.phone-area-code .btn-select span {
  max-width: 19.2rem;
  overflow: hidden;
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.8rem
}

.phone-area-code .btn-select:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 5.3333333333rem;
  right: 2.1333333333rem;
  border-width: 1.0666666667rem;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent
}

.lang-select {
  position: relative;
  font-size: 3.7333333333rem
}

.phone-code-list,
.currency-code-list,
.social-code-list {
  position: absolute;
  z-index: 135;
  top: 12rem;
  left: 0;
  width: 100%;
  max-height: 58.6666666667rem;
  padding: 0 1.0666666667rem;
  overflow: scroll;
  border-radius: 1.0666666667rem;
  background: var(--form-input-bg);
  box-shadow: 0 .5333333333rem 1.0666666667rem #345ece26
}

.phone-code-list li,
.currency-code-list li,
.social-code-list li {
  display: flex;
  margin-bottom: 0;
  padding: 2.1333333333rem 0;
  list-style: none
}

.phone-code-list img,
.currency-code-list img,
.social-code-list img {
  margin: 1.0666666667rem;
  border-radius: 50%
}

.phone-code-list span,
.currency-code-list span,
.social-code-list span {
  color: var(--form-input-txt);
  font-size: 4.2666666667rem
}

.phone-code-list img,
.social-code-list img,
.btn-select img {
  width: 8rem;
  border-radius: 50%;
  background: var(--form-select-item-bg)
}

.phone-code-list span,
.social-code-list span,
.btn-select span {
  font-family: var(--custom-font), var(--custom-serif);
  margin-left: 1.0666666667rem
}

.phone-code-list img,
.phone-code-list span,
.social-code-list img,
.social-code-list span,
.btn-select img,
.btn-select span {
  display: inline-block;
  vertical-align: middle
}

.phone-code-list-group,
.currency-code-list-group,
.social-code-list-group {
  display: none;
  width: 100%;
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem 1.0666666667rem #345ece26
}

.open {
  display: show !important
}

.logo-box {
  display: flex;
  position: relative;
  width: 53.3333333333rem;
  height: 12rem;
  margin: 8.5333333333rem auto;
  overflow: hidden;
  border: 0;
  background: no-repeat center center/contain
}

.btn-select {
  position: relative;
  width: 100%;
  height: 11.7333333333rem;
  padding: 0 0 0 2.1333333333rem;
  border: 0;
  border-radius: 1.0666666667rem;
  background: var(--form-input-bg);
  color: var(--form-input-txt);
  font-size: 3.2rem
}

.btn-select li {
  padding-bottom: 0;
  float: left;
  list-style: none
}

.btn-select:hover li {
  margin-left: 0
}

.btn-select:focus {
  outline: none
}

.btn-select:disabled {
  border-bottom: .2666666667rem solid var(--color-input-form-disabled);
  border-radius: 0;
  background: none
}

.resend-set {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 4.2666666667rem;
  color: var(--wallet-otp-resend-txt);
  font-size: 3.2rem;
  line-height: 11.7333333333rem
}

.resend-set.active {
  display: inline-block
}

.btn-vcode {
  height: 11.7333333333rem;
  padding: 0 2.6666666667rem;
  transition: .3s;
  background: var(--wallet-otp-send-btn-bg);
  font-size: 3.4666666667rem;
  line-height: 11.7333333333rem;
  text-shadow: none
}

.btn-vcode>i,
.btn-vcode p {
  display: inline-block;
  text-align: center;
  vertical-align: middle
}

.btn-vcode p {
  padding: 0;
  color: var(--wallet-otp-send-btn-txt);
  font-size: 4.2666666667rem;
  line-height: 10.6666666667rem
}

.btn-vcode p span {
  display: none;
  width: .8rem;
  height: .8rem;
  margin-left: .8rem;
  border-radius: 50%;
  background-color: #fff
}

.btn-vcode.active {
  padding: 0;
  animation: btnmove .4s forwards ease-in
}

.btn-vcode.active .line {
  animation: none;
  opacity: 0
}

.btn-vcode.active.sending {
  opacity: 0
}

@keyframes btnmove {
  0% {
    right: 0%
  }

  99% {
    right: -100%
  }

  to {
    width: 0
  }
}

.btn-vcode.resend {
  padding: 0 2.6666666667rem;
  animation: resend .3s forwards ease-in
}

@keyframes resend {
  0% {
    right: -100%
  }

  to {
    right: 0%
  }
}

.btn-vcode.sending {
  background-color: var(--wallet-otp-sending-btn-bg);
  pointer-events: none
}

.btn-vcode.sending .svg-mail {
  width: 8rem;
  mask: url(/assets/images/icon-set/icon-mail-type01.svg) no-repeat center/30%;
  -webkit-mask: url(/assets/images/icon-set/icon-mail-type01.svg) no-repeat center/30%
}

.btn-vcode.sending .line {
  animation: none;
  opacity: 0
}

.btn-vcode.sending p span {
  display: inline-block
}

.inputbox-tip {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.inputbox-tip__icon {
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  background: var(--form-txt);
  margin-left: 2.6666666667rem;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  cursor: pointer
}

.inputbox-tip__icon:hover+.inputbox-tip-content {
  opacity: 1
}

.inputbox-tip__content {
  position: absolute;
  opacity: 0;
  width: 74.6666666667rem;
  top: 8rem;
  left: 12rem;
  border-radius: .8rem;
  background: var(--register-question-tip-bg);
  text-wrap: wrap;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
  cursor: auto
}

.inputbox-tip__content p {
  padding: 10px;
  text-align: left;
  color: var(--register-question-tip-txt);
  white-space: normal
}

.inputbox-tip__content:before {
  content: "";
  position: absolute;
  display: block;
  left: 8rem;
  top: -4.2666666667rem;
  border: 2.6666666667rem solid;
  border-color: transparent transparent var(--register-question-tip-bg) transparent
}

.inputbox-tip-content--show {
  opacity: 1;
  pointer-events: initial;
  cursor: pointer
}

.phone-wrap,
.social-wrap {
  display: flex;
  flex-flow: row nowrap;
  border-radius: 2.6666666667rem
}

.phone-wrap .clear,
.social-wrap .clear {
  top: 0
}

.phone-wrap input:-webkit-autofill,
.phone-wrap input:-webkit-autofill:hover,
.phone-wrap input:-webkit-autofill:focus,
.social-wrap input:-webkit-autofill,
.social-wrap input:-webkit-autofill:hover,
.social-wrap input:-webkit-autofill:focus {
  box-shadow: 0 0 0 50px var(--form-input-bg) inset !important
}

.third-party-login {
  text-align: center
}

.third-party-login.content {
  position: absolute;
  height: auto;
  background: var(--third-party-login-content-bg)
}

.third-party-login.player-content {
  margin-bottom: 0
}

.third-party-login.member-content .button {
  margin: 2.6666666667rem 2.1333333333rem
}

.third-party-login .quick-login-wrapper .logo-box {
  margin: 7.4666666667rem auto
}

.third-party-login .quick-login-wrapper .error-message {
  display: grid;
  grid-template-columns: 4.2666666667rem 1fr;
  gap: 2.1333333333rem;
  align-items: start
}

.third-party-login .login-info-box {
  margin: 0 .5333333333rem
}

.third-party-login .input-group+.puzzle-verification-box {
  margin-top: 3.7333333333rem
}

.third-party-login .input-group+.login-info-box {
  margin-top: 1.3333333333rem
}

.third-party-login .input-group input.active+.delete-btn {
  border: 1px solid #2d3953;
  background: #2d3953
}

.third-party-login .input-group.login-tab {
  padding-bottom: 0
}

.third-party-login .input-group.error select {
  border: .2666666667rem solid var(--color-danger)
}

.third-party-login .input-group.check .clear,
.third-party-login .input-group.password .input-status,
.third-party-login .input-group.new-password .input-status,
.third-party-login .input-group.password .clear,
.third-party-login .input-group.new-password .clear {
  right: 7.4666666667rem
}

.third-party-login .input-group.password .clear.hasbutton,
.third-party-login .input-group.new-password .clear.hasbutton {
  right: 29.3333333333rem
}

.third-party-login .input-group.money label {
  position: absolute;
  z-index: 2;
  top: 6.4rem;
  left: 4.2666666667rem;
  transform: translateY(-50%)
}

.third-party-login .input-group.money input {
  text-align: right
}

.third-party-login .input-group.money .clear {
  top: 0
}

.third-party-login .input-group.currency label {
  position: absolute;
  z-index: 2;
  top: 6.4rem;
  left: 4.2666666667rem;
  transform: translateY(-50%)
}

.third-party-login .input-group.currency input {
  text-align: right
}

.third-party-login .input-group.currency .clear {
  top: 0
}

.third-party-login .input-group.upload-file .input-wrap:before {
  content: "";
  display: flex;
  position: absolute;
  z-index: 1;
  inset: 0;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2.6666666667rem;
  border-radius: 2.1333333333rem;
  background-color: #555;
  pointer-events: none
}

.third-party-login .input-group.upload-file input {
  opacity: 0
}

.third-party-login .input-group.date input:focus {
  padding: 0 4.2666666667rem
}

.third-party-login .input-group input:-webkit-autofill:not(.clear):not(.clear),
.third-party-login .input-group input:-webkit-autofill:hover:not(.clear):not(.clear),
.third-party-login .input-group input:-webkit-autofill:focus:not(.clear):not(.clear),
.third-party-login .input-group select:-webkit-autofill,
.third-party-login .input-group select:-webkit-autofill:hover,
.third-party-login .input-group select:-webkit-autofill:focus,
.third-party-login .input-group textarea:-webkit-autofill,
.third-party-login .input-group textarea:-webkit-autofill:hover,
.third-party-login .input-group textarea:-webkit-autofill:focus {
  background-image: none;
  box-shadow: 0 0 0 50px var(--third-party-login-form-input-bg) inset;
  color: var(--third-party-login-form-input-txt);
  -webkit-text-fill-color: var(--third-party-login-form-input-txt)
}

.third-party-login .input-wrap .status {
  position: absolute;
  top: 50% !important;
  right: 0;
  flex-flow: row nowrap;
  padding: 0 4.2666666667rem;
  transform: translateY(-50%);
  color: #40d0cb;
  font-size: 3.2rem;
  text-decoration: none
}

.third-party-login .input-wrap .status:before {
  display: none !important
}

.third-party-login .input-wrap .status span {
  content: "";
  display: inline-block;
  position: relative;
  top: .5333333333rem;
  width: 3.4666666667rem;
  height: 3.4666666667rem;
  margin-right: 1.3333333333rem;
  background-color: #40d0cb;
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: contain
}

.third-party-login .input-wrap .unconfirm-btn {
  color: #ffd259;
  text-decoration: underline
}

.third-party-login .input-wrap .unconfirm-btn:before {
  display: none
}

.third-party-login .input-wrap .unconfirm-btn span {
  display: inline-block;
  width: 3.4666666667rem;
  height: 3.4666666667rem;
  margin-right: 1.3333333333rem;
  background-color: #ffd259;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  -webkit-mask-size: contain
}

.third-party-login .input-wrap .get-vcode-btn span {
  padding: .5333333333rem 1.6rem;
  border-radius: 8rem;
  background: #79a5fc;
  color: #fff
}

.third-party-login .input-wrap .get-vcode-btn.active {
  background: transparent;
  color: #fff;
  pointer-events: none
}

.third-party-login .banner {
  margin: .8rem 0 0;
  background: var(--third-party-login-content-bg)
}

.third-party-login .banner .banner-v1 {
  height: 44.8rem
}

.third-party-login .banner .slider .slick-slide {
  height: 42.1333333333rem;
  margin-bottom: 0
}

.third-party-login .banner .slick-dots {
  bottom: 2.6666666667rem
}

.third-party-login .banner .slick-dots li {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--third-party-login-banner-dot)
}

.third-party-login .banner .slick-dots li:after {
  background-color: var(--third-party-login-banner-dot-active)
}

.third-party-login .button {
  width: calc(100% - 9.0666666667rem);
  background: var(--btn-main-bg);
  color: var(--btn-main-txt)
}

.third-party-login .button.btn-disabled {
  background: var(--btn-main-bg-disabled);
  pointer-events: none
}

.third-party-login .button.btn-disabled a {
  color: var(--btn-main-txt-disabled)
}

.third-party-login .button+.biometric-group {
  margin-top: 8rem
}

.third-party-login .btn-primary {
  background: var(--third-party-register-btn-main-bg);
  box-shadow: inset 0 0 .8rem var(--third-party-register-btn-main-bg-inner-shadow);
  color: var(--third-party-register-btn-main-txt)
}

.third-party-login .btn-primary a {
  color: var(--third-party-register-btn-main-txt)
}

.third-party-login .btn-secondary {
  background: var(--third-party-register-btn-secondary-bg, var(--btn-secondary-bg));
  box-shadow: inset 0 0 .8rem var(--third-party-register-btn-secondary-bg-inner-shadow);
  color: var(--third-party-register-btn-secondary-txt, var(--btn-secondary-txt))
}

.third-party-login .btn-secondary a {
  color: var(--third-party-register-btn-secondary-txt, var(--btn-secondary-txt))
}

.third-party-login .btn-fourth {
  background: var(--third-party-register-btn-tertiary-bg);
  box-shadow: inset 0 0 .8rem var(--third-party-register-btn-tertiary-bg-inner-shadow)
}

.third-party-login .btn-fourth a {
  color: var(--third-party-register-btn-tertiary-txt)
}

.third-party-login .btn-google,
.third-party-login .btn-facebook,
.third-party-login .btn-biometric.btn-fourth {
  display: flex;
  align-items: center;
  justify-content: center
}

.third-party-login .btn-google a,
.third-party-login .btn-facebook a,
.third-party-login .btn-biometric.btn-fourth a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0
}

.third-party-login .btn-google .item-icon,
.third-party-login .btn-facebook .item-icon,
.third-party-login .btn-biometric.btn-fourth .item-icon {
  position: relative;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-right: 2.1333333333rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.third-party-login .btn-google {
  overflow: hidden
}

.third-party-login .btn-google .btn-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.third-party-login .signup-tips {
  display: block;
  padding: 2.6666666667rem 4rem;
  color: var(--third-party-register-tips-txt);
  font-size: 3.7333333333rem
}

.third-party-login .signup-tips a,
.third-party-login .signup-tips i {
  margin-left: 1.3333333333rem;
  text-decoration: underline;
  color: var(--third-party-register-link)
}

.third-party-login .signup-tips p {
  padding: 0
}

.third-party-login .footer-tips {
  padding-bottom: 13.8666666667rem
}

.third-party-login .player .menu-box {
  margin-bottom: 0
}

.third-party-login .player .menu-box .input-group {
  padding-bottom: 0
}

.third-party-login .player.button-tips {
  color: var(--profile-tips-txt);
  text-align: left;
  padding: 0 4.2666666667rem;
  font-size: 3.4666666667rem;
  line-height: 1.2
}

.third-party-login .player.button-tips+.button-tips {
  margin-top: 2.1333333333rem
}

.third-party-login .player.button-tips a {
  color: var(--third-party-register-link);
  margin-left: 2.1333333333rem
}

.third-party-login .login-tips {
  color: var(--third-party-txt-fourth)
}

.third-party-login .invitation-code {
  display: flex;
  position: relative;
  align-content: center;
  justify-content: flex-start;
  margin-top: 4.2666666667rem;
  padding: 0 4rem
}

.third-party-login .invitation-code p,
.third-party-login .invitation-code span {
  padding: 0;
  color: var(--third-party-register-affiliate);
  font-size: 3.7333333333rem;
  line-height: 1.2
}

.third-party-login .invitation-code p {
  position: relative
}

.third-party-login .invitation-code .item-icon {
  display: block;
  width: 4rem;
  height: 4rem;
  margin-right: 2.4rem;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain
}

.third-party-login .number-code-captcha {
  position: absolute;
  right: 12rem;
  top: calc(12rem - 4%)
}

.third-party-login .input-status {
  position: absolute;
  z-index: 1;
  top: 9.0666666667rem;
  right: 0;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  transform: none
}

.third-party-login .input-status i {
  display: none;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center
}

.third-party-login .input-status i.icon-error {
  display: block;
  background: var(--color-danger);
  mask-size: 26%;
  -webkit-mask-size: 26%
}

.third-party-login .input-status i.icon-check {
  display: block;
  background: var(--third-party-register-form-check-icon-color);
  mask-size: 30%;
  -webkit-mask-size: 30%
}

.third-party-login .input-group input:focus .input-status i {
  display: none
}

.third-party-login .puzzle-verification-box {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  border: .2666666667rem solid var(--form-input-border);
  border-radius: 1.3333333333rem;
  background: var(--form-input-bg)
}

.third-party-login .puzzle-verification-box .title {
  position: relative;
  padding: 4.5333333333rem;
  border-bottom: .2666666667rem solid var(--form-box-bg);
  line-height: 1
}

.third-party-login .puzzle-verification-box .title p {
  padding: 0;
  color: var(--third-party-login-puzzle-box-txt);
  font-size: 3.7333333333rem;
  line-height: 1.5;
  text-align: left
}

.third-party-login .puzzle-verification {
  display: block;
  width: 100%;
  padding: 4.2666666667rem;
  overflow: hidden
}

.third-party-login .puzzle-verification .captcha-pic {
  position: relative;
  width: 100%;
  height: 41.0666666667rem;
  background-position: center;
  background-size: cover
}

.third-party-login .puzzle-verification .captcha-blank {
  position: absolute;
  top: 50%;
  left: 70%;
  width: 16.5333333333rem;
  height: 16.5333333333rem;
  transform: translateY(-50%);
  stroke: #fff;
  fill: #000;
  stroke-opacity: .3;
  fill-opacity: .5
}

.third-party-login .puzzle-verification .captcha-frag-box {
  position: absolute;
  top: 0;
  left: 100px;
  width: inherit;
  height: inherit;
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  clip-path: path("M23.4996992,0 C29.298523,0 33.9993985,4.70101013 33.9993985,10.5 C33.9993985,12.9548708 33.1569733,15.2129771 31.7454511,17.0009828 L42,17 C44.209139,17 46,18.790861 46,21 L46.0004981,31.2532274 C47.7882954,29.8421372 50.0459551,29 52.5003008,29 C58.2991245,29 63,33.7010101 63,39.5 C63,45.2989899 58.2991245,50 52.5003008,50 C50.0459551,50 47.7882954,49.1578628 46.0004981,47.7467726 L46,59 C46,61.209139 44.209139,63 42,63 L4,63 C1.790861,63 1.13686729e-13,61.209139 1.13686729e-13,59 L-0.000920548002,47.7461276 C1.78700598,49.1576062 4.04497962,50 6.49969924,50 C12.298523,50 16.9993985,45.2989899 16.9993985,39.5 C16.9993985,33.7010101 12.298523,29 6.49969924,29 C4.04497962,29 1.78700598,29.8423938 -0.000920548002,31.2538724 L1.13686729e-13,21 C1.13686729e-13,18.790861 1.790861,17 4,17 L15.2539474,17.0009828 C13.8424252,15.2129771 13,12.9548708 13,10.5 C13,4.70101013 17.7008755,0 23.4996992,0 Z")
}

.third-party-login .puzzle-verification .captcha-bar {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 12.2666666667rem;
  margin-top: 4.2666666667rem;
  border: .2666666667rem solid var(--third-party-login-puzzle-box-slider-border);
  background: var(--third-party-login-puzzle-box-slider-bg)
}

.third-party-login .puzzle-verification .captcha-bar-slider {
  position: absolute;
  top: 0;
  height: 12.2666666667rem
}

.third-party-login .puzzle-verification .captcha-bar-btn {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 12.2666666667rem;
  height: 12.2666666667rem;
  background: var(--third-party-login-puzzle-box-slider-btn-bg);
  box-shadow: 0 .2666666667rem .5333333333rem 0 var(--third-party-shadow-default), inset 0 0 .8rem 0 var(--third-party-login-puzzle-box-slider-btn-inner-shadow);
  cursor: pointer
}

.third-party-login .puzzle-verification .captcha-bar-icon {
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  background: var(--third-party-login-puzzle-box-slider-btn-arrow-icon-color);
  mask-repeat: no-repeat;
  mask-position: left;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left
}

.third-party-login .puzzle-verification.active .captcha-bar-btn {
  left: 20%
}

.third-party-login .puzzle-verification.active .captcha-text {
  display: none
}

.third-party-login .puzzle-verification.passed .captcha-bar-slider {
  width: 70%;
  border: .2666666667rem solid var(--third-party-login-puzzle-box-slider-border-success);
  background: var(--third-party-login-puzzle-box-slider-bg-success)
}

.third-party-login .puzzle-verification.passed .captcha-bar-btn {
  left: 70%;
  background: var(--third-party-login-puzzle-box-slider-btn-bg-success);
  box-shadow: 0 .2666666667rem 2.6666666667rem 0 var(--third-party-shadow-default), inset 0 0 .8rem 0 var(--third-party-login-puzzle-box-slider-btn-inner-shadow-success)
}

.third-party-login .puzzle-verification.passed .captcha-bar-icon {
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  background: var(--third-party-login-puzzle-box-slider-btn-arrow-icon-color-success)
}

.third-party-login .puzzle-verification.passed .puzzle-tips p {
  color: var(--color-success)
}

.third-party-login .puzzle-verification.passed .puzzle-tips .item-icon {
  background: var(--color-success)
}

.third-party-login .puzzle-verification.error .captcha-bar-slider {
  width: 30%;
  border: .2666666667rem solid var(--third-party-login-puzzle-box-slider-border-error);
  background: var(--third-party-login-puzzle-box-slider-bg-error)
}

.third-party-login .puzzle-verification.error .captcha-bar-btn {
  left: 30%;
  background: var(--third-party-login-puzzle-box-slider-btn-bg-error);
  box-shadow: 0 .2666666667rem 2.6666666667rem 0 var(--third-party-shadow-default), inset 0 0 .8rem 0 var(--third-party-login-puzzle-box-slider-btn-inner-shadow-error)
}

.third-party-login .puzzle-verification.error .captcha-bar-icon {
  width: 3.2rem;
  height: 3.2rem;
  background: var(--third-party-login-puzzle-box-slider-btn-arrow-icon-color-error)
}

.third-party-login .puzzle-verification.error .puzzle-tips p {
  color: var(--third-party-login-puzzle-box-tips-txt-error)
}

.third-party-login .puzzle-verification.error .puzzle-tips .item-icon {
  background: var(--third-party-login-puzzle-box-tips-txt-error)
}

.third-party-login .puzzle-tips {
  position: relative;
  flex: 1;
  width: 100%;
  padding-top: 3.2rem;
  text-align: left;
  white-space: normal
}

.third-party-login .puzzle-tips p {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  color: var(--third-party-login-puzzle-box-tips-txt)
}

.third-party-login .puzzle-tips p:before {
  display: none
}

.third-party-login .puzzle-tips p .item-icon {
  display: inline-flex;
  min-width: 3.2rem;
  min-height: 3.2rem;
  margin-right: 2.6666666667rem;
  background: var(--third-party-login-puzzle-box-tips-txt);
  text-align: center;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain
}

.third-party-login .menu-box {
  background: var(--form-box-bg);
  font-family: var(--custom-font), var(--custom-serif);
  text-align: left;
  box-shadow: none;
  padding: 2.6666666667rem 2.1333333333rem
}

.third-party-login .currency-wrap,
.third-party-login .phone-wrap,
.third-party-login .social-wrap {
  display: flex;
  flex-flow: row nowrap
}

.third-party-login .currency-wrap p,
.third-party-login .phone-wrap p,
.third-party-login .social-wrap p {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3.4666666667rem;
  line-height: 10.6666666667rem
}

.third-party-login .currency-wrap .currency-area-code {
  width: 100%
}

.third-party-login .puzzle-refresh {
  display: inline-flex;
  position: absolute;
  right: 4.2666666667rem;
  bottom: calc(50% - 2.6666666667rem)
}

.third-party-login .puzzle-refresh.active {
  animation: rotate 1s forwards
}

.third-party-login .puzzle-refresh .puzzle-refresh-icon {
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  background: var(--third-party-login-puzzle-box-refresh-icon-color);
  mask-repeat: no-repeat;
  mask-position: top center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: cover
}

.third-party-login .register-success-wrap {
  position: relative;
  top: unset;
  left: unset;
  bottom: unset;
  right: unset;
  padding: 2.1333333333rem;
  transform: unset;
  width: auto;
  box-shadow: none;
  margin: 2.1333333333rem
}

.third-party-login .register-success-cont .top-inner h4,
.third-party-login .register-success-cont .top-inner h3 {
  font-family: var(--custom-font), var(--custom-serif);
  line-height: 1.2;
  font-size: 4.2666666667rem
}

.third-party-login .register-success-cont .top-inner h3 {
  color: var(--third-party-register-succes-title);
  font-weight: 700
}

.third-party-login .register-success-cont .top-inner h3+h4 {
  margin: 4.2666666667rem 0 0
}

.third-party-login .register-success-cont .top-inner h4 {
  color: var(--third-party-register-success-subtitle);
  font-size: 3.7333333333rem
}

.third-party-login .register-success-cont .top-inner p {
  margin-top: 4.2666666667rem;
  color: var(--third-party-register-success-txt);
  font-size: 3.2rem
}

.third-party-login .register-success-btn {
  flex-wrap: nowrap
}

.third-party-login .register-success-btn .button {
  margin: 0 .5333333333rem;
  font-size: 4.8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-wrap: wrap;
  word-break: break-word;
  line-height: 4.8rem
}

.third-party-login .register-success-btn .button+.button {
  margin-left: 2.1333333333rem
}

.third-party-login .register-success-btn {
  margin-top: 14.6666666667rem
}

.third-party-login .user-password-info-box {
  margin: 4rem 0 0
}

.third-party-login .user-password-info-box+.register-success-btn {
  margin-top: 6.4rem
}

.third-party-login .user-password-info-box p {
  flex: 1;
  margin-right: 2.6666666667rem;
  color: var(--third-party-login-form-input-txt);
  word-break: break-word;
  font-size: 4.2666666667rem
}

.third-party-login .back-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8rem
}

.third-party-login .back-home a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  background: var(--third-party-login-form-input-bg);
  border-radius: 13.3333333333rem
}

.third-party-login .back-home span {
  display: inline-flex;
  width: 8rem;
  height: 8rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0 auto
}

.third-party-login .user-password-info li {
  display: inline-block;
  width: 100%;
  max-height: 32rem;
  overflow: auto;
  font-size: 3.7333333333rem;
  line-height: 1.5;
  text-align: left
}

.third-party-login .user-password-info li+li {
  margin-top: 4.2666666667rem
}

.third-party-login .user-password-info label {
  padding-right: 1.3333333333rem;
  font-size: 3.2rem;
  color: var(--third-party-login-form-txt)
}

.third-party-login .user-password-info label+.info {
  margin-top: 2.6666666667rem
}

.third-party-login .user-password-info .info {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  height: 11.7333333333rem;
  padding: 0 0 0 4.2666666667rem;
  border-radius: 1.3333333333rem;
  border: .2666666667rem solid var(--third-party-register-success-input-border);
  background: var(--third-party-login-form-input-bg)
}

.third-party-login .user-password-info p {
  text-align: left
}

.third-party-login .user-password-info .info-copy {
  display: flex;
  height: 100%;
  width: 11.2rem;
  border-radius: 0 1.0666666667rem 1.0666666667rem 0;
  text-align: center;
  white-space: nowrap;
  background: var(--third-party-register-success-input-copy-btn-bg);
  align-items: center;
  justify-content: center
}

.third-party-login .user-password-info .info-copy .item-icon {
  display: block;
  width: 4rem;
  height: 4rem;
  background-color: var(--third-party-register-success-copy-icon-color);
  cursor: pointer;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover
}

.third-party-login .verification-wrap {
  display: block;
  margin: 3.2rem;
  text-align: left
}

.third-party-login .verification-wrap input[type=number] {
  border: .2666666667rem solid var(--form-input-border);
  background: var(--form-input-bg)
}

.third-party-login .verification-wrap input[type=number]:disabled,
.third-party-login .verification-wrap input[type=number].input-disabled {
  background: var(--form-input-bg-disabled)
}

.third-party-login .verification-wrap input[type=number].input-error {
  border: .2666666667rem solid var(--color-danger)
}

.third-party-login .verification-wrap input[type=number]:focus,
.third-party-login .verification-wrap input[type=number].input-focus {
  border: .2666666667rem solid var(--form-input-border-focus)
}

.third-party-login .verification-wrap.input-disable input[type=number] {
  background: var(--form-input-bg-disabled)
}

.third-party-login .verification-wrap.input-error input[type=number] {
  border: .2666666667rem solid var(--color-danger)
}

.third-party-login .verification-txt,
.third-party-login .verification-tips {
  margin: 2.1333333333rem auto
}

.third-party-login .verification-txt p,
.third-party-login .verification-tips p {
  color: var(--third-party-verification-code-txt);
  font-size: 3.7333333333rem;
  line-height: 1.5
}

.third-party-login .verification-txt p span,
.third-party-login .verification-tips p span {
  color: var(--third-party-verification-code-txt-highlight)
}

.third-party-login .verification-txt p a,
.third-party-login .verification-tips p a {
  color: var(--third-party-verification-code-link)
}

.third-party-login .verification-txt p .player,
.third-party-login .verification-tips p .player {
  display: block;
  width: 100%
}

.third-party-login .verification-txt p .time,
.third-party-login .verification-txt p .resend-btn,
.third-party-login .verification-tips p .time,
.third-party-login .verification-tips p .resend-btn {
  display: none
}

.third-party-login .verification-txt p .resend-btn,
.third-party-login .verification-tips p .resend-btn {
  transition: .5s
}

.third-party-login .verification-txt p .time.active,
.third-party-login .verification-txt p .resend-btn.active,
.third-party-login .verification-tips p .time.active,
.third-party-login .verification-tips p .resend-btn.active {
  display: inline-block;
  color: red
}

.third-party-login .verification-txt p .time.active.disabled,
.third-party-login .verification-txt p .resend-btn.active.disabled,
.third-party-login .verification-tips p .time.active.disabled,
.third-party-login .verification-tips p .resend-btn.active.disabled {
  color: #999
}

.third-party-login .verification-txt p .resend-btn.active,
.third-party-login .verification-tips p .resend-btn.active {
  transition: .5s;
  color: var(--third-party-verification-code-link)
}

.third-party-login .verification-tips p {
  color: var(--third-party-verification-tips-txt)
}

.third-party-login .verification-tips p {
  text-align: center
}

.third-party-login .verification-content {
  display: block
}

.third-party-login .verification-code {
  display: block;
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  height: auto;
  margin: 0 auto
}

.third-party-login .verification-code fieldset {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0
}

.third-party-login .verification-code .label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%)
}

.third-party-login .verification-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden
}

.third-party-login .verification-input input[type=number] {
  flex: 1;
  width: 25%;
  height: 21.3333333333rem;
  border-radius: 1.3333333333rem;
  font-size: 8rem;
  font-weight: 700;
  text-align: center;
  color: var(--form-input-txt);
  -webkit-text-fill-color: var(--form-input-txt)
}

.third-party-login .verification-input input[type=number]::-webkit-input-placeholder {
  text-shadow: none;
  -webkit-text-fill-color: initial
}

.third-party-login .verification-input input[type=number]+input[type=number] {
  margin-left: 2.1333333333rem
}

.third-party-login .verification-input input::-webkit-outer-spin-button,
.third-party-login .verification-input input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none
}

.third-party-login .verification-input input[type=number]:nth-child(n+4) {
  order: 2
}

.third-party-login .pop-wrap.pop-success,
.third-party-login .user-password-info .icon-copy {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 4.2666666667rem;
  transform: translate(-50%);
  border-radius: 1.3333333333rem;
  background: var(--mode-tips-bg);
  color: var(--mode-tips-txt);
  font-weight: 500;
  right: auto;
  box-shadow: 0 0 1.3333333333rem var(--pop-bg-shadow)
}

.third-party-login .pop-wrap.pop-success:before,
.third-party-login .user-password-info .icon-copy:before {
  display: none
}

.third-party-login .pop-wrap.pop-success.show,
.third-party-login .pop-wrap.pop-success.active,
.third-party-login .user-password-info .icon-copy.show,
.third-party-login .user-password-info .icon-copy.active {
  display: block;
  animation: tips-show .3s linear forwards
}

.third-party-login .pop-wrap.pop-success.hide,
.third-party-login .user-password-info .icon-copy.hide {
  display: block;
  animation: tips-hide .2s linear forwards
}

.third-party-login .pop-wrap.pop-success {
  height: auto;
  width: auto
}

.third-party-login .register-success-wrap:before {
  display: none
}

@keyframes tips-show {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes tips-hide {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.third-party-login .phone-wrap {
  width: 100%;
  height: 12rem;
  padding: 0;
  transition: background .3s;
  border: .2666666667rem solid var(--third-party-login-form-input-border);
  border-radius: 1.3333333333rem;
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 3.2rem
}

.third-party-login .phone-wrap.btn-disabled .btn-select {
  background: var(--form-input-bg-disabled);
  border: 0
}

.third-party-login .phone-wrap.btn-disabled .btn-select span {
  color: var(--form-input-txt-disabled)
}

.third-party-login .phone-wrap .clear {
  top: 0
}

.third-party-login .login-group {
  z-index: 3;
  display: flex;
  width: 100%;
  background: var(--tab-header-bg)
}

.third-party-login .login-group label {
  display: grid;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 13.3333333333rem;
  color: var(--third-party-login-tab-txt);
  text-align: center
}

.third-party-login .login-group label.active {
  transition: all .3s;
  color: var(--tab-line-txt-active)
}

.third-party-login .login-group label.active:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4.2666666667rem;
  height: .5333333333rem;
  border-radius: .8rem;
  margin: 0 auto;
  animation: scale-in-center .3s ease-in-out both;
  background: var(--tab-line-underline)
}

.third-party-login .delete-btn {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 12rem;
  height: 12rem;
  transition: all .3s;
  background: #ffd259;
  mask-image: url(/assets/images/icon-set/icon-cross-type10.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 30%;
  -webkit-mask-image: url(/assets/images/icon-set/icon-cross-type10.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 30%
}

.third-party-login .another-login-block {
  margin-top: 5.3333333333rem;
  padding-bottom: 9.6rem;
  font-size: 3.7333333333rem;
  text-align: center
}

.third-party-login .another-login-block .title {
  font-size: 3.7333333333rem;
  color: var(--third-party-login-txt);
  text-align: center;
  text-decoration: none;
  padding: 1.3333333333rem 2.6666666667rem 4rem
}

.third-party-login .another-login-block .another-login-icon {
  display: block;
  text-align: center
}

.third-party-login .another-login-block .another-login-icon a {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.third-party-login .another-login-block .another-login-icon a+a {
  margin-left: 6.4rem
}

.third-party-login .another-login-block .another-login-icon .btn-google {
  overflow: hidden;
  position: relative;
  border-radius: 50%
}

.third-party-login .another-login-block .another-login-icon .btn-google a {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none
}

.third-party-login .another-login-block .another-login-icon .btn-biometric {
  border-radius: 50%;
  background: var(--third-party-login-biometric-btn)
}

.third-party-login .another-login-block .another-login-icon .btn-biometric a {
  content: "";
  display: block;
  width: 8rem;
  height: 8rem;
  background: var(--third-party-login-biometric-btn-txt);
  mask-size: 65%;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: 65%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat
}

.third-party-login .another-login-block .block-border {
  position: relative;
  display: block;
  text-align: center;
  color: var(--third-party-login-txt)
}

.third-party-login .another-login-block .block-border:before,
.third-party-login .another-login-block .block-border:after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  width: 40rem;
  height: .2666666667rem;
  font-size: 6.9333333333rem;
  color: #6f7784;
  border-top: .2666666667rem solid var(--third-party-login-txt)
}

.third-party-login .another-login-block .block-border:before {
  left: 0
}

.third-party-login .another-login-block .block-border:after {
  right: 0
}

.third-party-login .another-login-block.verification {
  position: absolute;
  width: calc(100% - 4.2666666667rem);
  padding: 0 4.2666666667rem;
  bottom: 0;
  left: 0
}

.third-party-login .another-login-block.verification a {
  display: block;
  color: var(--third-party-verification-code-link);
  margin-top: 4.2666666667rem;
  text-decoration: none
}

.third-party-login .verify-tips.tips-info-toggle ul,
.third-party-login .verify-tips.tips-info-toggle ol {
  padding-left: 0;
  list-style: none
}

.third-party-login .verify-tips.tips-info-toggle ul>li,
.third-party-login .verify-tips.tips-info-toggle ol>li {
  list-style: none;
  font-size: 3.2rem;
  padding: 1.0666666667rem 2.6666666667rem
}

.third-party-login .verify-tips.tips-info-toggle ol>li:last-child {
  margin-bottom: 0
}

.third-party-login .verify-tips.tips-info-toggle ol {
  padding-top: 10px;
  border-top: 1px dotted var(--third-party-personal-tips-info-border-top)
}

.third-party-login .verify-tips.tips-info-toggle a {
  display: block;
  width: 100%
}

.third-party-login .verify-tips.tips-info-toggle label {
  display: block;
  margin-bottom: 3.2rem;
  font-size: 3.7333333333rem;
  font-weight: 400
}

.third-party-login .verify-tips.tips-info-toggle label:before {
  display: none
}

.third-party-login .verify-tips.tips-info-toggle p {
  display: block
}

.third-party-login .verify-tips.tips-info-toggle h5 {
  margin-bottom: 0;
  align-items: flex-start
}

.third-party-login .verify-tips.tips-info-toggle h5:before {
  display: none
}

.third-party-login .verify-tips.tips-info-toggle h5 .tips-icon {
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  background-color: var(--third-party-personal-tips-info-icon);
  margin: .8rem 2.1333333333rem 0 0
}

.third-party-login .verify-tips.tips-info-toggle h5 span {
  color: var(--third-party-personal-tips-info-txt);
  font-size: 4rem;
  line-height: 1.2
}

.third-party-login .verify-tips.tips-info-toggle h5 span i {
  color: var(--third-party-personal-tips-info-txt-i);
  font-weight: 400
}

.third-party-login .verify-tips.tips-info-toggle .tips-info-block {
  display: none;
  transition: .5s
}

.third-party-login .verify-tips.tips-info-toggle .tips-info-block.active {
  display: block;
  transition: .5s
}

.third-party-login .verify-tips.tips-info-toggle .title-box {
  padding: 1.0666666667rem 2.1333333333rem 3.2rem
}

.third-party-login .verify-tips.tips-info-toggle .toggle-btn {
  width: 3.2rem;
  height: 3.2rem;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  background-color: var(--third-party-personal-tips-info-toggle-btn);
  transition: .3s;
  transform: rotate(90deg);
  margin-left: 2.1333333333rem
}

.third-party-login .verify-tips.tips-info-toggle .toggle-btn.active {
  transform: rotate(270deg)
}

.third-party-login .info-supporting label {
  color: #d8a845
}

.third-party-login .info-supporting label:before {
  display: none
}

.third-party-login .info-supporting li {
  border: 0;
  color: #d8a845;
  background: #d8a84526
}

.third-party-login .list-group {
  display: flex;
  justify-content: space-between;
  font-size: 4.2666666667rem;
  padding: 0 3.2rem
}

.third-party-login .list-group+.list-group {
  margin-top: 3.2rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--third-party-personal-item-icon-color-border)
}

.third-party-login .list-group .icon-block {
  display: block;
  height: 100%;
  margin-top: 2.1333333333rem
}

.third-party-login .list-group .item-icon {
  display: table-cell;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-right: 5.3333333333rem;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: var(--third-party-personal-item-icon-color)
}

.third-party-login .list-group .item-icon.social {
  background-color: unset
}

.third-party-login .list-group .item-icon+.info-block {
  margin-left: 5.3333333333rem
}

.third-party-login .list-group .list {
  display: table-cell;
  width: calc(100% - 9.6rem)
}

.third-party-login .list-group .button {
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 3.7333333333rem;
  color: var(--third-party-login-btn-main-txt);
  width: 25.3333333333rem;
  height: 8rem;
  line-height: 1;
  background: var(--third-party-login-btn-main-bg);
  box-shadow: 0 .2666666667rem 2px color-mix(in srgb, var(--third-party-login-btn-main-bg-shadow), transparent 70%), inset 0 0 .8rem var(--third-party-login-btn-main-bg-inner-shadow);
  border: 0;
  margin: 0;
  text-decoration: unset
}

.third-party-login .list-group .btn-google {
  overflow: hidden;
  line-height: 8rem
}

.third-party-login .list-group .btn-google .btn-mask {
  background: var(--third-party-btn-mask-bg);
  box-shadow: 0 0 2px var(--lighten-third-party-btn-mask-bg-shadow-1), inset 0 0 .2666666667rem var(--lighten-third-party-btn-mask-bg-shadow-2)
}

.third-party-login .list-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left
}

.third-party-login .list-info+.list-info {
  margin-top: 2.6666666667rem;
  transition: .5s;
  animation: zoomIn .5s forwards
}

.third-party-login .list-info .left {
  max-width: 100%;
  word-wrap: break-word;
  text-align: left
}

.third-party-login .list-info .left .title {
  color: var(--third-party-personal-item-title);
  font-size: 4.2666666667rem
}

.third-party-login .list-info .left .info-block div {
  align-items: center;
  text-align: left
}

.third-party-login .list-info .left .tag {
  display: unset;
  position: unset;
  letter-spacing: 0;
  top: -.5333333333rem;
  color: var(--third-party-personal-item-tag-txt);
  font-size: 2.6666666667rem;
  background-color: var(--third-party-personal-item-tag-bg);
  padding: .8rem 1.0666666667rem;
  border-radius: 1.0666666667rem;
  margin-left: 1.0666666667rem
}

.third-party-login .list-info .left .tips {
  color: var(--third-party-personal-item-tag-tips);
  font-size: 3.7333333333rem
}

.third-party-login .list-info .right .status {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background-color: var(--third-party-personal-item-status-bg);
  border: .32rem solid var(--third-party-personal-item-status-border);
  font-size: 3.7333333333rem;
  width: 25.3333333333rem;
  height: 8rem;
  border-radius: 1.0666666667rem;
  line-height: 1;
  margin: 0;
  padding: 0 2.1333333333rem;
  color: var(--third-party-personal-item-status-txt)
}

.third-party-login .list-info .right .status.unconfirm-btn {
  color: var(--third-party-personal-item-status-error-txt);
  border: .2666666667rem solid var(--third-party-personal-item-status-error-border);
  background: var(--third-party-personal-item-status-error-bg)
}

.third-party-login .add-phone-btn {
  display: none
}

.third-party-login .add-phone-btn.show {
  display: flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-size: 3.2rem;
  margin: 2.6666666667rem 0 0;
  padding-left: 8rem;
  color: var(--third-party-personal-add-phone-txt);
  border-radius: 2.1333333333rem;
  border: .32rem solid var(--third-party-personal-add-phone-border);
  background: var(--third-party-personal-add-phone-bg)
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn {
  display: inline-block;
  position: relative;
  width: 12.8rem;
  height: 8.8rem;
  margin-right: 2.6666666667rem;
  text-align: center
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:after,
.third-party-login .add-phone-btn.show .icon-add-phone-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  background-color: var(--third-party-personal-add-phone-txt)
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:after {
  width: .5333333333rem;
  height: 3.2rem;
  left: 48%;
  transform: translateY(-50%)
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:before {
  width: 3.2rem;
  height: .5333333333rem;
  transform: translate(-50%, -50%)
}

.third-party-login .currency-code-list {
  display: grid;
  grid-template-columns: 100%;
  justify-content: start;
  padding: 0 1.0666666667rem;
  text-align: left
}

.third-party-login .currency-code-list li {
  display: flex;
  align-items: center
}

.third-party-login .currency-code-list,
.third-party-login .phone-code-list,
.third-party-login .social-code-list,
.third-party-login .btn-select {
  background: var(--third-party-register-form-select-item-bg)
}

.third-party-login .currency-code-list img,
.third-party-login .phone-code-list img,
.third-party-login .social-code-list img,
.third-party-login .btn-select img {
  display: inline-block;
  vertical-align: middle;
  width: 5.3333333333rem
}

.third-party-login .currency-code-list span,
.third-party-login .phone-code-list span,
.third-party-login .social-code-list span,
.third-party-login .btn-select span {
  display: inline-block;
  vertical-align: middle;
  color: var(--third-party-login-form-input-txt);
  margin-left: 2.1333333333rem
}

.third-party-login .btn-select:after {
  border-color: var(--third-party-register-form-select-triangle) transparent transparent;
  content: "";
  position: absolute;
  z-index: 2;
  top: 5.3333333333rem;
  right: 2.6666666667rem;
  border-width: 1.0666666667rem;
  border-style: solid
}

.third-party-login .phone-code-list-group,
.third-party-login .currency-code-list-group,
.third-party-login .social-code-list-group {
  display: none;
  width: 100%;
  border-radius: 1.0666666667rem;
  box-shadow: 0 6px 12px color-mix(in srgb, var(--third-party-shadow-default), transparent 80%)
}

.third-party-login .member-error {
  color: var(--third-party-login-color-danger)
}

.third-party-login .member-error:before {
  content: "!";
  display: inline-block;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: 50%;
  background-color: var(--third-party-login-color-danger);
  color: var(--third-party-bg-default);
  font-size: 3.7333333333rem;
  font-weight: 700;
  line-height: 4.2666666667rem;
  text-align: center;
  vertical-align: text-top
}

.third-party-login .lang-select .button {
  margin: 0;
  width: 100%
}

.third-party-login .lang-select .button span {
  font-size: 4.8rem
}

.third-party-login .login-register-btn-wrap {
  background-color: var(--quick-register-entry-btn-wrap-bg);
  padding: 4.2666666667rem 3.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1.3333333333rem
}

.third-party-login .login-register-btn-wrap .login-register-btn {
  width: 100%;
  text-decoration: none
}

.third-party-login .login-register-btn-wrap .login-register-icon-wrap {
  color: var(--quick-register-entry-btn-name);
  background: var(--quick-register-entry-btn-bg);
  border: .2666666667rem solid var(--quick-register-entry-btn-border);
  padding: 4rem 0;
  width: 100%;
  border-radius: 1.3333333333rem
}

.third-party-login .login-register-btn-wrap .login-register-icon {
  width: 8rem;
  height: 8rem;
  margin: auto;
  mask-size: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--quick-register-entry-btn-icon)
}

.third-party-login .login-register-btn-wrap .login-register-type-name {
  padding-top: 2.6666666667rem;
  color: var(--quick-register-entry-btn-name);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center
}

.third-party-login .login-register-btn-wrap .active {
  pointer-events: none
}

.third-party-login .login-register-btn-wrap .active .login-register-icon-wrap {
  border-color: transparent;
  box-shadow: 0 0 .8rem var(--quick-register-entry-btn-active-shadow) inset;
  background: var(--quick-register-entry-btn-active-bg)
}

.third-party-login .login-register-btn-wrap .active .login-register-icon {
  background-color: var(--quick-register-entry-btn-icon-active)
}

.third-party-login .login-register-btn-wrap .active .login-register-type-name {
  color: var(--quick-register-entry-btn-txt-active)
}

.third-party-login .register-entry .banner-v1 {
  height: auto
}

.third-party-login .register-entry .banner:before {
  background: transparent
}

.third-party-login .register-entry .invitation-code {
  margin: 2.6666666667rem 0;
  padding: 1.8666666667rem 2.9333333333rem;
  border-radius: .8rem;
  border: .2666666667rem solid var(--quick-register-entry-invitation-code-border);
  background-color: var(--quick-register-entry-invitation-code-bg)
}

.third-party-login .register-entry .invitation-code p,
.third-party-login .register-entry .invitation-code span {
  color: var(--third-party-input-default);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0px
}

.third-party-login #turnstile-container {
  text-align: center;
  margin: 3vw 0
}

.third-party-login #turnstile-container iframe {
  width: 100% !important
}

.third-party-login .number-code-captcha {
  display: flex;
  position: absolute;
  top: 8.8rem;
  right: 12rem;
  justify-content: flex-end;
  height: 6.6666666667rem
}

.third-party-login .number-code-captcha canvas {
  height: 8rem !important
}

@keyframes scale-in-center {
  0% {
    transform: scale(0) translate(-50%);
    opacity: 1
  }

  to {
    transform: scale(1) translate(-50%);
    opacity: 1
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1.5turn)
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.mcd-style.new-register-success-page .banner .banner-v1,
.mcd-style .register-entry .banner .banner-v1,
.mcd-style .new-register-success-page .banner .banner-v1 {
  height: auto !important
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap .item .item-pic,
.mcd-style .register-entry .banner .banner-v1 .carousel-wrap .item .item-pic,
.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap .item .item-pic {
  height: 100%;
  background-size: cover
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap .item-drag,
.mcd-style .register-entry .banner .banner-v1 .carousel-wrap .item-drag,
.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap .item-drag {
  height: auto;
  padding-top: 33%
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner,
.mcd-style .register-entry .banner .banner-v1 .carousel-wrap.single-banner,
.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner {
  height: 45.0666666667rem
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner .item-drag,
.mcd-style .register-entry .banner .banner-v1 .carousel-wrap.single-banner .item-drag,
.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner .item-drag {
  padding-top: 46%
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap.siblings .item,
.mcd-style .register-entry .banner .banner-v1 .carousel-wrap.siblings .item,
.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap.siblings .item {
  height: 100%
}

.mcd-style.new-register-success-page .dot-group,
.mcd-style .register-entry .dot-group,
.mcd-style .new-register-success-page .dot-group {
  position: relative
}

.password-message-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3.2rem;
  margin-top: 3.2rem
}

.password-message-block .password-message {
  display: grid;
  grid-template-columns: 4.2666666667rem 1fr;
  gap: 8px
}

.password-message-block .password-message.success {
  color: var(--third-party-password-txt-success)
}

.password-message-block .password-message.success .icon {
  background-color: var(--third-party-password-icon-success)
}

.password-message-block .password-message.error {
  color: var(--third-party-password-txt-error)
}

.password-message-block .password-message.error .icon {
  background-color: var(--third-party-password-icon-error)
}

.password-message-block .password-message.disabled {
  color: var(--third-party-password-txt-default)
}

.password-message-block .password-message.disabled .icon {
  background-color: var(--third-party-password-icon-default)
}

.password-message-block .password-message .icon {
  height: 4.2666666667rem;
  width: 4.2666666667rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  margin: 0
}

.password-message-block .password-message .message {
  font-size: 3.7333333333rem;
  font-weight: 400;
  line-height: 1.2
}

.third-party-login a,
.third-party-login .login-group label,
.third-party-login .accordion-wrap,
.third-party-login .refresh-icon,
.third-party-login .captcha-bar-btn {
  cursor: pointer;
  opacity: 1
}

.third-party-login a:hover,
.third-party-login .login-group label:hover,
.third-party-login .accordion-wrap:hover,
.third-party-login .refresh-icon:hover,
.third-party-login .captcha-bar-btn:hover {
  opacity: .7
}

.third-party-login .list-group .status.unconfirm-btn {
  cursor: pointer;
  opacity: 1
}

.third-party-login .list-group .status.unconfirm-btn:hover {
  opacity: .7
}

.third-party-login .input-group .clear,
.third-party-login .input-group .eyes {
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s ease-in
}

.third-party-login .input-group .clear:hover,
.third-party-login .input-group .eyes:hover {
  opacity: .7
}

.third-party-login .input-group .clear.active,
.third-party-login .input-group .eyes.active {
  opacity: 1
}

.third-party-login .input-group .clear:focus,
.third-party-login .input-group .eyes:focus {
  padding: 0
}

.third-party-login .currency-list-area li {
  cursor: pointer
}

.third-party-login .currency-list-area li:hover {
  background-color: var(--third-party-register-form-select-item-hover)
}

.info-top-type {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 6.4rem 0 4.2666666667rem
}

.info-top-type .player-info {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 32rem
}

.info-top-type .player-info video,
.info-top-type .player-info img {
  height: 42.6666666667rem
}

.info-top-type .player-info .vip-image {
  width: 40rem
}

.membername-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 8.5333333333rem 0 0
}

.membername-wrap .membername {
  width: auto;
  font-size: 4.2666666667rem;
  color: var(--third-party-personal-membername-wrap-txt);
  margin-right: 1.3333333333rem
}

.membername-wrap .register-date {
  font-size: 3.2rem;
  color: var(--third-party-personal-membername-wrap-tips);
  margin-top: 2.1333333333rem
}

.membername-wrap .level {
  width: 100%;
  text-align: center;
  font-size: 3.2rem;
  padding: 1.3333333333rem;
  margin-left: 1.3333333333rem;
  background: var(--third-party-personal-membername-wrap-level-bg);
  border-radius: 1.0666666667rem;
  color: var(--third-party-personal-membername-wrap-level-txt)
}

.player-top {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  background: var(--wallet-top-bg)
}

.player-top:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 13.3333333333rem;
  transform: translateY(-100%);
  z-index: -1;
  background-color: var(--primary);
  pointer-events: none
}

.player-top .player-card {
  margin: 1.3333333333rem 2.6666666667rem 6.6666666667rem
}

.player-top .credit-card {
  margin: 4.2666666667rem 4.2666666667rem 2.1333333333rem
}

.player-top:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -1px
}

.player-top.player-deposit {
  position: relative;
  flex-direction: column;
  height: auto;
  background: var(--wallet-top-bg)
}

.player-top.player-deposit:before {
  display: none
}

.player-top.player-deposit+.content {
  padding: 0
}

.player-top.player-nav-page {
  background: var(--wallet-top-bg);
  flex-wrap: wrap
}

.player-top.player-withdraw {
  position: static;
  position: relative;
  flex-direction: column;
  height: auto;
  background: var(--wallet-top-bg);
  color: var(--wallet-top-txt)
}

.credit-card {
  position: relative;
  box-sizing: border-box;
  width: 92rem;
  min-height: 51.2rem;
  margin: 0 auto 6.6666666667rem;
  padding: 6.4rem;
  border-radius: 4rem;
  background: var(--wallet-bank-card-bg);
  box-shadow: 0 .5333333333rem .8rem var(--wallet-bank-card-shadow);
  font-size: 3.2rem;
  z-index: 0
}

.credit-card .credit-card-inner {
  display: flex;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  color: var(--wallet-bank-card-txt)
}

.credit-card .unit-icon {
  width: 5.3333333333rem;
  height: auto
}

.credit-card .bank-name p {
  font-size: 3.7333333333rem;
  margin-bottom: .8rem;
  line-height: 1.1
}

.credit-card .bank-branch p {
  font-size: 3.2rem;
  line-height: 1.1
}

.credit-card .card-number {
  margin-top: 2.1333333333rem;
  font-size: 6.9333333333rem;
  line-height: 1.2;
  word-break: break-all;
  font-size: 5.3333333333rem
}

.credit-card .user-name {
  font-size: 3.2rem;
  line-height: 1.5
}

.credit-card .bank-info-copy {
  margin-bottom: 2.1333333333rem;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: inherit;
  border-radius: 1.0666666667rem;
  transform: all .3s
}

.credit-card .bank-info-copy p {
  color: var(--wallet-bank-card-txt);
  word-break: break-all;
  text-shadow: 0 0 2px var(--wallet-account-info-copy-tooltips-txt-shadow)
}

.credit-card .bank-info-copy i {
  z-index: 1;
  display: inline-block;
  margin-left: 3.2rem;
  width: 15px;
  height: 15px;
  background-color: var(--wallet-bank-card-copy-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  flex: 0 0 15px
}

.credit-card .bank-info-copy.active {
  background: var(--wallet-bank-card-copy-active)
}

.credit-card .bank-info-copy.active .tips-txt {
  display: block;
  animation: tips-txt-show .3s linear forwards
}

.credit-card .bank-info-copy.hide {
  background: var(--wallet-bank-card-copy-active)
}

.credit-card .bank-info-copy.hide .tips-txt {
  display: block;
  animation: tips-txt-hide .2s linear forwards
}

.credit-card .tips-txt {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 2.6666666667rem;
  padding: 1.3333333333rem 2.6666666667rem;
  border-radius: .8rem;
  opacity: 0;
  background: var(--wallet-bank-card-copy-tooltips-bg);
  box-shadow: 0 0 .5333333333rem #99999980;
  font-size: 3.2rem;
  color: var(--wallet-bank-card-copy-tooltips-txt);
  line-height: 1.5;
  transform: translateY(-100%)
}

.credit-card .tips-txt:before {
  content: "";
  position: absolute;
  right: 2.6666666667rem;
  bottom: -5px;
  width: 0;
  height: 0;
  border-width: 6px 3px 0;
  border-style: solid;
  border-color: var(--wallet-bank-card-copy-tooltips-bg) transparent transparent
}

.credit-card .bg-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}

.credit-card .deposit-amount {
  position: absolute;
  bottom: 5.3333333333rem
}

.credit-card .deposit-amount label,
.credit-card .deposit-amount p {
  display: inline-block
}

.credit-card .deposit-amount label {
  margin-right: 2.6666666667rem;
  line-height: 1.8;
  text-align: left
}

.credit-card .deposit-amount p {
  color: var(--wallet-bank-card-amount);
  font-size: 4.2666666667rem
}

.credit-card .deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  margin: 4.2666666667rem
}

.credit-card .deco img {
  display: block;
  width: 100%
}

.player-deposit-wrap {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch
}

.player-deposit-wrap .player-deposit-step1 {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  background-color: var(--content-bg)
}

.player-deposit-wrap .player-deposit-step1.active {
  opacity: 0;
  height: 0;
  overflow: hidden
}

.player-deposit-wrap .player-deposit-step1 .menu-box {
  margin: 4.2666666667rem
}

.player-deposit-wrap .player-deposit-step2 {
  display: block;
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 100%;
  opacity: 0;
  height: 0;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--content-bg);
  transition: top 3s
}

.player-deposit-wrap.active .player-deposit-step1.active {
  opacity: 0;
  height: 0;
  overflow: hidden
}

.player-deposit-wrap.active .player-deposit-step2 {
  position: absolute;
  top: 0;
  height: auto;
  opacity: 1
}

.player-deposit-wrap.active .player-deposit-step2.active {
  position: relative
}

.kyc-verify-mask {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 4;
  border-radius: 1.3333333333rem;
  background: var(--wallet-kyc-verify-mask-bg);
  overflow: hidden
}

.kyc-verify-mask .kyc-verify-mask-icon {
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto
}

.kyc-verify-mask .kyc-verify-mask-icon:before {
  content: "!";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--wallet-kyc-verify-mask-txt);
  color: var(--wallet-kyc-verify-mask-bg);
  font-size: 6.4rem;
  font-weight: 700;
  line-height: 4.2666666667rem;
  text-align: center
}

.kyc-verify-mask .kyc-verify-mask-message {
  display: block;
  color: var(--wallet-kyc-verify-mask-txt);
  text-shadow: 0 0 .5333333333rem var(--wallet-kyc-verify-mask-txt-shadow);
  text-align: center;
  margin: 2.1333333333rem 2.1333333333rem 0
}

.kyc-verify-mask .kyc-verify-mask-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: -1
}

.tab-btn-section {
  width: 100%
}

.tab-btn-page {
  display: flex;
  position: relative;
  z-index: 3;
  top: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 13.3333333333rem;
  transition: all .3s;
  background: var(--tab-header-bg)
}

.tab-btn-page-underline {
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.tab-btn-page .line {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  transition: all .3s
}

.tab-btn-page .line:after {
  content: "";
  display: block;
  width: 4.2666666667rem;
  height: .5333333333rem;
  margin: 0 auto;
  border-radius: .8rem;
  background: var(--tab-line-underline)
}

.tab-btn-page .btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: inherit !important;
  height: auto;
  padding: 4rem 0;
  transition: all .3s;
  text-align: center
}

.tab-btn-page .btn.active .text {
  color: var(--tab-line-txt-active)
}

.tab-btn-page .btn .text {
  display: inline-block;
  position: relative;
  margin: 0 4.2666666667rem;
  color: var(--tab-line-txt);
  font-size: 3.7333333333rem;
  text-align: center
}

.tab-btn-page .btn .badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1.3333333333rem;
  transform: translate(90%, -100%);
  border-radius: 2.6666666667rem;
  background: var(--tab-line-badge-bg);
  color: var(--tab-line-badge-txt);
  font-size: 3.2rem
}

.tab-btn-page .btn[data-tab-current=current] .text {
  color: var(--tab-line-txt-active);
  font-weight: 500
}

.tab-btn-page .btn[data-tab-current=current]:after {
  display: block
}

.player-nav-page .tab-btn-page {
  background: transparent
}

.tab-btn-wrap {
  position: relative;
  padding: 2.1333333333rem 4.2666666667rem 3.2rem;
  background: var(--tab-btn-bg)
}

.tab-btn-wrap:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 13.3333333333rem;
  transform: translateY(-100%);
  pointer-events: none
}

.tab-btn-bar {
  display: flex;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 8.5333333333rem;
  transition: all .3s;
  color: #fff
}

.tab-btn-bar:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 120%;
  transform: translateY(-50%);
  border-radius: 2.1333333333rem;
  background: var(--tab-btn-bar-bg)
}

.tab-btn-bar .line {
  position: absolute;
  top: 3%;
  left: 0;
  padding: 0 1.3333333333rem;
  transition: all .3s
}

.tab-btn-bar .line:after {
  content: "";
  display: block;
  width: 100%;
  height: 8rem;
  border-radius: 2.1333333333rem;
  background: var(--tab-btn-bg-active);
  box-shadow: 0 0 .5333333333rem .2666666667rem color-mix(in srgb, var(--tab-btn-bar-line-shadow), transparent 50%)
}

.tab-btn-bar .btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  transition: all .3s;
  text-align: center
}

.tab-btn-bar .btn.active .text {
  color: var(--tab-btn-txt-active)
}

.tab-btn-bar .btn .icon+.text {
  margin-left: 1.3333333333rem
}

.tab-btn-bar .btn .text {
  display: inline-block;
  position: relative;
  padding: 1.6rem 0;
  color: var(--tab-btn-txt);
  font-size: 3.4666666667rem;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 .5333333333rem 1.0666666667rem color-mix(in srgb, var(--tab-btn-txt-shadow), transparent 60%)
}

.tab-btn-bar .btn .badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1.3333333333rem;
  transform: translate(90%, -100%);
  border-radius: 2.6666666667rem;
  background-color: #ffea00;
  color: #e41a43;
  font-size: 2.6666666667rem
}

.tab-btn-bar .btn[data-tab-current=current]:after {
  display: block
}

.tab-btn-bar .btn[data-tab-current=current] .text {
  color: var(--tab-btn-txt-active)
}

.tab-content-page {
  display: block;
  width: 100%;
  overflow: hidden
}

.tab-content-page.disable .deposit-wallet .button {
  background: var(--btn-main-bg-disabled)
}

.tab-content-page.disable .deposit-wallet .button a {
  text-shadow: 0 .2666666667rem .8rem color-mix(in srgb, var(--btn-main-txt-shadow-disabled), transparent 50%);
  color: var(--btn-main-txt-disabled)
}

.tab-content-page.disable .withdraw-wallet .button {
  background: var(--btn-main-bg-disabled);
  pointer-events: none
}

.tab-content-page.disable .withdraw-wallet .button a {
  text-shadow: 0 .2666666667rem .8rem color-mix(in srgb, var(--btn-main-txt-shadow-disabled), transparent 50%);
  color: var(--btn-main-txt-disabled)
}

.tab-content-page.disable .withdraw-wallet .verify-tips {
  display: block
}

.tab-content-page.disable .withdraw-wallet .accordion-wrap.error {
  width: 95%;
  margin: 1.3333333333rem auto
}

.tab-content-page.disable .withdraw-wallet .button a:before {
  display: inline-block
}

.withdraw-wallet .verify-tips {
  display: none
}

.close-tips {
  display: inline-block;
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  transition: all .3s;
  background: var(--tips-info-arrow-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70%
}

.tips-info {
  position: relative;
  flex: 1;
  margin: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background-color: var(--tips-info-bg);
  text-align: left;
  white-space: normal
}

.tips-info.show ol {
  height: auto;
  max-height: 10000px;
  opacity: 1
}

.tips-info.show ol:after {
  display: block
}

.tips-info.show .close-tips {
  transform: rotate(180deg);
  transform-origin: center
}

.tips-info ol {
  position: relative;
  width: auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s, opacity .3s;
  opacity: 0;
  color: var(--accordion-txt)
}

.tips-info ol:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: calc(100% - 8.5333333333rem);
  height: .2666666667rem;
  margin: 0 4.2666666667rem;
  background-image: linear-gradient(to right, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem
}

.tips-info .title-box {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 4.2666666667rem
}

.tips-info h5 {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 92%;
  margin-bottom: 2.6666666667rem;
  color: var(--tips-info-title);
  font-size: 3.7333333333rem
}

.tips-info h5 i {
  display: inline-block;
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  margin-right: 3.2rem;
  background: var(--tips-info-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.tips-info h5 span {
  display: inline-block;
  flex: 1;
  width: calc(100% - 50px);
  line-height: 4.2666666667rem;
  vertical-align: text-top
}

.tips-info a {
  text-decoration: none
}

.tips-info p,
.tips-info b {
  display: block;
  padding-bottom: 1.3333333333rem;
  color: var(--tips-info-title);
  font-size: 3.2rem;
  line-height: 1.2;
  text-align: left
}

.tips-info i {
  padding: 0 .8rem;
  color: var(--tips-info-i);
  font-weight: 500
}

.tips-info ul,
.tips-info ol {
  display: block;
  color: var(--tips-info-title);
  font-size: 3.2rem;
  line-height: 1.5;
  text-align: left
}

.tips-info li {
  display: list-item;
  margin: 4.2666666667rem
}

.verify-tips a {
  display: block;
  width: 100%
}

.verify-tips label {
  display: block;
  margin-bottom: 2.1333333333rem;
  font-size: 3.7333333333rem;
  font-weight: 500
}

.verify-tips p {
  display: block
}

.verify-tips h5 {
  margin-bottom: 0
}

.personal-info,
.contact-info,
.document-info,
.info-supporting {
  position: relative;
  padding: 1.0666666667rem 0
}

.personal-info.hide:before,
.contact-info.hide:before,
.document-info.hide:before,
.info-supporting.hide:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.3333333333rem;
  background: color-mix(in srgb, var(--tips-info-arrow-icon-color), transparent 80%)
}

.personal-info li,
.contact-info li,
.document-info li,
.info-supporting li {
  display: inline-block;
  margin: 0 1.0666666667rem 1.6rem 0;
  padding: .5333333333rem 2.1333333333rem;
  border-radius: 5.3333333333rem;
  vertical-align: middle
}

.personal-info label {
  color: var(--tips-personal-info-tag)
}

.personal-info label:before {
  display: none
}

.personal-info li {
  color: var(--tips-personal-info-tag);
  background: color-mix(in srgb, var(--tips-personal-info-tag), transparent 85%)
}

.contact-info label {
  color: var(--tips-content-info-tag)
}

.contact-info label:before {
  display: none
}

.contact-info li {
  color: var(--tips-content-info-tag);
  background: color-mix(in srgb, var(--tips-content-info-tag), transparent 85%)
}

.document-info label {
  color: var(--tips-document-info-tag)
}

.document-info label:before {
  display: none
}

.document-info li {
  color: var(--tips-document-info-tag);
  background: color-mix(in srgb, var(--tips-document-info-tag), transparent 85%)
}

.info-choose-one label {
  color: var(--tips-document-choose-one-info-tag)
}

.info-choose-one label:before {
  display: none
}

.info-choose-one li {
  border: 0;
  color: var(--tips-document-choose-one-info-tag);
  background: color-mix(in srgb, var(--tips-document-choose-one-info-tag), transparent 85%)
}

.info-supporting label {
  color: var(--tips-info-supporting-txt-tag)
}

.info-supporting label:before {
  display: none
}

.info-supporting li {
  border: 0;
  color: var(--tips-info-supporting-txt-tag);
  background: color-mix(in srgb, var(--tips-info-supporting-txt-tag), transparent 85%)
}

.tab-content .inner-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  transition: all .3s
}

.tab-content .inner-box {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 100%
}

.list-loading {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 10.6666666667rem;
  height: 80rem;
  margin: auto;
  transition: height .3s ease
}

.list-loading:before,
.list-loading:after {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  mix-blend-mode: screen
}

.list-loading:before {
  animation: slide-right-left 1s linear infinite;
  background: var(--new-slot-details-loading-color-1)
}

.list-loading:after {
  animation: slide-left-right 1s linear infinite;
  background: var(--new-slot-details-loading-color-2)
}

@keyframes slide-right-left {
  0% {
    transform: translate(0)
  }

  10% {
    transform: translate(50%) scale(1.3)
  }

  40%,
  50% {
    transform: translate(100%)
  }

  60% {
    transform: translate(50%) scale(.75)
  }

  90%,
  to {
    transform: translate(0)
  }
}

@keyframes slide-left-right {
  0% {
    transform: translate(0)
  }

  10% {
    transform: translate(-50%) scale(.75)
  }

  40%,
  50% {
    transform: translate(-100%)
  }

  60% {
    transform: translate(-50%) scale(1.3)
  }

  90%,
  to {
    transform: translate(0)
  }
}

.accordion-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2.1333333333rem 2.1333333333rem 0;
  overflow: hidden;
  border-radius: 1.3333333333rem;
  background: var(--accordion-bg);
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.accordion-wrap.show .a-content {
  height: 100%;
  max-height: 999vh;
  opacity: 1
}

.accordion-wrap.show .a-arrow {
  transform: rotate(180deg);
  transform-origin: center
}

.accordion-wrap .a-title {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4.2666666667rem;
  background: var(--accordion-title-bg);
  color: var(--accordion-title);
  font-size: 4rem;
  text-align: left
}

.accordion-wrap .a-title:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -.2666666667rem;
  width: calc(100% - 8.5333333333rem);
  height: .2666666667rem;
  background-image: linear-gradient(to right, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem 2.6666666667rem
}

.accordion-wrap .a-title .a-text {
  flex-grow: 1;
  font-weight: 500
}

.accordion-wrap .a-title .a-icon {
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  margin-right: 4.2666666667rem;
  background: var(--accordion-info-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.accordion-wrap .a-title .a-arrow {
  display: none;
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  transition: all .3s;
  background-color: var(--accordion-arrow-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70%
}

.accordion-wrap .a-content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s, opacity .5s;
  opacity: 0;
  color: var(--accordion-txt);
  text-align: left
}

.accordion-wrap .a-content ol.a-list {
  padding: 4.2666666667rem 4.2666666667rem 4.2666666667rem 8.5333333333rem
}

.accordion-wrap .a-content .a-list {
  padding: 4.2666666667rem 0 0;
  list-style: auto
}

.accordion-wrap .a-content .a-item {
  padding: 1.0666666667rem 0;
  font-size: 3.7333333333rem;
  line-height: 1.3
}

.accordion-wrap .a-content p {
  padding: 5.3333333333rem;
  font-size: 3.7333333333rem;
  line-height: 1.3;
  white-space: pre-wrap
}

.accordion-wrap.error {
  margin: 2.6666666667rem 0 0
}

.accordion-wrap.error .a-title {
  padding: 4.2666666667rem 0;
  color: var(--color-danger)
}

.accordion-wrap.error .a-title .a-icon,
.accordion-wrap.error .a-title .a-arrow {
  background-color: var(--color-danger)
}

.accordion-wrap.error .a-title:after {
  width: 100%
}

.accordion-wrap.error .a-content {
  color: var(--color-danger)
}

.accordion-wrap.error .a-content .a-item {
  font-size: 3.7333333333rem;
  line-height: 1.5
}

.accordion-wrap .toggle-btn .a-arrow {
  display: block
}

.ticket-wrap {
  display: block;
  width: inherit
}

.ticket {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  margin: 2.1333333333rem;
  color: var(--turnover-card-title)
}

.ticket+.ticket {
  margin-top: 4.2666666667rem
}

.ticket.completed .ticket-deco:before,
.ticket.completed .ticket-deco:after {
  background-color: var(--content-bg)
}

.ticket.completed .ticket-inner {
  background-color: var(--turnover-card-bg-completed)
}

.ticket.completed .ticket-inner-left>div+div {
  margin-top: 1.3333333333rem
}

.ticket.completed .ticket-inner-right:after {
  background-image: linear-gradient(to bottom, var(--pop-bonuswallet-card-detail) 20%, rgba(255, 255, 255, 0) 0%);
  background-repeat: repeat-y;
  background-position: left;
  background-size: .2666666667rem 2.6666666667rem
}

.ticket.completed .ticket-inner-right .text {
  color: var(--color-success);
  line-height: 2
}

.ticket.completed .ticket-inner-right .text:before {
  content: "";
  display: block;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin: auto;
  background: var(--color-success);
  mask: var(--pop-turnover-check-icon) no-repeat center/100%;
  -webkit-mask: var(--pop-turnover-check-icon) no-repeat center/100%
}

.ticket .ticket-deco {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden
}

.ticket .ticket-deco .line {
  display: block;
  position: absolute;
  top: 10%;
  left: 75%;
  width: .2666666667rem;
  height: 80%;
  background-image: linear-gradient(to bottom, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-y;
  background-size: 2.6666666667rem 2.6666666667rem
}

.ticket .ticket-banner {
  display: none;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
  padding: 2.6666666667rem 4rem 0;
  border-radius: 1.0666666667rem 1.0666666667rem 0 0;
  background-color: var(--turnover-card-bg)
}

.ticket .ticket-banner img {
  display: block;
  width: 100%;
  margin: auto;
  border-radius: 1.0666666667rem
}

.ticket .ticket-banner .deco {
  display: inline-block;
  position: relative;
  width: 100%;
  height: .5333333333rem;
  margin: 2.6666666667rem 0;
  background-color: var(--color-ticket-deco-border)
}

.ticket .ticket-banner .deco:before,
.ticket .ticket-banner .deco:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 1.6rem;
  height: 1.6rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--color-ticket-deco-border)
}

.ticket .ticket-banner .deco:before {
  left: 0
}

.ticket .ticket-banner .deco:after {
  right: 0
}

.ticket .ticket-inner {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  width: 100%;
  border-radius: 2.6666666667rem;
  background: var(--turnover-card-bg)
}

.ticket .ticket-inner-left {
  position: relative;
  width: 75%;
  padding: 4.2666666667rem;
  border-right-width: .2666666667rem
}

.ticket .ticket-inner-left>div+div {
  margin-top: 1.3333333333rem
}

.ticket .ticket-inner-right {
  display: flex;
  position: relative;
  align-content: center;
  justify-content: center;
  width: 25%;
  padding: 0 1.3333333333rem
}

.ticket .ticket-inner-right .text {
  margin: auto;
  padding: 1.0666666667rem;
  color: var(--bonuswallet-detail-txt);
  font-size: 3.4666666667rem;
  line-height: 1.5;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all
}

.ticket .title {
  position: relative;
  overflow: hidden;
  font-size: 3.7333333333rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ticket .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: 1.0666666667rem;
  background: var(--turnover-card-border);
  vertical-align: sub
}

.ticket .detail {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start
}

.ticket .detail .date {
  margin: auto 0;
  color: var(--turnover-card-date);
  font-size: 2.6666666667rem
}

.ticket .detail .detail-btn {
  display: flex;
  margin: auto 1.3333333333rem;
  padding: .5333333333rem 1.0666666667rem;
  border: .2666666667rem solid var(--turnover-card-detail);
  border-radius: 1.3333333333rem
}

.ticket .detail .detail-btn a {
  color: var(--turnover-card-detail);
  font-size: 2.6666666667rem;
  text-decoration: none
}

.ticket .discount {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  color: var(--bonuswallet-amount)
}

.ticket .discount .currency {
  margin: 1.6rem 1.3333333333rem 0 0;
  font-size: 3.7333333333rem
}

.ticket .discount .amount {
  font-size: 5.8666666667rem;
  font-weight: 500
}

.list-field {
  display: block;
  flex: 1;
  padding: 0 2.1333333333rem;
  text-align: center
}

.list-field .tags {
  padding: 1.0666666667rem;
  overflow: hidden;
  transform: scale(.9);
  border-radius: 1.0666666667rem;
  color: var(--transaction-record-status-txt);
  font-size: 3.2rem;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap
}

.list-field.amount {
  justify-content: flex-end
}

.list-title,
.list-content li {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  line-height: 1.3
}

.list-title {
  padding: 2.1333333333rem;
  background-color: var(--vip-points-table-head-bg);
  color: var(--vip-points-table-head-txt);
  font-size: 3.2rem;
  font-weight: 500
}

.list-title .list-field {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: .2666666667rem dotted var(--vip-points-table-head-border)
}

.list-title .list-field:last-child {
  border: 0
}

.list-title .list-field:last-child:after {
  content: none
}

.list-content {
  padding: 2.1333333333rem;
  /* background: var(--vip-points-table-body-bg) */
}

.list-content li {
  position: relative;
  align-items: center;
  padding: 1.0666666667rem 0;
  /* background: var(--vip-points-table-body-record-bg);
  color: var(--vip-points-table-body-txt); */
  font-size: 2.9333333333rem
}

.list-content li+li {
  border-top: .2666666667rem solid var(--vip-points-table-body-top-border)
}

.list-content li .list-field:last-of-type {
  border: 0
}

.list-content .list-field {
  position: relative;
  padding: 1.0666666667rem 2.1333333333rem;
  border-right: .2666666667rem dotted var(--vip-points-table-body-border)
}

.no-detail-info .list-arrow {
  opacity: 0
}

.list-arrow {
  flex: 0 1 5.3333333333rem;
  width: 3.2rem;
  height: 3.2rem;
  transform: rotate(180deg);
  background: var(--pop-search-back-icon-color);
  mask-repeat: no-repeat;
  mask-position: center left;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  -webkit-mask-size: 50%
}

.date-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 5.3333333333rem;
  background: var(--transaction-record-table-body-date-bg);
  color: var(--transaction-record-table-body-date)
}

.date-title .date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 3.2rem
}

.date-title .date i {
  display: inline-block;
  width: 4.2666666667rem;
  height: 4rem;
  margin-right: 2.1333333333rem;
  background: var(--transaction-record-calendar-icon-color);
  mask-repeat: no-repeat;
  mask-position: center left;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  -webkit-mask-size: 100%
}

.date-title .time-zone {
  padding: .8rem 1.3333333333rem;
  border-radius: 1.3333333333rem;
  font-size: 2.6666666667rem
}

.time-zone {
  margin-left: 2.1333333333rem;
  padding: 0 1.0666666667rem;
  border: .2666666667rem solid var(--vip-points-table-head-zone);
  border-radius: 1.3333333333rem;
  color: var(--vip-points-table-head-zone);
  font-weight: 400
}

.status-pending .tags {
  background: var(--transaction-record-pending-bg)
}

.status-revert .tags {
  background: var(--transaction-record-revert-bg)
}

.status-positive .tags {
  background: var(--transaction-record-positive-bg)
}

.status-negative .tags {
  background: var(--transaction-record-negative-bg)
}

.profit {
  text-align: right
}

.profit.positive {
  color: var(--betting-record-positive-txt)
}

.profit.negative {
  color: var(--betting-record-negative-txt)
}

.vip-list .list-content .list-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.vip-list .vip-time {
  flex: 0 0 30%;
  text-align: center
}

.vip-list .vip-point {
  flex: 0 0 23%
}

.transaction-record-list .list-content .time {
  flex: 0 0 15%;
  border: 0
}

.transaction-record-list .list-content .amount {
  text-align: right
}

.transaction-record-list .time-zone {
  border: .2666666667rem solid var(--transaction-record-table-body-zone);
  color: var(--transaction-record-table-body-zone)
}

.deposit-crypto-cont .player-crypto-bankcard .menu-box {
  margin-top: 0
}

.deposit-crypto-cont .credit-card {
  margin-top: 2.6666666667rem;
  margin-bottom: 6.4rem
}

.player-crypto-bankcard,
.player-crypto-channel {
  display: none
}

.player-crypto-bankcard.active,
.player-crypto-channel.active {
  display: block
}

.content.player-content:has(mcd-vip-detail-iframe) {
  overflow: hidden
}

@media screen and (min-aspect-ratio: 16/9) {
  .content.player-content:has(mcd-vip-detail-iframe) {
    overflow: hidden
  }
}

.content.player-full-content {
  padding-top: 0;
  padding-bottom: 13.3333333333rem;
  margin-bottom: 13.3333333333rem
}

.inbox-list__editor {
  display: flex;
  justify-content: flex-end
}

.inbox-list .editor__btn {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  background: var(--mail-editor-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 35%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 35%
}

.inbox-list .list-field {
  overflow: visible;
  border: 0
}

.inbox-list .editor-active .chose-btn {
  display: block
}

.inbox-list .editor-active .content-wrap {
  width: 70%
}

.inbox-list .chose-btn {
  display: none;
  flex: 0 0 3.7333333333rem;
  height: 3.7333333333rem;
  margin-right: 2.6666666667rem;
  background-color: var(--mail-editor-choose-icon-color);
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  -webkit-mask-size: contain
}

.inbox-list .icon {
  position: relative;
  flex: 0 0 8rem;
  height: 8rem;
  padding: 0;
  border-radius: 50%;
  background: var(--mail-notice-icon-circle-bg)
}

.inbox-list .icon:before {
  content: "";
  display: block;
  position: absolute;
  top: 5%;
  right: 5%;
  width: 2.1333333333rem;
  height: 2.1333333333rem;
  border-radius: 50%;
  background-color: var(--color-danger)
}

.inbox-list .icon img {
  display: block;
  position: absolute;
  inset: 0;
  width: 50%;
  margin: auto
}

.inbox-list .content-wrap {
  width: 85%;
  margin-left: 4.2666666667rem;
  padding: 4.2666666667rem 0;
  font-size: 3.7333333333rem;
  line-height: 1.5
}

.inbox-list .content-wrap .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between
}

.inbox-list .content-wrap .title span {
  overflow: hidden;
  color: var(--mail-list-title);
  font-size: 4.2666666667rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap
}

.inbox-list .content-wrap .title .msg-time {
  color: var(--mail-list-txt);
  font-size: 3.2rem
}

.inbox-list .content-wrap .text {
  width: 100%;
  height: 5.0666666667rem;
  overflow: hidden;
  color: var(--mail-list-txt);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left
}

.inbox-list .content-wrap .text p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.inbox-list .content-wrap .text a {
  pointer-events: none;
  color: var(--mail-list-txt)
}

.inbox-list .list-content {
  padding: 2.1333333333rem 0;
  background: var(--mail-list-bg)
}

.inbox-list .list-content li {
  background: var(--mail-list-bg)
}

.inbox-list .list-content .read .icon:before {
  display: none
}

.inbox-list .list-content .chosed .chose-btn {
  background-color: var(--mail-editor-choose-icon-active)
}

.inbox-list .date-title {
  background: var(--mail-date-bg);
  color: var(--mail-date-txt)
}

.inbox-list .date-title .date i {
  background: var(--mail-date-calendar-icon-color)
}

.inbox-list .date-title .time-zone {
  border: .2666666667rem solid var(--mail-date-zone);
  color: var(--mail-date-zone)
}

.inbox-list .message-item {
  align-items: center;
  padding: 0 4.2666666667rem;
  border-bottom: .2666666667rem solid var(--mail-list-border)
}

@keyframes choseBtn-ani {
  0% {
    transform: translate(0);
    transform-origin: 50px 50px
  }

  to {
    transform: translate(100%);
    transform-origin: 50px 50px
  }
}

.betting-record-list .platform {
  flex: 0 0 20%
}

.betting-record-list .type {
  flex: 0 0 28%
}

.betting-record-list .list-content .bet,
.betting-record-list .list-content .profit {
  text-align: right
}

.betting-record-list .list-content .profit {
  border: 0
}

.betting-record-list .list-content .list-field {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.betting-record-list .no-result {
  border-top-left-radius: 0;
  border-top-right-radius: 0
}

.betting-record-inner-list .list-content .bet {
  text-align: right
}

.betting-record-inner-list .list-content .list-field.game {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.betting-record-inner-list .profit {
  border: 0
}

.betting-record-inner-list .time-zone {
  border: .2666666667rem solid var(--transaction-record-table-body-zone);
  color: var(--transaction-record-table-body-zone)
}

.betting-record-list .list-content li,
.betting-record-inner-list .list-content li {
  padding: 0
}

.betting-record-list .list-content .list-field,
.betting-record-inner-list .list-content .list-field {
  padding: 2.1333333333rem 1.3333333333rem
}

.content-betting-record .time-zone {
  border: .2666666667rem solid var(--betting-record-table-zone);
  color: var(--betting-record-table-zone)
}

.list-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--betting-record-table-date-area-bg)
}

.list-bar .tip-area {
  display: inline-flex;
  position: relative;
  z-index: 1;
  justify-content: flex-end
}

.list-bar .tip-area .tip-icon {
  display: block;
  width: 8rem;
  height: 8rem;
  background: var(--betting-record-tooltips-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 50%
}

.list-bar .tip-box {
  display: flex;
  position: absolute;
  top: 100%;
  right: 1.3333333333rem;
  flex-direction: column;
  min-height: 0;
  max-height: 0;
  padding: 0 .8rem;
  overflow: hidden;
  transition: all ease-in-out .3s;
  border-radius: .8rem;
  background: var(--betting-record-tooltips-bg);
  color: var(--betting-record-tooltips-txt);
  font-size: 2.6666666667rem
}

.list-bar .tip-box.active {
  min-height: 5.3333333333rem;
  max-height: 53.3333333333rem;
  padding: .8rem;
  border: .2666666667rem solid var(--betting-record-tooltips-border)
}

.list-bar .tip-box span {
  display: flex;
  white-space: nowrap;
  padding: 1.3333333333rem 2.1333333333rem
}

.list-bar .tip-box span:before {
  content: "";
  display: block;
  flex: 0 0 2.1333333333rem;
  width: 2.1333333333rem;
  height: 2.1333333333rem;
  margin: 0 1.3333333333rem 0 0;
  border-radius: 50%
}

.list-bar .tip-box span:nth-child(1):before {
  background-color: var(--betting-record-tooltips-revocation)
}

.list-bar .tip-box span:nth-child(2):before {
  background-color: var(--betting-record-tooltips-void)
}

.list-bar .tip-box span:nth-child(3):before {
  background-color: var(--betting-record-tooltips-refund)
}

.list-bar .date-title {
  display: flex;
  align-items: center
}

.betting-record-sum {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.6666666667rem 0;
  background-color: var(--betting-details-table-head-bg)
}

.betting-record-sum .item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  line-height: 1.5
}

.betting-record-sum .item+.item {
  border-left: .2666666667rem solid var(--betting-details-table-head-border)
}

.betting-record-sum .item .title {
  color: var(--betting-record-table-head-title);
  font-weight: 500
}

.betting-record-sum .item .text {
  color: var(--betting-record-table-head-txt)
}

.betting-record-sum .item.positive .text {
  color: var(--betting-record-positive-txt)
}

.record-item.settled .item-status {
  display: none
}

.record-item.revocation .item-status {
  background-color: color-mix(in srgb, var(--betting-record-tooltips-revocation), transparent 60%)
}

.record-item.revocation .item-status .tags {
  background-color: color-mix(in srgb, var(--betting-record-tooltips-revocation), transparent 20%)
}

.record-item.void .item-status {
  background-color: color-mix(in srgb, var(--betting-record-tooltips-void), transparent 60%)
}

.record-item.void .item-status .tags {
  background-color: color-mix(in srgb, var(--betting-record-tooltips-void), transparent 20%)
}

.record-item.refund .item-status {
  background-color: color-mix(in srgb, var(--betting-record-tooltips-refund), transparent 60%)
}

.record-item.refund .item-status .tags {
  background-color: color-mix(in srgb, var(--betting-record-tooltips-refund), transparent 20%)
}

.record-item.transaction-record-list {
  grid-template-columns: 1.5fr 1.5fr 1.2fr 1fr;
  padding: 0 2.6666666667rem
}

.record-item.transaction-record-list .item {
  padding: 2.6666666667rem
}

.record-item.transaction-record-list .status {
  padding: 2.6666666667rem 1.3333333333rem
}

.record-item.revocation .list-field,
.record-item.void .list-field,
.record-item.refund .list-field {
  opacity: .3
}

.item-status {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(100% - 4px);
  transform: translate(-50%, -50%);
  border-radius: .8rem
}

.item-status .tags {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  padding: .8rem 1.3333333333rem;
  transform: translate(-50%, -50%);
  border-radius: .8rem;
  color: var(--color-record-item-text);
  font-size: 2.6666666667rem;
  font-weight: 500
}

.deposit-acc-info-box {
  margin: 4rem 0 0;
  padding: 4rem;
  border-radius: 2.1333333333rem;
  background: var(--wallet-account-info-bg);
  font-size: 3.2rem
}

.deposit-acc-info-box p {
  flex: 1;
  margin-right: 2.6666666667rem;
  opacity: .7;
  color: var(--wallet-account-info-txt);
  text-align: right;
  word-break: break-word
}

.acc-info li {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 2.6666666667rem;
  padding-bottom: 1.3333333333rem;
  border-bottom: .2666666667rem solid var(--wallet-account-info-border);
  line-height: 1.5
}

.acc-info li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0
}

.acc-info li.active .icon-copy {
  display: block;
  animation: tips-txt-show .3s linear forwards
}

.acc-info li.hide .icon-copy {
  display: block;
  animation: tips-txt-hide .2s linear forwards
}

.acc-info label {
  flex: 0 0 45%;
  padding-right: 1.3333333333rem;
  font-weight: 500;
  color: var(--wallet-account-info-txt)
}

.icon-copy {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 2.6666666667rem;
  padding: 1.3333333333rem 2.6666666667rem;
  border-radius: .8rem;
  opacity: 0;
  background: var(--wallet-bank-card-copy-tooltips-bg);
  box-shadow: 0 0 .5333333333rem #99999980;
  font-size: 3.2rem;
  color: var(--wallet-bank-card-copy-tooltips-txt);
  line-height: 1.5;
  transform: translateY(-100%)
}

.icon-copy:before {
  content: "";
  position: absolute;
  right: 2.6666666667rem;
  bottom: -5px;
  width: 0;
  height: 0;
  border-width: 6px 3px 0;
  border-style: solid;
  border-color: var(--wallet-bank-card-copy-tooltips-bg) transparent transparent
}

.maintain-mask {
  display: none
}

.under-maintain {
  pointer-events: none
}

.under-maintain .maintain-mask {
  display: flex;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  border: .2666666667rem dashed var(--wallet-maintain-border);
  border-radius: 2.6666666667rem;
  background: var(--wallet-maintain-bg)
}

.under-maintain .maintain-tag {
  padding: .8rem 1.3333333333rem;
  border-radius: .5333333333rem;
  line-height: 1
}

.under-maintain .maintain-tag img {
  display: inline-block;
  margin-right: .8rem
}

.under-maintain .maintain-tag .text {
  display: inline-block;
  color: var(--wallet-maintain-txt);
  font-size: 2.6666666667rem;
  line-height: 1.2
}

.option-group {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: 2.6666666667rem
}

.option-group label {
  position: relative;
  height: 6.4rem;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 3.7333333333rem
}

.option-group select {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333rem;
  padding: 0 8.5333333333rem 0 4.2666666667rem;
  border: 0;
  border-radius: 2.6666666667rem;
  outline: none;
  background-color: var(--form-input-bg);
  color: var(--form-input-txt);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 3.2rem;
  appearance: none
}

.option-group select option {
  font-size: 3.2rem
}

.option-group select:disabled {
  border-bottom: .2666666667rem solid var(--form-input-border-disabled);
  border-radius: 0;
  background: none
}

.option-group h2 {
  position: relative;
  width: 100%;
  padding-left: 4.2666666667rem;
  color: var(--color-title);
  font-size: 4rem;
  font-weight: 500;
  line-height: 2
}

.option-group h2:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 20%;
  left: 0;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: .5333333333rem;
  background: var(--wallet-title-border);
  vertical-align: middle
}

.option-group.select-bar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 4.2666666667rem;
  padding: 2.1333333333rem 0 2.1333333333rem 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--form-box-bg)
}

.option-group.select-bar .option-wrap {
  width: 100%;
  background-color: transparent
}

.option-group.select-bar select {
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  color: var(--form-input-txt);
  text-align-last: right;
  text-overflow: ellipsis;
  white-space: nowrap
}

.option-group.select-bar option {
  background: var(--form-input-bg);
  color: var(--form-input-txt)
}

.option-wrap {
  position: relative;
  width: 100%;
  border-radius: .8rem
}

.option-wrap:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 5.3333333333rem;
  right: 4.2666666667rem;
  border-width: 1.0666666667rem;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent
}

.player-deposit-step2 .qrcode.noCreditCardTemplate {
  top: 0;
  right: 3.2rem
}

.button.btn-primary.contact_cs {
  margin: 2.1333333333rem
}

.bank-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center
}

.bank-qrcode .deposit-qrcode {
  width: 80%;
  margin-bottom: 4.2666666667rem;
  border-radius: 1.0666666667rem
}

.bank-qrcode .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80%
}

.bank-qrcode .item-icon {
  display: block;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-left: 4.2666666667rem;
  background: var(--wallet-qrcode-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

@keyframes tips-txt-show {
  0% {
    top: -13.3333333333rem;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

@keyframes tips-txt-hide {
  0% {
    top: 0;
    opacity: 1
  }

  to {
    top: -13.3333333333rem;
    opacity: 0
  }
}

.accordion-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 13.8666666667rem;
  margin: 4.2666666667rem;
  transition: all .4s ease-in-out;
  border-radius: 2.6666666667rem;
  opacity: 1;
  background: var(--wallet-pending-transactions-bg)
}

.accordion-card-wrap.remove {
  height: 0;
  min-height: 0;
  margin: 0 2.6666666667rem;
  transform: translateY(-10%);
  opacity: 0
}

.accordion-card-wrap.remove .ac-notice {
  opacity: 0
}

.accordion-card-wrap.show .ac-content {
  height: auto;
  max-height: 10000px;
  opacity: 1
}

.accordion-card-wrap.show .ac-arrow {
  transform: rotate(180deg);
  transform-origin: center
}

.accordion-card-wrap .ac-title {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.8666666667rem;
  padding: 4.2666666667rem;
  color: var(--wallet-pending-transactions-title);
  font-size: 4rem;
  text-align: left
}

.accordion-card-wrap .ac-title .ac-text {
  flex-grow: 1;
  font-weight: 500
}

.accordion-card-wrap .ac-title .ac-icon {
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  margin-right: 4.2666666667rem;
  background: var(--wallet-pending-transactions-arrow-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.accordion-card-wrap .ac-title .ac-arrow {
  display: none;
  width: 3.4666666667rem;
  height: 3.4666666667rem;
  transition: all .3s;
  background-color: var(--tips-info-arrow-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70%
}

.accordion-card-wrap .ac-title .ac-notice {
  position: absolute;
  top: 0;
  right: 0;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  transform: translate(15%, -35%);
  transition: all .3s ease-in-out;
  border-radius: 50%;
  opacity: 1;
  background: var(--color-danger);
  box-shadow: 0 0 .8rem #00000080;
  color: #fff;
  line-height: 5.3333333333rem;
  text-align: center
}

.accordion-card-wrap .ac-title .ac-notice.ani {
  animation: notice-jump .3s ease-in-out 1
}

@keyframes notice-jump {
  0% {
    transform: translate(15%, -35%)
  }

  20% {
    transform: translate(15%, -55%) scale(1.3)
  }

  35% {
    transform: translate(15%, -55%) scale(1.3)
  }

  to {
    transform: translate(15%, -35%)
  }
}

.accordion-card-wrap .ac-content {
  position: relative;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s, opacity .5s;
  opacity: 0;
  color: var(--accordion-txt)
}

.accordion-card-wrap .ac-content:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: calc(100% - 8.5333333333rem);
  height: .2666666667rem;
  margin: 0 4.2666666667rem;
  background-image: linear-gradient(to right, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem
}

.ac-list {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  margin: 0 4.2666666667rem;
  padding: 1.0666666667rem 0;
  transition: all .4s ease-in-out;
  opacity: 1
}

.ac-list+.ac-list:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: .2666666667rem;
  background-image: linear-gradient(to right, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem
}

.ac-list>div {
  transition: all .2s ease-in-out;
  opacity: 1
}

.ac-list.removed {
  height: 0;
  min-height: 0;
  margin: 0 1.3333333333rem;
  padding: 0 4rem;
  transform: translate(-100%)
}

.ac-list.removed>div {
  opacity: 0
}

.ac-list .ac-item {
  overflow: hidden;
  line-height: 1.8
}

.ac-list .ac-item .number {
  color: var(--wallet-pending-transactions-number);
  font-size: 3.7333333333rem;
  font-weight: 500;
  text-decoration: underline
}

.ac-list .ac-item .date {
  color: var(--wallet-pending-transactions-date);
  font-size: 2.9333333333rem
}

.ac-list .ac-item .amount {
  color: var(--wallet-pending-transactions-amount);
  font-size: 4rem;
  font-weight: 500
}

.ac-list .btn-revert {
  position: relative;
  z-index: 0;
  padding: 2.4rem 5.3333333333rem;
  border-radius: 2.6666666667rem;
  background: var(--wallet-pending-transactions-btn-border);
  color: var(--wallet-pending-transactions-btn-txt);
  font-size: 3.2rem
}

.ac-list .btn-revert:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: .2666666667rem;
  left: .2666666667rem;
  width: calc(100% - .5333333333rem);
  height: calc(100% - .5333333333rem);
  border-radius: 2.5333333333rem;
  background: var(--wallet-pending-transactions-btn-bg)
}

.accordion-card-wrap .toggle-btn .ac-arrow {
  display: block
}

.withdrawal-processing-pop .pop-inner,
.deposit-success-pop .pop-inner {
  padding: 6.4rem;
  text-align: center
}

.withdrawal-processing-pop .info-cont,
.deposit-success-pop .info-cont {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6.4rem
}

.withdrawal-processing-pop .processing-cont,
.deposit-success-pop .processing-cont {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 4.2666666667rem 4.2666666667rem;
  margin-bottom: 4.2666666667rem;
  border-bottom: .2666666667rem solid var(--transaction-pop-processing-cont-border-color)
}

.withdrawal-processing-pop .state,
.deposit-success-pop .state {
  position: relative;
  width: 14.4rem;
  height: 14.4rem;
  margin: 0 auto;
  animation: fallin .7s forwards .2s;
  border-radius: 100%;
  opacity: 0;
  background: var(--transaction-pop-state-bg)
}

.withdrawal-processing-pop .state .icon,
.deposit-success-pop .state .icon {
  position: absolute;
  right: -.4rem;
  background-color: var(--transaction-pop-state-icon-bg);
  display: inline-block;
  height: 100%;
  width: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 50%
}

.withdrawal-processing-pop .processing,
.deposit-success-pop .processing {
  text-align: center
}

.withdrawal-processing-pop .processing h3,
.deposit-success-pop .processing h3 {
  color: var(--transaction-pop-processing-title);
  font-size: 5.3333333333rem;
  margin: 2.6666666667rem 0 1.3333333333rem;
  font-weight: 700
}

.withdrawal-processing-pop .processing span,
.deposit-success-pop .processing span {
  color: var(--transaction-pop-processing-txt);
  font-size: 3.2rem;
  line-height: 1
}

.withdrawal-processing-pop .amount-cont,
.deposit-success-pop .amount-cont {
  font-weight: 700
}

.withdrawal-processing-pop .amount-cont h4,
.deposit-success-pop .amount-cont h4 {
  font-weight: 400;
  font-size: 4.8rem;
  color: var(--transaction-pop-amount-cont-txt);
  margin-bottom: 2.6666666667rem;
  line-height: 1
}

.withdrawal-processing-pop .amount-cont .amount,
.deposit-success-pop .amount-cont .amount {
  font-size: 6.9333333333rem;
  color: var(--transaction-pop-amount-cont-txt-strong)
}

.withdrawal-processing-pop .info-list,
.deposit-success-pop .info-list {
  margin: 6.4rem 0 0;
  overflow: auto;
  font-size: 3.2rem;
  text-align: left
}

.withdrawal-processing-pop .info-list li,
.deposit-success-pop .info-list li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0
}

.withdrawal-processing-pop .info-list li label,
.withdrawal-processing-pop .info-list li span,
.deposit-success-pop .info-list li label,
.deposit-success-pop .info-list li span {
  display: inline-block;
  word-break: break-all;
  padding: 2.6666666667rem;
  line-height: 1.3
}

.withdrawal-processing-pop .info-list li label,
.deposit-success-pop .info-list li label {
  color: var(--transaction-pop-info-list-title);
  background: var(--transaction-pop-info-list-title-bg)
}

.withdrawal-processing-pop .info-list li span,
.deposit-success-pop .info-list li span {
  color: var(--transaction-pop-info-list-txt);
  background: var(--transaction-pop-info-list-txt-bg)
}

@keyframes fallin {
  0% {
    transform: scale(3);
    opacity: 0
  }

  50% {
    transform: scale(1);
    opacity: 1
  }

  60% {
    transform: scale(1.1)
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.tag-free {
  position: absolute;
  z-index: 3;
  top: 1.3333333333rem;
  left: -1.0666666667rem;
  width: 4.8rem;
  height: 4rem;
  border-radius: .5333333333rem 0 0 .5333333333rem;
  background: var(--wallet-free-tag-bg)
}

.tag-free i {
  position: absolute;
  top: 0;
  left: .4rem;
  width: 100%;
  height: 100%;
  background-color: var(--wallet-free-tag-txt);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 85%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 85%
}

.tag-free:after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 4.8rem;
  border-top: 2rem solid transparent;
  border-bottom: 2rem solid transparent;
  border-left: 1.3333333333rem solid var(--wallet-free-tag-bg)
}

.main-wallet-info {
  width: 100%;
  padding: 4.2666666667rem;
  zoom: 1
}

.main-wallet-info:after {
  content: "";
  display: block;
  clear: both
}

.main-wallet-info h4 {
  display: inline-block;
  width: 95%;
  font-size: 9.3333333333rem;
  font-weight: 500;
  letter-spacing: .2666666667rem;
  text-align: right
}

.main-wallet-info h5 {
  display: inline-block;
  width: 5%;
  font-size: 6.4rem;
  font-weight: 500
}

.operating-wallet {
  display: flex;
  flex-direction: row;
  justify-content: flex-end
}

.operating-wallet button,
.operating-wallet .btn-renew {
  min-width: 21.3333333333rem;
  margin: 0 1.3333333333rem 0 0;
  padding: 0 4rem;
  border: 0;
  border-radius: 8rem;
  outline: none;
  box-shadow: inset 0 .2666666667rem .2666666667rem #ffffff80, 0 0 .5333333333rem .2666666667rem #0003;
  color: var(--btn-main-txt);
  font-size: 3.2rem;
  line-height: 8rem;
  text-align: center
}

.operating-wallet button:last-child,
.operating-wallet .btn-renew:last-child {
  margin-right: 0
}

.operating-wallet .btn-take-back {
  background: var(--pop-transfer-btn-take-back)
}

.operating-wallet .btn-other-account {
  background: var(--pop-transfer-btn-other-account)
}

.operating-wallet .btn-renew {
  background: var(--pop-transfer-btn-other-renew)
}

.operating-wallet .btn-renew img {
  width: 3.2rem;
  margin-right: 1.3333333333rem
}

.operating-wallet .btn-renew span,
.operating-wallet .btn-renew img {
  vertical-align: middle
}

.operating-wallet .btn-renew.active img {
  animation: reneWallet 1s ease
}

.renew-main-wallet {
  display: inline-flex;
  width: 100%;
  align-items: center;
  line-height: 2
}

.renew-main-wallet.active .icon-refresh {
  animation: rotate 1s forwards
}

.renew-main-wallet span {
  font-size: 3.2rem;
  font-weight: 500
}

.renew-main-wallet .icon-refresh {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: 2.1333333333rem;
  background: var(--pop-transfer-wallet-refresh-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.content-transfer {
  overflow: hidden
}

.content-transfer .menu-box {
  padding: 2.6666666667rem
}

.content-transfer .menu-box .select-box:last-child {
  float: right
}

.select-box {
  display: inline-block;
  position: relative;
  width: 46%
}

.select-box:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  right: 2.6666666667rem;
  bottom: 18%;
  transform: translateY(-25%);
  border-width: 1.0666666667rem;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent
}

.select-box label {
  display: block;
  font-size: 3.7333333333rem;
  line-height: 2
}

.select-box select {
  display: block;
  position: relative;
  width: 100%;
  height: 10.6666666667rem;
  padding: 0 2.6666666667rem;
  border: 0;
  border-radius: .8rem;
  outline: none;
  color: var(--wallet-account-info-txt);
  appearance: none
}

.pop-other-account {
  position: fixed;
  z-index: 9000;
  bottom: -100%;
  left: 0;
  width: 100%;
  min-height: 20vh;
  max-height: 85vh;
  padding: 4rem 5%;
  overflow: hidden;
  transition: .4s;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  background: var(--pop-bg-content)
}

.pop-other-account.active {
  bottom: 0
}

.pop-other-account .menu-box {
  padding: 0
}

.pop-other-account .button {
  height: 12rem;
  line-height: 12rem
}

.account-count {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: 72vh;
  margin-top: 2.6666666667rem;
  overflow-x: hidden;
  overflow-y: auto
}

.account-box {
  flex: 0 0 32%;
  margin: 0 2% 1.6rem 0;
  padding: 1.8666666667rem;
  border: .2666666667rem solid var(--color-pop-btn-border);
  border-radius: .8rem;
  background: var(--color-pop-select-bg);
  font-size: 3.2rem;
  text-align: center
}

.account-box:nth-child(3n) {
  margin-right: 0
}

.account-box h6 {
  margin-bottom: 2.1333333333rem;
  color: var(--primary);
  font-weight: 700
}

.account-box>p {
  color: var(--color-title)
}

.account-box div img {
  margin-right: 1.3333333333rem;
  vertical-align: middle
}

.account-box div span {
  color: #999
}

.account-box.loading img {
  animation: reneWallet 2s linear infinite
}

.account-box.repair {
  background: var(--color-pop-repair)
}

.account-box.repair h6 {
  color: #888
}

.secondary-money-info {
  min-width: 84%;
  margin-top: 2.1333333333rem;
  padding: 1.0666666667rem 4.2666666667rem;
  float: right;
  border: .2666666667rem solid var(--pop-transfer-bonus-border);
  border-radius: 8rem;
  background: var(--pop-transfer-bonus-bg);
  color: var(--pop-transfer-bonus-txt);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 0
}

.secondary-money-info p,
.secondary-money-info span {
  max-width: 48%;
  overflow: hidden;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap
}

.secondary-money-info p {
  display: inline-block;
  margin-right: 2%
}

.secondary-money-info span {
  float: right
}

.pop-transfer {
  padding: 0
}

.pop-transfer .main-wallet-info {
  background: var(--pop-transfer-bg);
  color: var(--pop-transfer-txt)
}

.pop-transfer .menu-box {
  padding: 4.2666666667rem
}

.recommend-friends-box {
  width: auto;
  height: auto;
  margin: 4.2666666667rem;
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--vip-detail-box-bg);
  box-shadow: 0 0 1.6rem var(--vip-detail-box-bg-shadow), inset 0 .2666666667rem .5333333333rem color-mix(in srgb, var(--inset-shadow), transparent 80%)
}

.recommend-friends-box .deco-box {
  position: relative;
  height: 17.0666666667rem
}

.recommend-friends-box .deco-box .deco-img {
  display: block;
  position: relative;
  width: 32rem;
  height: 32rem;
  margin: auto;
  overflow: hidden;
  transform: translateY(-50%);
  background: var(--recommend-gift-bg);
  border-radius: 50%
}

.recommend-friends-box .deco-box .deco-img img {
  display: block;
  position: absolute;
  top: 60%;
  left: 50%;
  width: 120%;
  height: 120%;
  margin: auto;
  transform: translate(-50%, -45%) rotate(0)
}

.recommend-friends-box .deco-box .deco-img video {
  width: 32rem;
  height: 32rem
}

.recommend-friends-box .deco-box .deco-img .img-ios-gift {
  top: 45%;
  width: 32rem;
  height: 32rem
}

.recommend-friends-box .title {
  width: 100%;
  line-height: 9.3333333333rem
}

.recommend-friends-box .title h2 {
  color: var(--recommend-title);
  font-size: 3.7333333333rem;
  font-weight: 500
}

.recommend-friends-box .title h2 span {
  display: inline-block;
  vertical-align: middle
}

.recommend-friends-box .title h2:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: .5333333333rem;
  background: var(--recommend-border);
  vertical-align: middle
}

@keyframes rotateGift1 {
  0% {
    transform: translate(-50%, -30%) rotate(0)
  }

  5% {
    transform: translate(-50%, -45%) rotate(0)
  }

  10% {
    transform: translate(-50%, -45%) rotate(0)
  }

  15% {
    transform: translate(-50%, -45%) rotate(-20deg)
  }

  20% {
    transform: translate(-50%, -45%) rotate(20deg)
  }

  25% {
    transform: translate(-50%, -45%) rotate(0)
  }

  30%,
  to {
    transform: translate(-50%, -45%) rotate(0)
  }
}

@keyframes rotateGift2 {
  0% {
    transform: translate(-50%, -45%) rotate(0)
  }

  5% {
    transform: translate(-50%, -45%) rotate(0)
  }

  10% {
    transform: translate(-50%, -45%) rotate(0)
  }

  15% {
    transform: translate(-50%, -45%) rotate(-20deg)
  }

  20% {
    transform: translate(-50%, -45%) rotate(20deg)
  }

  25% {
    transform: translate(-50%, -45%) rotate(0)
  }

  30%,
  to {
    transform: translate(-50%, -45%) rotate(0)
  }
}

.code-box {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between
}

.code-box:after {
  content: "";
  display: block;
  position: relative;
  bottom: 0;
  width: 100%;
  height: .2666666667rem;
  margin: 4.2666666667rem 0;
  background-image: linear-gradient(to right, var(--recommend-dot) 0%, var(--recommend-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem
}

.code-box p {
  width: 100%;
  padding-bottom: 2.6666666667rem;
  line-height: 1.3;
  font-size: 3.2rem;
  color: var(--recommend-txt)
}

.code-box .code {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex: 2;
  border: .2666666667rem solid var(--recommend-input-border);
  border-radius: 2.6666666667rem;
  overflow: hidden
}

.code-box .code span {
  display: block;
  color: var(--vip-detail-txt);
  letter-spacing: 2px;
  padding: 1.3333333333rem 3.2rem;
  font-weight: 500;
  font-size: 4.8rem
}

.code-box .code .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  padding: 1.3333333333rem 2.6666666667rem;
  transition: all .3s;
  background: var(--recommend-input-btn)
}

.code-box .code .btn:active {
  opacity: .7
}

.code-box .btn-share {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: .8;
  background: var(--recommend-share-btn);
  border-radius: 2.6666666667rem;
  font-size: 3.7333333333rem;
  font-weight: 500;
  color: var(--recommend-share-txt);
  margin-left: 2.6666666667rem;
  padding: 0 2.6666666667rem
}

.condition-box .title {
  display: flex;
  align-items: center;
  margin-bottom: 2.6666666667rem;
  color: var(--recommend-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  line-height: 1.2
}

.condition-box .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.6666666667rem;
  border-radius: 2.1333333333rem;
  background: var(--recommend-border);
  vertical-align: sub
}

.condition-box .item {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  margin: 0 0 2.1333333333rem;
  font-size: 3.2rem;
  font-weight: 500
}

.condition-box .item .condition {
  flex: 0 0 35%;
  display: flex;
  align-items: center;
  line-height: 1.2;
  color: var(--recommend-condition-title)
}

.condition-box .item .condition:before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 2.6666666667rem 0 0;
  border-radius: 50%;
  background: var(--recommend-condition-dot)
}

.condition-box .item .text {
  width: 65%;
  height: 10.6666666667rem;
  line-height: 10.6666666667rem;
  color: var(--vip-detail-card-txt);
  border-radius: 2.6666666667rem;
  background-color: var(--recommend-condition-bg);
  padding: 0 4.2666666667rem
}

.status-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row
}

.status-box .status {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  padding: 1.3333333333rem;
  text-align: center
}

.status-box .status.accept {
  position: relative
}

.status-box .status.accept:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: .2666666667rem;
  height: 100%;
  background-image: linear-gradient(to bottom, var(--recommend-dot) 0%, var(--recommend-dot) 10%, transparent 10%);
  background-repeat: repeat-y;
  background-size: 2.6666666667rem 2.6666666667rem
}

.status-box .status.accept:last-child:after {
  background: none
}

.status-box .status.accept .number {
  color: var(--vip-detail-highlight-txt)
}

.status-box .status .number {
  font-size: 8rem;
  margin-bottom: 1.8666666667rem;
  font-weight: 600
}

.status-box .status .text {
  color: var(--vip-detail-txt);
  font-size: 3.2rem;
  font-weight: 500
}

.terms {
  text-align: center
}

.terms .terms-link {
  display: inline-block;
  margin: auto;
  color: var(--recommend-terms-link);
  font-size: 2.9333333333rem;
  font-weight: 500;
  transition: all .3s;
  text-decoration: underline
}

.date-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4.2666666667rem
}

.date-bar .text {
  display: block;
  font-size: 3.2rem;
  padding: 0 .8rem;
  color: var(--color-rf-statusbox-input-date-text)
}

.date-bar .date-input {
  width: 35%
}

.date-bar .date-input:before {
  left: auto;
  right: 0;
  width: 9.3333333333rem;
  margin: 0;
  height: 8rem
}

.date-bar .date-input input {
  width: 100%;
  padding: 0
}

.btn-submit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 20%;
  border-radius: 1.3333333333rem;
  padding: 0 1.3333333333rem;
  margin-left: 1.3333333333rem;
  height: 8rem;
  line-height: 8rem;
  color: var(--btn-main-txt);
  text-shadow: 0 .5333333333rem 1.0666666667rem color-mix(in srgb, var(--text-shadow), transparent 60%);
  background: var(--btn-main-bg);
  font-size: 3.7333333333rem;
  font-weight: 500;
  text-align: center
}

.list-status {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4.2666666667rem
}

.list-status .title {
  color: var(--vip-detail-card-txt);
  font-size: 3.2rem
}

.list-status img {
  width: 4.2666666667rem;
  margin: 0 1.3333333333rem
}

.list-status .text {
  font-size: 2.9333333333rem
}

.list-status div {
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.list-status .pending .text {
  color: var(--color-rf-status-pending-text)
}

.list-status .expired {
  margin-left: 2.6666666667rem
}

.list-status .expired .text {
  color: var(--color-rf-status-expired-text)
}

.spread {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%)
}

.spread .bubble,
.spread .circle {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center;
  border-radius: 50%;
  color: #e2264d;
  filter: none
}

.spread .bubble {
  box-sizing: border-box;
  width: 16rem;
  height: 16rem;
  transform: translate(-50%, -50%) scale(0);
  border: solid 8rem #ffe75a
}

.spread .circle {
  width: .375rem;
  height: .375rem;
  margin: -.1875rem;
  box-shadow: .3247595264rem -6.1875rem 0 -.1875rem #ff8080, -.3247595264rem -5.8125rem 0 -.1875rem #ffed80, 5.0400665505rem -3.603935927rem 0 -.1875rem #ffed80, 4.3419112394rem -3.8779416952rem 0 -.1875rem #a4ff80, 5.9601006635rem 1.6934654059rem 0 -.1875rem #a4ff80, 5.739034332rem .9767858111rem 0 -.1875rem #80ffc8, 2.3920574129rem 5.7156527478rem 0 -.1875rem #80ffc8, 2.8145503072rem 5.0959743279rem 0 -.1875rem #80c8ff, -2.9772538586rem 5.4338369925rem 0 -.1875rem #80c8ff, -2.2292640758rem 5.3778130146rem 0 -.1875rem #a480ff, -6.104632245rem 1.0602311526rem 0 -.1875rem #a480ff, -5.5928411824rem 1.6105369557rem 0 -.1875rem #ff80ed, -4.6350976008rem -4.1117502783rem 0 -.1875rem #ff80ed, -4.7246417338rem -3.3623215902rem 0 -.1875rem #ff8080
}

.member-menu-shortcut .spread {
  z-index: 1;
  top: 35%
}

.member-menu-shortcut .spread .bubble {
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  border: solid 4rem color-mix(in srgb, var(--sidenav-set-shortcut-set-icon-color), transparent 50%)
}

.member-menu-shortcut .spread .circle {
  width: 1.3333333333rem;
  height: 1.3333333333rem;
  margin: .5333333333rem;
  box-shadow: .3247595264rem -3.1875rem 0 -.1875rem #ff8080, -.3247595264rem -2.8125rem 0 -.1875rem #ffed80, 2.6945721031rem -1.7334665214rem 0 -.1875rem #ffed80, 1.996416792rem -2.0074722897rem 0 -.1875rem #a4ff80, 3.0353169269rem 1.025902604rem 0 -.1875rem #a4ff80, 2.8142505954rem .3092230092rem 0 -.1875rem #80ffc8, 1.0904061956rem 3.0127461441rem 0 -.1875rem #80ffc8, 1.5128990899rem 2.3930677242rem 0 -.1875rem #80c8ff, -1.6756026413rem 2.7309303888rem 0 -.1875rem #80c8ff, -.9276128584rem 2.6749064109rem 0 -.1875rem #a480ff, -3.1798485085rem .3926683507rem 0 -.1875rem #a480ff, -2.6680574459rem .9429741538rem 0 -.1875rem #ff80ed, -2.2896031695rem -2.2412808754rem 0 -.1875rem #ff80ed, -2.3791473025rem -1.4918521873rem 0 -.1875rem #ff8080
}

@keyframes bubble {
  0% {
    transform: translate(-50%, -50%) scale(0)
  }

  10% {
    transform: translate(-50%, -50%) scale(1);
    border-width: 8rem
  }

  20%,
  90%,
  to {
    border-width: 0;
    transform: translate(-50%, -50%) scale(1)
  }
}

@keyframes sparkles {

  0%,
  35% {
    opacity: 0
  }

  40% {
    opacity: 1;
    box-shadow: .3247595264rem -4.9875rem #ff8080, -.3247595264rem -4.6125rem #ffed80, 4.1018687716rem -2.8557481648rem #ffed80, 3.4037134604rem -3.129753933rem #a4ff80, 4.7901871689rem 1.4264402852rem #a4ff80, 4.5691208374rem .7097606903rem #80ffc8, 1.871396926rem 4.6344901063rem #80ffc8, 2.2938898203rem 4.0148116864rem #80c8ff, -2.4565933717rem 4.352674351rem #80c8ff, -1.7086035888rem 4.2966503731rem #a480ff, -4.9347187504rem .7932060319rem #a480ff, -4.4229276878rem 1.3435118349rem #ff80ed, -3.6968998283rem -3.3635625171rem #ff80ed, -3.7864439613rem -2.614133829rem #ff8080
  }
}

@keyframes setsparkles {

  0%,
  35% {
    opacity: 0
  }

  40% {
    opacity: 1;
    box-shadow: .3247595264rem -2.7675rem 0 -.05625rem #ff8080, -.3247595264rem -2.3925rem 0 -.05625rem #ffed80, 2.3662028805rem -1.4716008047rem 0 -.05625rem #ffed80, 1.6680475694rem -1.7456065729rem 0 -.05625rem #a4ff80, 2.6258472038rem .9324438118rem 0 -.05625rem #a4ff80, 2.4047808723rem .2157642169rem 0 -.05625rem #80ffc8, .9081750251rem 2.6343392196rem 0 -.05625rem #80ffc8, 1.3306679195rem 2.0146607997rem 0 -.05625rem #80c8ff, -1.4933714708rem 2.3525234643rem 0 -.05625rem #80c8ff, -.745381688rem 2.2964994864rem 0 -.05625rem #a480ff, -2.7703787854rem .2992095585rem 0 -.05625rem #a480ff, -2.2585877228rem .8495153615rem 0 -.05625rem #ff80ed, -1.9612339491rem -1.979415159rem 0 -.05625rem #ff80ed, -2.0507780821rem -1.2299864709rem 0 -.05625rem #ff8080
  }
}

.complete-time {
  color: var(--recommend-complete-txt)
}

.complete-time.pending {
  color: var(--color-warning)
}

.complete-time.expired {
  color: var(--state-expired)
}

.complete-time img {
  width: 4.8rem
}

.complete-time .text {
  margin-left: 1.3333333333rem;
  flex: 1 1 auto;
  text-align: left
}

.recommend-friends-list .list-content .list-field {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.recommend-friends-list .list-content .pending,
.recommend-friends-list .list-content .expired {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center
}

.recommend-friends-list .no-result {
  margin-top: 0
}

.bonus-wallet-wrap {
  display: block;
  width: calc(100% - 4.2666666667rem);
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--bonuswallet-card-bg);
  overflow: hidden;
  box-shadow: 0 .5333333333rem .5333333333rem #281a700d
}

.bonus-wallet-wrap.ongoing {
  display: none;
  z-index: 5
}

.bonus-wallet-wrap.ongoing.show {
  display: block;
  margin-top: 0
}

.bonus-wallet-wrap.hide {
  transform: scaleY(0);
  transition: all .3s ease-in
}

.bonus-wallet {
  display: block;
  position: relative;
  padding: 4rem;
  box-shadow: 0 -.5333333333rem 1.0666666667rem #0000061a, inset .2666666667rem .2666666667rem .5333333333rem color-mix(in srgb, var(--inset-shadow), transparent 90%)
}

.bonus-wallet .title {
  position: relative;
  overflow: hidden;
  color: var(--bonuswallet-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap
}

.bonus-wallet .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.8rem;
  margin-right: 2.1333333333rem;
  border-radius: 1.0666666667rem;
  background: var(--bonuswallet-border);
  vertical-align: sub
}

.bonus-wallet .wallet-label {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 13.3333333333rem;
  height: 6.9333333333rem;
  padding: 0 1.0666666667rem 0 .2666666667rem;
  border-radius: 8rem 0 0 8rem;
  background-color: var(--promotion-bonuswallet-label-normal);
  color: #fff;
  font-size: 2.9333333333rem
}

.bonus-wallet .wallet-label span {
  display: inline-block;
  width: 6.9333333333rem;
  height: 6.9333333333rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%
}

.bonus-wallet .wallet-label--running {
  background-color: var(--promotion-bonuswallet-label-running)
}

.bonus-wallet .wallet-label--disabled {
  background-color: var(--promotion-bonuswallet-label-disabled)
}

.bonus-wallet .wallet-inner {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-top: 2.6666666667rem;
  border-radius: 1.0666666667rem
}

.bonus-wallet .wallet-inner-left {
  width: 21.8666666667rem;
  height: 21.8666666667rem;
  margin-right: 4rem;
  overflow: hidden;
  border-radius: 1.0666666667rem;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover
}

.bonus-wallet .wallet-inner-right {
  display: flex;
  position: relative;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 70%
}

.bonus-wallet .wallet-inner-right .text {
  margin: auto;
  padding: 2.6666666667rem;
  color: var(--pop-bonuswallet-card-detail);
  font-size: 3.4666666667rem;
  line-height: 1.5;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all
}

.bonus-wallet .card-detail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  margin-bottom: 2.6666666667rem
}

.bonus-wallet .card-detail .card-date {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  margin: 0 1.3333333333rem 0 0;
  color: var(--pop-bonuswallet-card-date);
  font-size: 2.6666666667rem
}

.bonus-wallet .card-detail .card-date div {
  line-height: 1.5
}

.bonus-wallet .card-detail .time-zone {
  display: block;
  align-self: flex-start;
  margin: .8rem 1.3333333333rem .8rem 0;
  padding: .5333333333rem 1.0666666667rem;
  border: 1px solid var(--bonuswallet-zone);
  border-radius: 1.3333333333rem;
  color: var(--bonuswallet-zone);
  font-size: 2.6666666667rem
}

.bonus-wallet .card-detail .detail-btn {
  display: flex;
  align-self: flex-start;
  margin: .8rem 0;
  padding: .5333333333rem 1.3333333333rem;
  border: .2666666667rem solid var(--pop-bonuswallet-card-detail);
  border-radius: 1.3333333333rem;
  font-weight: 500
}

.bonus-wallet .card-detail .detail-btn a {
  color: var(--pop-bonuswallet-card-detail);
  font-size: 2.6666666667rem;
  text-decoration: none
}

.bonus-wallet .discount {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  color: var(--bonuswallet-amount)
}

.bonus-wallet .discount.complete {
  color: var(--bonuswallet-amount-complete)
}

.bonus-wallet .discount.disable {
  color: var(--bonuswallet-amount-disable)
}

.bonus-wallet .discount .currency {
  margin: 1.6rem 1.3333333333rem 0 0;
  font-size: 3.7333333333rem
}

.bonus-wallet .discount .amount {
  padding-bottom: 2.6666666667rem;
  font-size: 5.8666666667rem;
  font-weight: 500
}

.bonus-wallet .discount .turn-hide {
  display: none
}

.bonus-wallet .discount02 {
  display: none;
  flex-direction: row;
  justify-content: flex-start;
  margin: 0 0 2.6666666667rem;
  color: var(--bonuswallet-detail-txt);
  font-size: 3.2rem
}

.bonus-wallet .discount02 .deposit {
  padding-right: 5.3333333333rem
}

.dec-line-wrap {
  position: relative;
  height: 5.3333333333rem
}

.dec-line-wrap .dec-line {
  display: block;
  position: relative;
  left: 5%;
  bottom: 0;
  width: 90%;
  height: .2666666667rem;
  margin: 4.2666666667rem 0;
  background-image: linear-gradient(to right, var(--recommend-dot) 0%, var(--recommend-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem
}

.bonus-card-down {
  display: block;
  position: relative;
  padding: 2.1333333333rem 4.2666666667rem 4.2666666667rem;
  border-radius: 0 0 2.6666666667rem 2.6666666667rem;
  box-shadow: 0 .5333333333rem 1.0666666667rem #0000001a
}

.bonus-card-down .card-down-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  border-radius: 1.0666666667rem
}

.bonus-card-down .card-down-inner .turn-hide {
  display: none
}

.bonus-card-down .card-down-inner-right {
  position: relative;
  min-width: 29.3333333333rem;
  margin-left: 2.6666666667rem
}

.bonus-card-down .card-down-inner-right .btn {
  min-width: 29.3333333333rem;
  min-height: 7.4666666667rem;
  margin: auto;
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem 1.0666666667rem #00000040;
  color: var(--color-walletcard-txt);
  font-size: 3.4666666667rem;
  line-height: 7.4666666667rem;
  text-align: center
}

.bonus-card-down .card-down-inner-right .btn--start {
  color: var(--color-walletcard-start-txt);
  background: var(--color-walletcard-start-btn)
}

.bonus-card-down .card-down-inner-right .btn--cancel {
  color: var(--color-walletcard-cancel-txt);
  background: var(--color-walletcard-cancel-btn)
}

.bonus-card-down .card-down-inner-right .btn--receive {
  color: var(--color-walletcard-receive-txt);
  background: var(--color-walletcard-receive-btn)
}

.bonus-card-down .card-down-inner-right .btn--disabled {
  color: var(--color-walletcard-disabled-txt);
  background: var(--color-walletcard-disabled-btn);
  border: 1px dotted var(--color-walletcard-disabled-border);
  box-shadow: 0 0 #00000040
}

.bonus-card-down .card-down-inner-right .btn--working {
  color: var(--color-walletcard-working-txt);
  background: var(--color-walletcard-working-btn);
  border: 1px dotted var(--color-walletcard-working-border);
  box-shadow: none
}

.bonus-card-down .card-down-inner-right .turn-open {
  display: block
}

.bonus-card-down .card-down-inner-right .withdraw-ani {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img {
  position: relative;
  z-index: 2;
  width: 15.7333333333rem;
  height: 11.4666666667rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img img {
  display: block;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%)
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .back {
  z-index: 3;
  filter: drop-shadow(.5333333333rem .5333333333rem .5333333333rem rgba(45, 45, 45, .1)) drop-shadow(1.0666666667rem 1.0666666667rem 1.0666666667rem rgba(49, 49, 49, .1)) drop-shadow(2.1333333333rem 2.1333333333rem 2.1333333333rem rgba(42, 42, 42, .1)) drop-shadow(4.2666666667rem 4.2666666667rem 4.2666666667rem rgba(32, 32, 32, .1))
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .front {
  z-index: 5;
  filter: drop-shadow(1.0666666667rem 1.0666666667rem 1.0666666667rem rgba(45, 45, 45, .1))
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet {
  display: block;
  position: absolute;
  z-index: 4
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li {
  display: block;
  position: absolute;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  background-repeat: no-repeat;
  background-size: contain
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-1 {
  top: -4rem;
  left: 8.8rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-2 {
  top: -5.3333333333rem;
  left: 5.3333333333rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-3 {
  top: -4rem;
  left: 1.0666666667rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-4 {
  top: -3.2rem;
  left: 4.8rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img {
  position: relative;
  z-index: 2;
  top: 0;
  left: 50%
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li {
  position: absolute;
  width: 8rem;
  height: 8rem;
  overflow: hidden
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li span {
  display: block;
  z-index: 2;
  width: 8rem;
  height: 8rem;
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 800% 100%
}

.bonus-card-down .card-down-inner-right.withdraw-active .btn-receive {
  transform: translateY(-50%);
  transition: all .5s ease-in-out;
  opacity: 0
}

.bonus-card-down .card-down-inner-right.withdraw-active .withdraw-ani {
  display: block;
  position: absolute
}

@keyframes walletCoin {
  0% {
    background-position: 0 0
  }

  to {
    background-position: 100% 0
  }
}

.bonus-card-down .card-down-inner .bonus-left {
  display: none;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  color: var(--bonuswallet-amount)
}

.bonus-card-down .card-down-inner .bonus-left .bonus-name {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: 3.2rem;
  padding: 1.3333333333rem 0
}

.bonus-card-down .card-down-inner .bonus-left .currency {
  padding: 0 .8rem 0 1.8666666667rem;
  font-size: 3.7333333333rem
}

.bonus-card-down .card-down-inner .bonus-left .bonus-number {
  font-size: 4.8rem;
  font-weight: 500
}

.bonus-card-down .card-down-inner .bonus-left .bonus-tips {
  transform: scale(.9);
  transform-origin: left;
  padding: .8rem 0;
  color: var(--bonuswallet-detail-txt);
  font-size: 3.2rem
}

.turn-gray {
  filter: grayscale(100%) brightness(140%)
}

.turn-gray2 {
  filter: grayscale(100%) brightness(120%)
}

.turn-hide {
  display: none !important
}

.turn-show {
  display: flex !important
}

.bgcolor-gray {
  background: var(--bonuswallet-card-bg-completed)
}

@keyframes fadeOutUp {
  0% {
    transform: translate3d(0, -10%, 0);
    opacity: .5
  }

  30% {
    transform: translate3d(0, -30%, 0);
    opacity: 1
  }

  to {
    transform: translate3d(0, -10%, 0);
    opacity: .5
  }
}

.pop-bonuswallet {
  display: none;
  position: fixed;
  z-index: 122;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none
}

.pop-bonuswallet .pop-wrap3 {
  pointer-events: auto
}

.pop-wrap3 {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: -100%;
  width: 100%;
  transform: translate(-50%);
  transition: bottom .3s;
  background: var(--pop-bg-content);
  color: var(--pop-bonuswallet-txt)
}

.pop-wrap3.active {
  bottom: 0;
  transition: bottom .3s
}

.pop-wrap3 {
  border-radius: 5.3333333333rem 5.3333333333rem 0 0;
  color: var(--color-title);
  line-height: 1.5
}

.pop-wrap3 .btn-closed {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 12rem;
  height: 12rem;
  background: var(--pop-close-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%
}

.pop-wrap3 .title-wrap {
  display: flex;
  position: relative
}

.pop-wrap3 .title-wrap .btn-back {
  display: block;
  position: relative;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  -webkit-text-decoration: block;
  text-decoration: block
}

.pop-wrap3 .title-wrap .btn-back.btn-back-show {
  display: block
}

.pop-wrap3 .title-wrap .btn-back div {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  overflow: hidden;
  transform: scale(1);
  transition: transform .4s 0s cubic-bezier(.2, 0, 0, 1.6);
  border-radius: 50%
}

.pop-wrap3 .title-wrap .btn-back div:after {
  content: "";
  position: absolute;
  top: 0;
  left: -2.1333333333rem;
  width: 10.6666666667rem;
  height: 10.6666666667rem;
  transition: transform .4s 0s cubic-bezier(.2, 0, 0, 1);
  background: var(--pop-bonuswallet-lvup-back-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 40%
}

.pop-wrap3 .title-wrap .btn-back:hover div {
  border: .5333333333rem solid #8d8d8d
}

.pop-wrap3 .title-wrap .btn-back:hover div:after {
  transform: translate(-50%)
}

.pop-wrap3 .title-wrap .title {
  margin-bottom: 4.2666666667rem;
  color: var(--pop-bonuswallet-title);
  font-size: 4.2666666667rem;
  line-height: 1.5
}

.pop-wrap3 .title-wrap .title .tips {
  color: color-mix(in srgb, var(--pop-bonuswallet-title), transparent 40%);
  font-size: 3.2rem
}

.pop-wrap3 .inner-wrap {
  display: flex;
  flex-direction: row;
  width: auto;
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .3s;
  -webkit-overflow-scrolling: touch
}

.pop-wrap3 .inner-wrap .inner-inner {
  display: flex;
  transition: all .2s
}

.pop-wrap3 .inner-wrap .inner-right {
  transform: translate(-50%)
}

.pop-wrap3 .inner-wrap .inner-right .inner-box:nth-child(2) {
  height: auto;
  padding: 4.2666666667rem
}

.pop-wrap3 .inner-wrap .inner-left {
  transform: translate(0)
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
  height: auto;
  padding: 4.2666666667rem
}

.pop-wrap3 .inner-wrap .inner-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100rem;
  height: 0;
  padding: 0;
  overflow: hidden
}

.pop-wrap3 .bottom-wrap .tips2 {
  margin-bottom: 4.2666666667rem;
  color: var(--pop-bonuswallet-tips);
  font-size: 3.2rem;
  text-align: center
}

.reel-box {
  display: block;
  margin-bottom: 4.2666666667rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.lvup-select-wrap {
  display: grid;
  grid-gap: 4.2666666667rem;
  grid-template-columns: repeat(2, 1fr)
}

.lvup-select-wrap .event {
  display: block;
  position: relative;
  width: 100%;
  height: 12rem;
  overflow: hidden;
  border-radius: 2.6666666667rem;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover
}

.lvup-select-wrap .event-click {
  border: .5333333333rem solid var(--pop-bonuswallet-lvup-check)
}

.lvup-select-wrap .event-click:before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5.3333333333rem;
  height: 4.2666666667rem;
  transition: all .3s;
  opacity: 1;
  background: var(--pop-bonuswallet-lvup-check);
  mask: url(/assets/images/player/select-check.svg) no-repeat top center/cover;
  -webkit-mask: url(/assets/images/player/select-check.svg) no-repeat top center/cover
}

@keyframes scale-in-ver-top {
  0% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 0
  }

  to {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1
  }
}

.lvup-event-detail {
  display: none;
  width: 100%;
  height: 0;
  max-height: 58.6666666667rem;
  margin-bottom: 4.2666666667rem;
  padding: 4.2666666667rem;
  overflow-y: scroll;
  border-radius: 2.6666666667rem;
  background: var(--pop-bonuswallet-lvup-tips-bg);
  -webkit-overflow-scrolling: touch
}

.lvup-event-detail.active {
  display: block;
  height: auto;
  min-height: 26.6666666667rem;
  animation: scale-in-ver-top .5s both
}

.lvup-event-detail .event-title {
  position: relative;
  margin: 0;
  overflow: hidden;
  color: var(--pop-bonuswallet-lvup-tips-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lvup-event-detail .event-detail {
  color: var(--pop-bonuswallet-lvup-tips-title);
  font-size: 3.2rem
}

.lvup-event-detail .event-date {
  margin-top: 1.3333333333rem;
  color: var(--pop-bonuswallet-lvup-tips-txt);
  font-size: 3.2rem;
  font-weight: 500
}

.lvup-event-detail .event-date:before {
  content: "";
  display: inline-block;
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  margin-right: 1.3333333333rem;
  background: var(--pop-bonuswallet-lvup-tips-date-icon-color);
  vertical-align: middle;
  mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/80%;
  -webkit-mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/80%
}

.bonus-event {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
  height: 29.3333333333rem;
  margin-bottom: 2.6666666667rem;
  padding: 2.6666666667rem 4.8rem;
  border-radius: 1.3333333333rem;
  background: var(--pop-bonuswallet-card-bg);
  box-shadow: 0 .8rem 1.3333333333rem #0000001f
}

.bonus-event:last-child {
  margin-bottom: 0
}

.bonus-event-left {
  width: 70%
}

.bonus-event-left .title {
  position: relative;
  margin-top: 2.6666666667rem;
  overflow: hidden;
  color: var(--pop-bonuswallet-card-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap
}

.bonus-event-left .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin: 0 2.6666666667rem 0 0;
  border-radius: 1.0666666667rem;
  background: var(--pop-bonuswallet-card-border);
  vertical-align: sub
}

.bonus-event-left .card-detail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start
}

.bonus-event-left .card-detail .card-date {
  margin: auto 0;
  color: var(--pop-bonuswallet-card-date);
  font-size: 2.6666666667rem
}

.bonus-event-left .card-detail .detail-btn {
  display: flex;
  margin-left: 1.0666666667rem;
  padding: 0 1.0666666667rem;
  border: .2666666667rem solid var(--pop-bonuswallet-card-detail);
  border-radius: 1.3333333333rem;
  font-weight: 500
}

.bonus-event-left .card-detail .detail-btn a {
  color: var(--pop-bonuswallet-card-detail);
  font-size: 2.6666666667rem;
  text-decoration: none
}

.bonus-event-left .discount {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  color: var(--pop-bonuswallet-card-amount)
}

.bonus-event-left .discount .currency {
  margin: 2.1333333333rem 1.3333333333rem 0 0;
  font-size: 3.7333333333rem
}

.bonus-event-left .discount .amount {
  padding-bottom: 2.6666666667rem;
  font-size: 5.8666666667rem;
  font-weight: 500
}

.bonus-event-right {
  width: 30%
}

.bonus-event-right .btn {
  min-width: 18.6666666667rem;
  min-height: 7.4666666667rem;
  margin: auto;
  border-radius: 1.3333333333rem;
  background: var(--pop-bonuswallet-card-start-btn);
  box-shadow: 0 .5333333333rem 1.0666666667rem #00000040;
  color: var(--pop-bonuswallet-card-start-txt);
  font-size: 3.4666666667rem;
  line-height: 7.4666666667rem;
  text-align: center
}

.bonus-event .notch-l {
  position: absolute;
  left: 0;
  width: 2.1333333333rem;
  height: 4rem;
  border-radius: 0 50% 50% 0;
  background: var(--pop-bg-content)
}

.bonus-event .notch-r {
  position: absolute;
  right: 0;
  width: 2.1333333333rem;
  height: 4rem;
  border-radius: 50% 0 0 50%;
  background: var(--pop-bg-content)
}

.player-vip-detailed-menu {
  padding: 4.2666666667rem 4.2666666667rem 0
}

.player-vip-detailed-menu .btn {
  display: flex;
  position: relative;
  flex-flow: column-reverse nowrap;
  align-items: center;
  width: calc(23.8095238095% - 2.6666666667rem);
  height: 32rem;
  margin: 2.6666666667rem 2.6666666667rem 0 0;
  padding: 0 1.3333333333rem 2.6666666667rem;
  transform: translateY(-1.0666666667rem);
  transition: .3s;
  border-radius: 2.6666666667rem 50% 2.6666666667rem 2.6666666667rem;
  background: linear-gradient(180deg, var(--vip-detail-lv1-bg) 0%, var(--vip-detail-lv-bottom-bg) 100%);
  box-shadow: 0 .5333333333rem .8rem #0003
}

.player-vip-detailed-menu .btn.active {
  transform: translateY(-2.1333333333rem) scale(1);
  box-shadow: 0 1.0666666667rem 1.0666666667rem #0003
}

.player-vip-detailed-menu .btn .vip-ball {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto
}

.player-vip-detailed-menu .vip-lv2 {
  background: linear-gradient(180deg, var(--vip-detail-lv2-bg) 0%, var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu .vip-lv3 {
  background: linear-gradient(180deg, var(--vip-detail-lv3-bg) 0%, var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu .vip-lv4 {
  background: linear-gradient(180deg, var(--vip-detail-lv4-bg) 0%, var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu .vip-lv5 {
  background: linear-gradient(180deg, var(--vip-detail-lv5-bg) 0%, var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu p {
  position: relative;
  color: var(--vip-detail-lv-txt);
  font-size: 3.4666666667rem;
  font-weight: 500
}

.player-vip-detailed-menu .vip-level-icon {
  top: 0;
  right: -2.6666666667rem;
  width: 11.2rem;
  height: 11.2rem;
  transition: .3s
}

.player-vip-detailed-menu .slick-dots {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 2.6666666667rem
}

.player-vip-detailed-menu .slick-dots li {
  display: inline-block;
  position: relative;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  margin: 0 2.1333333333rem;
  overflow: hidden;
  text-indent: -2666.4rem
}

.player-vip-detailed-menu .slick-dots li button {
  display: block;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  padding: 1.0666666667rem;
  border: 0;
  background: transparent;
  color: transparent
}

.player-vip-detailed-menu .slick-dots li button:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  border-radius: 50%;
  background: var(--event-slick-dot)
}

.player-vip-detailed-menu .slick-dots li.slick-active button:before {
  background: var(--event-slick-dot-active)
}

.player-vip-detailed-box {
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .3s
}

.player-vip-detailed-box .inner-wrap {
  display: flex;
  transition: all .2s
}

.player-vip-detailed-box .inner-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 8.5333333333rem);
  height: auto;
  margin: 4.2666666667rem;
  overflow: hidden;
  border-radius: 2.6666666667rem;
  background: var(--vip-detail-box-bg);
  box-shadow: 0 0 1.6rem var(--vip-detail-box-bg-shadow)
}

.player-vip-detailed-box .title {
  margin: 4.2666666667rem 4.2666666667rem 0
}

.player-vip-detailed-box .title h2 {
  color: var(--color-title);
  font-size: 4rem;
  font-weight: 500
}

.player-vip-detailed-box .title h2:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: 2.1333333333rem;
  background: var(--secondary);
  vertical-align: middle
}

.player-vip-detailed-box .title span {
  display: inline-block;
  vertical-align: middle
}

.head-lv-name {
  height: 8.5333333333rem;
  padding-left: 4.2666666667rem;
  border-radius: 2.6666666667rem 2.6666666667rem 0 0;
  background: linear-gradient(90deg, #bcb8a8, #80795a);
  color: #fff;
  font-weight: 500;
  line-height: 8.5333333333rem
}

.vip-lv1 .head-lv-name {
  background: var(--vip-detail-title-bg-lv1)
}

.vip-lv2 .head-lv-name {
  background: var(--vip-detail-title-bg-lv2)
}

.vip-lv3 .head-lv-name {
  background: var(--vip-detail-title-bg-lv3)
}

.vip-lv4 .head-lv-name {
  background: var(--vip-detail-title-bg-lv4)
}

.vip-lv5 .head-lv-name {
  background: var(--vip-detail-title-bg-lv5)
}

.lv-info-wrap {
  padding: 4.2666666667rem;
  border-bottom: .2666666667rem solid var(--vip-detail-border)
}

.lv-info-wrap .status-box.status-box2 {
  flex-wrap: wrap
}

.lv-info-wrap .status-box .number {
  font-size: 3.7333333333rem
}

.lv-info-wrap .status-box .number.number2 {
  color: var(--vip-detail-highlight-txt);
  font-size: 4.2666666667rem
}

.lv-info-wrap .status {
  width: 33%
}

.lv-info-wrap .status.accept2 {
  position: relative;
  width: 48%;
  height: 17.3333333333rem;
  margin: 0 2.6666666667rem 2.6666666667rem 0;
  padding: 2.6666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--vip-detail-card-bg);
  box-shadow: 0 .8rem 1.3333333333rem var(--vip-detail-card-bg-shadow), inset .2666666667rem .2666666667rem color-mix(in srgb, var(--inset-shadow), transparent 80%)
}

.lv-info-wrap .status.accept2:nth-child(2n) {
  margin: 0 0 2.6666666667rem
}

.lv-info-wrap .status.accept2 .text {
  color: var(--vip-detail-card-txt)
}

.terms {
  padding: 4.2666666667rem
}

.terms .terms-link {
  margin-bottom: 2.6666666667rem;
  color: var(--vip-detail-link)
}

.terms p {
  color: var(--vip-detail-link);
  font-size: 3.2rem;
  line-height: 5.3333333333rem
}

.vip-list {
  margin-top: 2.1333333333rem
}

.vip-list .list-title .list-field {
  line-height: 1.5
}

.vip-list .list-content .list-field {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.vip-list .vip-source,
.vip-list .vip-use {
  flex: 0 0 35%
}

.vip-list .vip-time {
  flex: 0 0 33%;
  text-align: center
}

.vip-list .vip-no {
  flex: 1 0 12%
}

.vip-list .vip-point {
  flex: 0 0 20%
}

.biometric-info {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0 4rem;
  text-align: center
}

.biometric-info .biometric-animation {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 58.6666666667rem;
  height: 58.6666666667rem;
  margin: 21.3333333333rem auto
}

.biometric-info .biometric-animation .graduations .graduation {
  top: 2.4074074074rem;
  transform-origin: 0 26.962962963rem;
  display: block;
  position: absolute;
  left: 50%;
  width: .8rem;
  height: 2.6666666667rem;
  transform: rotate(0) trargb(7, 8, 7) -50%;
  border-radius: 2.6666666667rem;
  background: var(--biometric-wave-line-cirle)
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(1) {
  transform: rotate(1deg) translate(-50%);
  animation: line-wave 6s .1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(2) {
  transform: rotate(7deg) translate(-50%);
  animation: line-wave 6s .2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(3) {
  transform: rotate(13deg) translate(-50%);
  animation: line-wave 6s .3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(4) {
  transform: rotate(19deg) translate(-50%);
  animation: line-wave 6s .4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(5) {
  transform: rotate(25deg) translate(-50%);
  animation: line-wave 6s .5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(6) {
  transform: rotate(31deg) translate(-50%);
  animation: line-wave 6s .6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(7) {
  transform: rotate(37deg) translate(-50%);
  animation: line-wave 6s .7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(8) {
  transform: rotate(43deg) translate(-50%);
  animation: line-wave 6s .8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(9) {
  transform: rotate(49deg) translate(-50%);
  animation: line-wave 6s .9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(10) {
  transform: rotate(55deg) translate(-50%);
  animation: line-wave 6s 1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(11) {
  transform: rotate(61deg) translate(-50%);
  animation: line-wave 6s 1.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(12) {
  transform: rotate(67deg) translate(-50%);
  animation: line-wave 6s 1.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(13) {
  transform: rotate(73deg) translate(-50%);
  animation: line-wave 6s 1.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(14) {
  transform: rotate(79deg) translate(-50%);
  animation: line-wave 6s 1.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(15) {
  transform: rotate(85deg) translate(-50%);
  animation: line-wave 6s 1.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(16) {
  transform: rotate(91deg) translate(-50%);
  animation: line-wave 6s 1.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(17) {
  transform: rotate(97deg) translate(-50%);
  animation: line-wave 6s 1.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(18) {
  transform: rotate(103deg) translate(-50%);
  animation: line-wave 6s 1.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(19) {
  transform: rotate(109deg) translate(-50%);
  animation: line-wave 6s 1.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(20) {
  transform: rotate(115deg) translate(-50%);
  animation: line-wave 6s 2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(21) {
  transform: rotate(121deg) translate(-50%);
  animation: line-wave 6s 2.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(22) {
  transform: rotate(127deg) translate(-50%);
  animation: line-wave 6s 2.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(23) {
  transform: rotate(133deg) translate(-50%);
  animation: line-wave 6s 2.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(24) {
  transform: rotate(139deg) translate(-50%);
  animation: line-wave 6s 2.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(25) {
  transform: rotate(145deg) translate(-50%);
  animation: line-wave 6s 2.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(26) {
  transform: rotate(151deg) translate(-50%);
  animation: line-wave 6s 2.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(27) {
  transform: rotate(157deg) translate(-50%);
  animation: line-wave 6s 2.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(28) {
  transform: rotate(163deg) translate(-50%);
  animation: line-wave 6s 2.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(29) {
  transform: rotate(169deg) translate(-50%);
  animation: line-wave 6s 2.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(30) {
  transform: rotate(175deg) translate(-50%);
  animation: line-wave 6s 3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(31) {
  transform: rotate(181deg) translate(-50%);
  animation: line-wave 6s 3.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(32) {
  transform: rotate(187deg) translate(-50%);
  animation: line-wave 6s 3.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(33) {
  transform: rotate(193deg) translate(-50%);
  animation: line-wave 6s 3.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(34) {
  transform: rotate(199deg) translate(-50%);
  animation: line-wave 6s 3.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(35) {
  transform: rotate(205deg) translate(-50%);
  animation: line-wave 6s 3.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(36) {
  transform: rotate(211deg) translate(-50%);
  animation: line-wave 6s 3.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(37) {
  transform: rotate(217deg) translate(-50%);
  animation: line-wave 6s 3.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(38) {
  transform: rotate(223deg) translate(-50%);
  animation: line-wave 6s 3.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(39) {
  transform: rotate(229deg) translate(-50%);
  animation: line-wave 6s 3.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(40) {
  transform: rotate(235deg) translate(-50%);
  animation: line-wave 6s 4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(41) {
  transform: rotate(241deg) translate(-50%);
  animation: line-wave 6s 4.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(42) {
  transform: rotate(247deg) translate(-50%);
  animation: line-wave 6s 4.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(43) {
  transform: rotate(253deg) translate(-50%);
  animation: line-wave 6s 4.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(44) {
  transform: rotate(259deg) translate(-50%);
  animation: line-wave 6s 4.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(45) {
  transform: rotate(265deg) translate(-50%);
  animation: line-wave 6s 4.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(46) {
  transform: rotate(271deg) translate(-50%);
  animation: line-wave 6s 4.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(47) {
  transform: rotate(277deg) translate(-50%);
  animation: line-wave 6s 4.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(48) {
  transform: rotate(283deg) translate(-50%);
  animation: line-wave 6s 4.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(49) {
  transform: rotate(289deg) translate(-50%);
  animation: line-wave 6s 4.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(50) {
  transform: rotate(295deg) translate(-50%);
  animation: line-wave 6s 5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(51) {
  transform: rotate(301deg) translate(-50%);
  animation: line-wave 6s 5.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(52) {
  transform: rotate(307deg) translate(-50%);
  animation: line-wave 6s 5.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(53) {
  transform: rotate(313deg) translate(-50%);
  animation: line-wave 6s 5.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(54) {
  transform: rotate(319deg) translate(-50%);
  animation: line-wave 6s 5.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(55) {
  transform: rotate(325deg) translate(-50%);
  animation: line-wave 6s 5.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(56) {
  transform: rotate(331deg) translate(-50%);
  animation: line-wave 6s 5.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(57) {
  transform: rotate(337deg) translate(-50%);
  animation: line-wave 6s 5.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(58) {
  transform: rotate(343deg) translate(-50%);
  animation: line-wave 6s 5.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(59) {
  transform: rotate(349deg) translate(-50%);
  animation: line-wave 6s 5.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(60) {
  transform: rotate(355deg) translate(-50%);
  animation: line-wave 6s 6s infinite ease-in-out
}

.biometric-info .biometric-animation video,
.biometric-info .biometric-animation img {
  width: 32rem;
  height: 32rem
}

.biometric-info h3 {
  margin-bottom: 1.3333333333rem;
  color: var(--biometric-txt);
  font-size: 4rem;
  font-weight: 700
}

.biometric-info p {
  width: inherit;
  margin-bottom: 5.3333333333rem;
  color: color-mix(in srgb, var(--biometric-txt), transparent 50%);
  font-size: 3.4666666667rem;
  line-height: 1.6
}

.biometric-switch {
  position: relative;
  width: 18.9333333333rem;
  height: 10.6666666667rem;
  margin: 0 auto;
  padding: 0 2.6666666667rem;
  transition: all .3s;
  border-radius: 10.6666666667rem;
  background: color-mix(in srgb, var(--biometric-switch-bg), transparent 50%);
  color: var(--sidenav-category-txt);
  font-size: 3.4666666667rem;
  line-height: 10.6666666667rem
}

.biometric-switch span {
  position: absolute;
  top: 1.3333333333rem;
  left: 1.3333333333rem;
  width: 8rem;
  height: 8rem;
  transition: all .3s;
  border-radius: 50%;
  background-repeat: no-repeat
}

.biometric-switch.active {
  background-color: var(--biometric-switch-bg);
  text-indent: 8rem
}

.biometric-switch.active span {
  top: 1.3333333333rem;
  left: 9.6rem
}

.pop-biometric-success {
  display: none
}

.face-id-wrapper {
  position: relative;
  width: 32rem;
  height: 32rem;
  margin: 0 auto 2.1333333333rem
}

.face-id-wrapper video {
  width: 100%
}

@keyframes line-wave {
  0% {
    box-shadow: 0 -.2666666667rem 0 var(--biometric-wave-line-ani)
  }

  1% {
    box-shadow: 0 -.5333333333rem 0 var(--biometric-wave-line-ani)
  }

  2% {
    box-shadow: 0 -.8rem 0 var(--biometric-wave-line-ani)
  }

  3% {
    box-shadow: 0 -1.0666666667rem 0 var(--biometric-wave-line-ani)
  }

  4% {
    box-shadow: 0 -1.3333333333rem 0 var(--biometric-wave-line-ani)
  }

  5% {
    box-shadow: 0 -1.6rem 0 var(--biometric-wave-line-ani)
  }

  6% {
    box-shadow: 0 -1.8666666667rem 0 var(--biometric-wave-line-ani)
  }

  7% {
    box-shadow: 0 -2.1333333333rem 0 var(--biometric-wave-line-ani)
  }

  24% {
    box-shadow: 0 0 0 var(--biometric-wave-line-ani)
  }

  25% {
    background-color: var(--biometric-wave-line-gradient-start);
    box-shadow: 0 0 0 var(--content-bg)
  }

  to {
    background-color: var(--biometric-wave-line-gradient-end);
    box-shadow: 0 0 0 var(--content-bg)
  }
}

#holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: .2
}

.vip-content {
  background: var(--vip-bg);
  font-family: var(--custom-font), var(--custom-serif);
  min-height: 100% !important;
  height: auto;
  overflow: hidden;
  padding-top: 13.3333333333rem
}

.vip-content .button {
  width: auto;
  height: 14.9333333333rem;
  margin: 4rem;
  border-radius: 5.3333333333rem;
  font-size: 4.2666666667rem;
  line-height: 14.9333333333rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.vip-content .button.allow {
  overflow: hidden;
  background: var(--vip-cash-point-allow-btn-bg);
  box-shadow: 0 0 2.6666666667rem .5333333333rem var(--vip-cash-point-allow-btn-bg-box-shadow), inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
  text-shadow: 0 2px 1.0666666667rem var(--vip-cash-point-allow-btn-bg-txt-shadow)
}

.vip-content .button.allow:after {
  content: "";
  position: absolute;
  top: 0;
  width: 30%;
  height: 14.9333333333rem;
  transform: skew(-40deg);
  animation: shiny 3s ease 2s infinite;
  background: linear-gradient(to right, #fff0 0, #ffffff4d, #fff0)
}

.vip-content .button.default {
  background: var(--vip-cash-point-default-btn-bg);
  box-shadow: inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
  color: var(--vip-cash-point-default-btn-txt);
  text-shadow: 0 .5333333333rem 1.0666666667rem var(--vip-cash-point-default-btn-txt-shadow)
}

.vip-content .button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

.vip-content .convert-content {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: -1
}

.vip-content .convert-content.convert-content-index {
  z-index: 1
}

.vip-content .convert-content .convert-ani {
  position: relative;
  justify-content: center;
  align-items: center
}

.vip-content .convert-content .convert-ani .coin-block {
  width: 90%;
  height: 0%;
  margin: auto;
  border-radius: 5.3333333333rem;
  background: var(--vip-cash-point-bg);
  box-shadow: inset 0 0 5px -3px var(--vip-card-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px)
}

.vip-content .convert-content .convert-ani .text {
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--vip-ani-title);
  font-size: 4.2666666667rem
}

.player-vip-box {
  position: relative;
  margin: 2.1333333333rem 4.2666666667rem;
  border-radius: 5.3333333333rem;
  box-shadow: none
}

.player-vip-box.total {
  padding: 2.6666666667rem
}

.player-vip-box .title {
  position: relative;
  color: var(--vip-total-ttile);
  font-size: 3.2rem
}

.player-vip-box .title h2 {
  color: var(--vip-convert-title);
  font-size: 4.2666666667rem;
  font-weight: 500
}

.player-vip-box .title h2:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  border-radius: .5333333333rem;
  background: var(--vip-convert-border);
  vertical-align: middle
}

.player-vip-box .refresh {
  display: inline-flex;
  position: absolute;
  right: 0;
  bottom: .2666666667rem;
  align-items: center
}

.player-vip-box .refresh .text {
  color: var(--vip-refresh-txt)
}

.player-vip-box .refresh-icon {
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  margin-left: 1.6rem;
  background: var(--vip-refresh-icon-color);
  mask-repeat: no-repeat;
  mask-position: top center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: cover
}

.player-vip-box .status-box {
  display: inline-block;
  width: 100%
}

.player-vip-box .status {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 86%;
  padding: 0;
  background: transparent
}

.player-vip-box .status .number {
  margin-right: 2.6666666667rem;
  margin-bottom: 0;
  color: var(--vip-total-num);
  font-size: 9.3333333333rem;
  font-weight: 500
}

.player-vip-box .status:after {
  content: none
}

.player-vip-box .status .text {
  width: auto;
  height: 5.3333333333rem;
  margin-top: 3.2rem;
  padding: 0 2.6666666667rem;
  border-radius: 13.3333333333rem;
  background: var(--vip-total-txt-bg);
  color: var(--vip-total-txt);
  font-size: 2.9333333333rem;
  line-height: 5.3333333333rem
}

.cleader {
  position: absolute;
  right: 2.6666666667rem;
  bottom: 2.6666666667rem;
  display: flex;
  width: auto;
  height: auto;
  padding: 2.6666666667rem 3.2rem;
  border-radius: 5.3333333333rem;
  background: var(--vip-total-record-btn-bg);
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-transform: capitalize
}

.cleader .item-icon {
  display: inline-flex;
  width: 2.9333333333rem;
  height: 3.7333333333rem;
  background: var(--vip-total-record-icon-color, #ffffff);
  margin-left: .5333333333rem;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.cleader p {
  display: inline-flex;
  margin-left: 1.3333333333rem;
  font-size: 3.2rem;
  color: var(--vip-total-record-btn-txt, var(--vip-total-record-icon-color));
  margin: 0 0 0 1.3333333333rem;
  line-height: 5.3333333333rem
}

.cleader a {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16rem;
  height: 10.6666666667rem
}

.card-top {
  height: auto;
  padding: 6.4rem 6.4rem 10.6666666667rem;
  border-radius: 5.3333333333rem;
  background: var(--vip-card-bg);
  box-shadow: inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw)
}

.card-top .bar {
  position: relative;
  width: 100%;
  height: 1.3333333333rem;
  margin-bottom: 0;
  border-radius: 1.3333333333rem;
  background: var(--vip-card-progress-bar-bg);
  box-shadow: inset 0 0 .2666666667rem 0 var(--vip-card-shadow)
}

.card-top .bar-inner {
  animation: progress-animation 5s linear infinite;
  background: var(--vip-card-progress-bar-bg-active);
  background-size: 300% 100%;
  box-shadow: 0 .2666666667rem .8rem .2666666667rem color-mix(in srgb, var(--vip-card-progress-bar-bg-active-shadow), transparent 60%), 0 0 .8rem color-mix(in srgb, var(--vip-card-progress-bar-bg-active-shadow), transparent 60%)
}

.card-top .bar-inner:after {
  right: -.5333333333rem;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--vip-card-bar-dot);
  box-shadow: 0 0 2.6666666667rem .2666666667rem var(--vip-card-shadow)
}

.card-top p {
  margin: 3.2rem 0;
  transform-origin: left;
  color: var(--vip-card-tips);
  font-size: 3.4666666667rem;
  line-height: 5.3333333333rem;
  text-decoration: none
}

.card-top p i {
  font-weight: 500;
  color: var(--vip-points-card-top-info-txt-strong, #ffd259)
}

.vip-lv-area {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  align-items: center;
  margin-bottom: 5.3333333333rem
}

.vip-lv-area:nth-child(2) {
  margin-bottom: 0
}

.vip-lv-area .progress-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end
}

.vip-lv-area .progress-bar .txt {
  display: flex;
  justify-content: flex-end
}

.vip-lv-area .progress-bar .txt p {
  margin: 0;
  width: -moz-fit-content;
  width: fit-content;
  transform-origin: right
}

.vip-lv-area .progress-bar .txt span {
  color: var(--vip-points-progress-bar-txt, #ffd259);
  font-weight: 500
}

.lv-totem {
  width: 12rem;
  height: 12rem;
  margin-right: 4rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.lv-text {
  color: var(--vip-card-title)
}

.lv-text .text {
  margin-bottom: 1.3333333333rem;
  font-size: 2.6666666667rem;
  font-weight: 700
}

.lv-text h2 {
  font-size: 4.8rem;
  font-weight: 700;
  text-transform: uppercase
}

.lv-history {
  position: absolute;
  right: 0;
  display: flex;
  width: auto;
  height: auto;
  border-radius: 5.3333333333rem;
  padding: 2.6666666667rem 3.2rem;
  background: var(--vip-card-history-btn-bg);
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-transform: capitalize
}

.lv-history .item-icon {
  display: inline-flex;
  width: 3.7333333333rem;
  height: 2.9333333333rem;
  background: var(--vip-card-history-icon-color, #ffffff);
  margin-left: .5333333333rem;
  mask-size: 100%;
  -webkit-mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center
}

.lv-history p {
  display: inline-flex;
  margin-left: 1.3333333333rem;
  font-size: 3.2rem;
  color: var(--vip-card-history-btn-txt, var(--vip-card-history-icon-color));
  margin: 0 0 0 1.3333333333rem;
  line-height: 5.3333333333rem
}

.next-lv-totem {
  width: 7.4666666667rem;
  height: 7.4666666667rem;
  margin-left: 4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.card-bottom {
  display: flex;
  position: absolute;
  z-index: 1;
  bottom: 0;
  flex-flow: row-reverse nowrap;
  align-items: center;
  width: 100%;
  height: 10.6666666667rem;
  padding: 0 4rem;
  border-radius: 0 0 5.3333333333rem 5.3333333333rem;
  background: var(--vip-card-bottom-bg)
}

.card-bottom a {
  color: var(--vip-card-bottom-more-txt);
  font-size: 3.2rem;
  text-decoration: none
}

.card-bottom a span {
  display: inline-block;
  width: 3.2rem;
  height: 2.6666666667rem;
  margin-left: 2.6666666667rem;
  background: var(--vip-card-bottom-more-txt);
  vertical-align: middle;
  mask-repeat: no-repeat;
  mask-position: top center;
  mask-size: 90%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: 90%
}

.cash-card {
  padding: 0
}

.cash-card .title {
  margin: 0 0 4rem;
  padding-left: 2.6666666667rem
}

.cash-points {
  display: inline-flex;
  width: 100%;
  padding: 2.6666666667rem;
  border-radius: 5.3333333333rem;
  background: var(--vip-cash-point-bg);
  box-shadow: inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw)
}

.cash-points .coin {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  position: relative;
  width: 25%;
  height: auto
}

.movie-box {
  width: 100%;
  height: auto;
  padding: 0
}

.cash-detail {
  width: 75%;
  padding: 1.3333333333rem 2.6666666667rem
}

.cash-detail .detail-title {
  position: relative;
  margin: 2.6666666667rem 0;
  color: var(--vip-cash-point-requirement-txt);
  font-size: 3.4666666667rem
}

.cash-detail .detail-title .text {
  float: right
}

.cash-detail .detail-title .text span {
  margin-left: 1.3333333333rem
}

.cash-detail .detail-title span {
  color: var(--vip-cash-point-title)
}

.cash-detail .cash-input input[type=number] {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
  padding: 2.6666666667rem;
  border: 0;
  border-radius: 1.3333333333rem;
  outline: none;
  background: var(--vip-cash-point-input-bg);
  color: var(--vip-cash-point-input-txt);
  font-size: 5.3333333333rem;
  font-weight: 500;
  text-align: left;
  box-shadow: 0 0 .8rem #0003 inset
}

.cash-detail .cash-input input[type=number]::placeholder {
  color: var(--vip-cash-point-input-placeholder)
}

.cash-detail .cash-input.error input[type=number] {
  animation: shake-horizontal .5s cubic-bezier(.455, .3, .515, .955) both;
  color: var(--vip-cash-point-input-error);
  border: 1px solid var(--vip-cash-point-input-error)
}

.cash-detail .conversion {
  position: relative;
  height: 8.5333333333rem;
  margin-top: 5.3333333333rem;
  color: var(--vip-cash-point-tips);
  font-size: 3.2rem
}

.cash-detail .conversion .ratio {
  display: inline-flex;
  height: 8.5333333333rem;
  font-weight: 500
}

.cash-detail .conversion .ratio .text {
  margin-left: 2.6666666667rem;
  color: var(--vip-cash-point-input-txt)
}

.cash-detail .conversion .ratio.hide {
  display: none
}

.cash-detail .conversion .error-tip {
  display: -webkit-inline-box;
  flex-flow: row nowrap;
  align-content: flex-start;
  justify-content: space-between;
  height: 8.5333333333rem
}

.cash-detail .conversion .error-tip:before {
  content: "!";
  display: inline-block;
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  border-radius: 5.3333333333rem;
  background-color: var(--vip-cash-point-input-error);
  color: var(--vip-cash-point-input-error-icon);
  line-height: 3.7333333333rem;
  text-align: center
}

.cash-detail .conversion .error-tip .text {
  margin-left: 2.1333333333rem;
  color: var(--vip-cash-point-input-error)
}

.cash-detail .conversion .error-tip.hide {
  display: none
}

.convert-icon {
  display: flex;
  position: absolute;
  top: 25.3333333333rem;
  justify-content: center;
  width: 100%
}

.convert-icon .chevron {
  position: absolute;
  width: 5.3333333333rem;
  height: .8rem;
  transform: scale(.3);
  opacity: 0
}

.convert-icon .chevron:first-child {
  animation: move-chevron 2.8s ease-out infinite
}

.convert-icon .chevron:first-child:before,
.convert-icon .chevron:first-child:after {
  background: var(--vip-cash-point-def)
}

.convert-icon .chevron:nth-child(2) {
  animation: move-chevron 2.8s ease-out 1s infinite
}

.convert-icon .chevron:nth-child(2):before,
.convert-icon .chevron:nth-child(2):after {
  background: var(--vip-cash-point-grey)
}

.convert-icon .chevron:before,
.convert-icon .chevron:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%
}

.convert-icon .chevron:before {
  left: 0;
  transform: skewY(30deg)
}

.convert-icon .chevron:after {
  right: 0;
  width: 50%;
  transform: skewY(-30deg)
}

@keyframes progress-animation {
  0% {
    background-position: 100%
  }

  50% {
    background-position: 0
  }

  to {
    background-position: 100%
  }
}

@keyframes shake-horizontal {

  0%,
  to {
    transform: translate(0)
  }

  10%,
  30%,
  50%,
  70% {
    transform: translate(-2px)
  }

  20%,
  40%,
  60% {
    transform: translate(2px)
  }

  80% {
    transform: translate(1px)
  }

  90% {
    transform: translate(-1px)
  }
}

@keyframes shiny {
  0% {
    left: -100%
  }

  to {
    left: 150%
  }
}

@keyframes move-chevron {
  25% {
    opacity: 1
  }

  33.3% {
    transform: translateY(1.6rem);
    opacity: 1
  }

  66.6% {
    transform: translateY(3.2rem);
    opacity: 1
  }

  to {
    transform: translateY(4.8rem) scale(.5);
    opacity: 0
  }
}

.acquired-content {
  padding: 0 4rem
}

.vip-year {
  margin: 2.6666666667rem 0;
  color: var(--vip-history-year);
  font-size: 4.8rem;
  font-weight: 700
}

.form-vip-history {
  position: relative;
  margin: 0 0 4.2666666667rem 16rem;
  padding: 5.3333333333rem;
  border-radius: 5.3333333333rem;
  background: var(--vip-cash-point-bg);
  box-shadow: inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
  color: var(--vip-card-title);
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw)
}

.form-vip-history:before {
  content: "";
  display: block;
  position: absolute;
  top: 10.1333333333rem;
  left: -4.2666666667rem;
  width: .5333333333rem;
  height: 29.3333333333rem;
  background: var(--vip-history-month)
}

.form-vip-history:after {
  content: "";
  display: block;
  position: absolute;
  top: 5.0666666667rem;
  left: -5.3333333333rem;
  width: 2.1333333333rem;
  height: 2.1333333333rem;
  border-radius: 50%;
  border: 2px solid var(--vip-history-month)
}

.form-vip-history:last-child:before {
  height: 21.3333333333rem
}

.form-vip-history:lang(vn):after,
.form-vip-history:lang(bn):after,
.form-vip-history:lang(tl):after {
  display: none
}

.form-vip-history:lang(vn):before,
.form-vip-history:lang(bn):before,
.form-vip-history:lang(tl):before {
  top: 11.2rem;
  height: 26.6666666667rem
}

.form-vip-history .vip-month {
  position: absolute;
  top: 4.2666666667rem;
  left: -16rem;
  color: var(--vip-history-year);
  font-weight: 500
}

.form-vip-history .vip-month:lang(tl) {
  width: 16rem;
  text-align: right;
  font-size: 3.2rem;
  left: 0;
  top: 5.3333333333rem;
  transform: translate(-110%)
}

.form-vip-history .vip-level {
  margin-bottom: 2.6666666667rem;
  font-weight: 700
}

.form-vip-history .vip-level .text {
  margin-bottom: .5333333333rem;
  font-size: 2.6666666667rem
}

.form-vip-history .vip-level .level {
  font-size: 4.8rem;
  line-height: 5.3333333333rem;
  text-transform: uppercase
}

.form-vip-history .vip-acquired {
  font-weight: 500
}

.form-vip-history .vip-acquired .text {
  margin-bottom: 1.3333333333rem;
  font-size: 3.2rem
}

.form-vip-history .vip-acquired .acquired {
  color: var(--vip-card-title);
  font-size: 3.7333333333rem
}

.vip-level-icon {
  position: absolute;
  z-index: 1;
  top: 5.3333333333rem;
  right: 5.3333333333rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.is-vip-points-login {
  height: 100% !important
}

.playerform-content .button {
  height: 12rem;
  margin: 4.2666666667rem;
  line-height: 12rem
}

.playerform-content .verify-tips {
  margin-bottom: 4rem
}

.drop-down-menu {
  margin-bottom: 2.6666666667rem;
  overflow: hidden;
  border: .2666666667rem solid var(--accordion-add-bank-card-title-bg);
  border-radius: 2.6666666667rem;
  background: var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu:last-child {
  margin-bottom: 0
}

.drop-down-menu.under-review {
  border: .2666666667rem solid var(--accordion-review);
  background: var(--accordion-review)
}

.drop-down-menu.success {
  border: .2666666667rem solid var(--accordion-success);
  background: var(--accordion-success)
}

.drop-down-menu.failed {
  border: .2666666667rem solid var(--accordion-failed);
  background: var(--accordion-failed)
}

.drop-down-menu.bankcard {
  border: .2666666667rem solid var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu.bankcard .drop-down-menu-btn.add-bank-card {
  background-color: var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu-content {
  max-height: 0;
  overflow: hidden;
  transition: all 1s ease-in-out
}

.drop-down-menu-content .menu-box {
  margin: 0;
  border-radius: 0;
  box-shadow: none
}

.drop-down-menu-content.show {
  height: auto;
  max-height: 2000px
}

.drop-down-menu.verify-menu {
  margin-top: 2.1333333333rem
}

.drop-down-menu .phone-area-code {
  flex: 0 0 34%
}

.drop-down-menu .phone-code-list {
  top: 68rem;
  left: 8.8rem;
  width: 25.0666666667rem;
  max-height: 24rem
}

.drop-down-menu-btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  height: 11.7333333333rem;
  padding: 0 8rem 0 2.6666666667rem;
  border-radius: 2.1333333333rem 2.1333333333rem 0 0;
  color: var(--accordion-color-bg-title)
}

.drop-down-menu-btn:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 4rem;
  transform: translateY(-25%);
  border-width: 1.0666666667rem;
  border-style: solid;
  border-color: var(--accordion-triangle) transparent transparent
}

.drop-down-menu-btn.drop-downn-menu-btn-verify {
  justify-content: center
}

.drop-down-menu-btn.drop-downn-menu-btn-verify:after {
  display: none
}

.drop-down-menu-btn .icon {
  display: flex;
  flex: none;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 4rem 0 1.3333333333rem
}

.drop-down-menu-btn .icon img {
  display: block;
  width: 100%;
  margin: auto
}

.drop-down-menu-btn .text {
  overflow: hidden;
  font-size: 3.2rem;
  line-height: 11.7333333333rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.verification-wrap .verification-txt {
  margin-bottom: 2.6666666667rem;
  color: var(--verify-otp-txt);
  font-weight: 700;
  text-align: center
}

.verification-wrap .verification-txt span {
  display: block;
  margin-top: 2.6666666667rem;
  color: var(--verify-otp-phone-txt);
  line-height: 1.5
}

.verification-wrap .btn-primary .icon-mail {
  display: inline-flex;
  width: 5.3333333333rem;
  height: 4rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--verify-otp-mail-icon-color)
}

.verification-wrap .btn-primary.btn-disabled .icon-mail {
  background: var(--verify-otp-mail-icon-disabled)
}

.verification-wrap .verification-content .button a {
  display: inline-flex
}

.verification-wrap .verification-content .input-group input {
  font-size: 3.7333333333rem
}

.voucher-card-wrap {
  display: block;
  width: calc(100% - 4.2666666667rem);
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--voucher-card-bg);
  overflow: hidden
}

.voucher-card-top {
  display: block;
  position: relative;
  padding: 4rem;
  box-shadow: 0 -.5333333333rem 1.0666666667rem #0000061a, inset .2666666667rem .2666666667rem .5333333333rem color-mix(in srgb, var(--inset-shadow), transparent 90%)
}

.voucher-card-top__title {
  position: relative;
  overflow: hidden;
  color: var(--voucher-title);
  font-size: 3.7333333333rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap
}

.voucher-card-top__title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667rem;
  height: 4.8rem;
  margin-right: 2.1333333333rem;
  border-radius: 1.0666666667rem;
  background: var(--voucher-border);
  vertical-align: sub
}

.voucher-card-top__label {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 0;
  right: 5.3333333333rem;
  width: 8.5333333333rem;
  height: 9.6rem;
  border-radius: 0 0 1.3333333333rem 1.3333333333rem;
  background: var(--voucher-tag-bg);
  font-size: 2.9333333333rem
}

.voucher-card-top__label .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center 60%;
  background-size: 50%
}

.voucher-card-top .card-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-top: 2.6666666667rem;
  border-radius: 1.0666666667rem
}

.voucher-card-top .card-content__left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21.8666666667rem;
  height: 21.8666666667rem;
  margin-right: 4rem;
  overflow: hidden;
  border-radius: 1.0666666667rem
}

.voucher-card-top .card-content__left .pic {
  width: 100%;
  height: auto
}

.voucher-card-top .card-content__right {
  display: flex;
  position: relative;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 70%
}

.voucher-card-top .card-detail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  margin-bottom: 2.6666666667rem
}

.voucher-card-top .card-detail .card-date {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  margin: 0 1.3333333333rem 0 0;
  color: var(--voucher-dealline);
  font-size: 2.6666666667rem
}

.voucher-card-top .card-detail .card-date div {
  line-height: 1.5
}

.voucher-card-top .card-detail .time-zone {
  display: block;
  align-self: flex-start;
  margin: .8rem 1.3333333333rem .8rem 0;
  padding: .5333333333rem 1.0666666667rem;
  border: 1px solid var(--voucher-zone);
  border-radius: 1.3333333333rem;
  color: var(--voucher-zone);
  font-size: 2.6666666667rem
}

.voucher-card-top .card-detail .detail-btn {
  display: flex;
  align-self: flex-start;
  margin: .8rem 0;
  padding: .5333333333rem 1.0666666667rem;
  border: .2666666667rem solid var(--voucher-detail);
  border-radius: 1.3333333333rem
}

.voucher-card-top .card-detail .detail-btn a {
  color: var(--voucher-detail);
  font-size: 2.6666666667rem;
  text-decoration: none
}

.voucher-card-deco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem
}

.voucher-card-deco:before,
.voucher-card-deco:after {
  content: "";
  position: absolute;
  top: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 100%;
  background-color: var(--content-bg)
}

.voucher-card-deco:before {
  right: -1.6rem
}

.voucher-card-deco:after {
  left: -1.6rem
}

.voucher-card-deco .dec-line {
  display: block;
  position: relative;
  left: 0;
  bottom: 0;
  width: calc(100% - 9.6rem);
  height: .2666666667rem;
  background-image: linear-gradient(to right, var(--voucher-dot) 0%, var(--voucher-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem
}

.voucher-card-down {
  display: block;
  position: relative;
  padding: 2.1333333333rem 4.2666666667rem 4.2666666667rem;
  border-radius: 0 0 2.6666666667rem 2.6666666667rem;
  box-shadow: 0 .5333333333rem 1.0666666667rem #0000001a
}

.voucher-card-down .card-down-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  border-radius: 1.0666666667rem
}

.voucher-card-down .card-down-inner__left {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  color: var(--voucher-amount)
}

.voucher-card-down .card-down-inner__left .bonus-name {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: 3.2rem;
  padding: 1.3333333333rem 0
}

.voucher-card-down .card-down-inner__left .currency {
  padding: 0 .8rem 0 1.8666666667rem;
  font-size: 3.7333333333rem
}

.voucher-card-down .card-down-inner__left .bonus-number {
  font-size: 4.8rem;
  font-weight: 500
}

.voucher-card-down .card-down-inner__center {
  color: var(--voucher-txt);
  font-size: 3.2rem
}

.voucher-card-down .card-down-inner__right {
  position: relative;
  margin-left: 2.6666666667rem
}

.voucher-card-down .card-down-inner__right .btn {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 29.3333333333rem;
  min-height: 7.4666666667rem;
  max-width: 58.6666666667rem;
  margin: auto;
  padding: 0 2.1333333333rem;
  border-radius: 1.3333333333rem;
  font-size: 3.4666666667rem;
  line-height: 7.4666666667rem;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.voucher-card-down .card-down-inner__right .btn--start {
  background: var(--voucher-start-btn-bg);
  color: var(--voucher-start-btn-txt)
}

.voucher-card-down .card-down-inner__right .btn--disabled {
  background: var(--voucher-disabled-btn-bg);
  color: var(--voucher-disabled-btn-txt)
}

.real-time-bonus-wrap {
  padding-bottom: 2.1333333333rem;
  -webkit-overflow-scrolling: touch
}

.real-time-bonus-wrap .tab-btn-block {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden
}

.tab-real-time-bonus {
  justify-content: flex-start;
  height: 8.5333333333rem;
  background: transparent !important
}

.tab-real-time-bonus .btn {
  min-width: -moz-fit-content;
  min-width: fit-content;
  line-height: 8rem;
  padding: 0;
  border-radius: 1.3333333333rem;
  color: var(--realtime-bonus-summary-tab-btn-txt);
  background: var(--realtime-bonus-summary-tab-btn-bg)
}

.tab-real-time-bonus .btn.active {
  background: var(--realtime-bonus-summary-tab-btn-bg-active)
}

.tab-real-time-bonus .btn.active .text {
  color: var(--realtime-bonus-summary-tab-btn-txt-active)
}

.tab-real-time-bonus .btn+.btn {
  margin-left: 1.0666666667rem
}

.tab-real-time-bonus .btn .text {
  color: var(--realtime-bonus-summary-tab-btn-txt)
}

.tab-real-time-bonus .line {
  display: none
}

.available-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--realtime-bonus-available-bg)
}

.available-amount__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 80rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.available-amount__title {
  display: flex;
  align-items: center;
  margin: 4.2666666667rem auto
}

.available-amount__icon {
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin-right: 2.1333333333rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--realtime-bonus-available-title-icon)
}

.available-amount__text {
  color: var(--realtime-bonus-available-title);
  font-size: 4.2666666667rem
}

.available-amount__text--secondary {
  opacity: .7
}

.available-amount__decor {
  width: 21.3333333333rem;
  height: 21.3333333333rem;
  margin: 4.2666666667rem auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center
}

.available-amount__value {
  margin: 4.2666666667rem auto;
  color: var(--realtime-bonus-available-amount);
  font-weight: 700;
  font-size: 7.4666666667rem;
  text-align: center
}

.available-amount__button {
  display: flex;
  align-items: center;
  z-index: 1;
  margin: 4.2666666667rem auto;
  padding: 2.1333333333rem 8.5333333333rem;
  background: var(--realtime-bonus-available-btn-bg)
}

.available-amount__button a {
  color: var(--realtime-bonus-available-btn-txt)
}

.available-amount__tips {
  font-size: 3.7333333333rem;
  color: var(--realtime-bonus-available-tips-txt);
  text-align: center
}

.available-amount__tips--rescue {
  margin: 4rem auto
}

.claimed-box {
  display: flex;
  justify-content: space-around;
  margin: 1.0666666667rem 0;
  text-align: center
}

.claimed-box__title {
  font-size: 3.2rem;
  color: var(--realtime-bonus-claimed-title)
}

.claimed-box__value {
  margin-top: 2.1333333333rem;
  font-size: 4.8rem;
  color: var(--realtime-bonus-claimed-value)
}

.real-time-bonuses-accordion {
  margin: 2.1333333333rem 0 0;
  background: var(--realtime-bonus-summary-list-content-bg);
  box-shadow: none
}

.real-time-bonuses-accordion .accordion-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.1333333333rem;
  background: var(--realtime-bonus-summary-list-header-bg);
  cursor: pointer
}

.real-time-bonuses-accordion .accordion-header__main-info {
  display: flex;
  justify-content: space-between
}

.real-time-bonuses-accordion .accordion-header__title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-width: calc(100% - 5.3333333333rem);
  line-height: 1.2;
  font-size: 4.2666666667rem;
  font-weight: 600;
  color: var(--realtime-bonus-summary-list-header-title)
}

.real-time-bonuses-accordion .accordion-header__arrow {
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  background: var(--realtime-bonus-summary-list-header-arrow-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 60%;
  mask-size: 60%;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform .3s
}

.real-time-bonuses-accordion .accordion-header__total-amount-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "total-rebate total-rebate" "total-claimed total-expired";
  grid-gap: 1.0666666667rem;
  margin-top: 2.1333333333rem
}

.real-time-bonuses-accordion .total-rebate {
  grid-area: total-rebate;
  display: flex;
  justify-content: space-between
}

.real-time-bonuses-accordion .total-rebate__title {
  font-size: 3.2rem;
  color: var(--realtime-bonus-summary-list-header-total-rebate-title)
}

.real-time-bonuses-accordion .total-rebate__value {
  font-size: 4.2666666667rem;
  font-weight: 600;
  color: var(--realtime-bonus-summary-list-header-total-rebate-amount)
}

.real-time-bonuses-accordion .total-claimed,
.real-time-bonuses-accordion .total-expired {
  padding: 2.1333333333rem;
  border-radius: 1.0666666667rem;
  background: var(--realtime-bonus-summary-list-header-total-bg)
}

.real-time-bonuses-accordion .total-claimed__title,
.real-time-bonuses-accordion .total-expired__title {
  display: block;
  font-size: 3.2rem
}

.real-time-bonuses-accordion .total-claimed__value,
.real-time-bonuses-accordion .total-expired__value {
  display: block;
  font-size: 4.2666666667rem;
  font-weight: 600;
  text-align: right
}

.real-time-bonuses-accordion .total-claimed {
  grid-area: total-claimed
}

.real-time-bonuses-accordion .total-claimed__title {
  color: var(--realtime-bonus-summary-list-header-total-claimed-title)
}

.real-time-bonuses-accordion .total-claimed__value {
  color: var(--realtime-bonus-summary-list-header-total-claimed-amount)
}

.real-time-bonuses-accordion .total-expired {
  grid-area: total-expired
}

.real-time-bonuses-accordion .total-expired__title {
  color: var(--realtime-bonus-summary-list-header-total-expired-title)
}

.real-time-bonuses-accordion .total-expired__value {
  color: var(--realtime-bonus-summary-list-header-total-expired-amount)
}

.real-time-bonuses-accordion .accordion-collapse {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s, opacity .5s;
  opacity: 0
}

.real-time-bonuses-accordion .accordion-collapse__item {
  position: relative
}

.real-time-bonuses-accordion .accordion-collapse__item .game-type-accordion-header {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 4.2666666667rem;
  gap: 2.1333333333rem;
  padding: 2.1333333333rem 3.2rem;
  background: var(--realtime-bonus-game-type-accordion-header-bg)
}

.real-time-bonuses-accordion .accordion-collapse__item .game-type-accordion-header h4 {
  color: var(--realtime-bonus-game-type-accordion-title);
  font-size: 3.7333333333rem;
  line-height: normal
}

.real-time-bonuses-accordion .accordion-collapse__item .game-type-accordion-header .game-type-accordion-header__button {
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  background: var(--realtime-bonus-summary-list-header-arrow-icon);
  -webkit-mask-image: var(--icon-expand);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform .3s
}

.real-time-bonuses-accordion .game-type-accordion-collapse {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  width: 100%;
  max-height: 0;
  padding: 0 3.2rem;
  overflow: hidden;
  transition: max-height .3s, opacity .5s;
  opacity: 0
}

.real-time-bonuses-accordion .game-type-accordion-collapse__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.2rem
}

.real-time-bonuses-accordion .game-type-accordion-collapse__item:first-child {
  margin-top: 3.2rem
}

.real-time-bonuses-accordion .game-type-accordion-collapse__item:last-child {
  margin-bottom: 3.2rem;
  border-bottom: none
}

.real-time-bonuses-accordion .game-type-accordion-collapse li+li:before {
  content: "";
  display: block;
  position: absolute;
  top: -3.2rem;
  width: 100%;
  height: .2666666667rem;
  background: var(--realtime-bonus-game-type-list-separator)
}

.real-time-bonuses-accordion .game-type-title,
.real-time-bonuses-accordion .total-rebate-amount,
.real-time-bonuses-accordion .total-turnover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 3.2rem
}

.real-time-bonuses-accordion .game-type-title {
  font-weight: 700
}

.real-time-bonuses-accordion .vendor-name {
  color: var(--realtime-bonus-vendor-title)
}

.real-time-bonuses-accordion .rebate-pct {
  display: inline
}

.real-time-bonuses-accordion .rebate-pct span {
  color: var(--realtime-bonus-vendor-title)
}

.real-time-bonuses-accordion .rebate-pct span+span {
  margin-left: 2.1333333333rem
}

.real-time-bonuses-accordion .game-type-detail {
  display: flex;
  flex-direction: column;
  gap: 2.1333333333rem;
  color: var(--realtime-bonus-vendor-detail)
}

.real-time-bonuses-accordion .total-rebate-amount {
  grid-column: 1/span 2;
  grid-row: 2/span 1
}

.real-time-bonuses-accordion .total-turnover {
  grid-column: 1/span 2;
  grid-row: 3/span 1
}

.accordion-wrap--expanded .accordion-header__arrow {
  transform: rotate(180deg)
}

.accordion-wrap--expanded .accordion-collapse {
  height: 100%;
  max-height: 266.6666666667rem;
  opacity: 1
}

.real-time-bonuses-accordion .accordion-collapse__item.accordion-wrap--expanded .game-type-accordion-header h4 {
  color: var(--realtime-bonus-game-type-accordion-title-active)
}

.real-time-bonuses-accordion .accordion-collapse__item.accordion-wrap--expanded .game-type-accordion-header__button {
  -webkit-mask-image: var(--icon-collapse);
  mask-image: var(--icon-collapse)
}

.real-time-bonuses-accordion .accordion-collapse__item.accordion-wrap--expanded .game-type-accordion-collapse {
  height: 100%;
  max-height: 266.6666666667rem;
  opacity: 1;
  background: var(--realtime-bonus-game-type-accordion-content-bg)
}

.pop-real-time-bonus .pop-inner {
  text-align: center
}

.pop-real-time-bonus h5 {
  font-size: 6.4rem;
  font-weight: 700;
  color: var(--pop-realtime-bonus-number)
}

.cricket-total-wrap {
  display: grid;
  grid-template-columns: 40% auto;
  align-items: center;
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--cricket-betting-details-total-bg);
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%);
  color: var(--cricket-betting-details-total-txt);
  font-size: 3.7333333333rem
}

.cricket-total-wrap .title {
  padding: 2.1333333333rem;
  border-radius: 1.3333333333rem 0 0;
  background: var(--cricket-betting-details-total-title-bg);
  color: var(--cricket-betting-details-totalt-title)
}

.cricket-total-wrap .platform {
  padding: 2.1333333333rem;
  border-radius: 0 0 0 1.3333333333rem;
  background: var(--cricket-betting-details-total-platform-bg);
  color: var(--cricket-betting-details-total-platform)
}

.cricket-total-wrap .platform span {
  margin-left: .5333333333rem
}

.cricket-total-wrap .profit,
.cricket-total-wrap .turnover {
  display: inline-flex;
  padding: 2.1333333333rem;
  text-align: left
}

.cricket-total-wrap .profit span,
.cricket-total-wrap .turnover span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 21.3333333333rem
}

.cricket-total-wrap .profit-amount,
.cricket-total-wrap .turnover-amount {
  margin-left: auto;
  font-weight: 700
}

.cricket-total-wrap .profit {
  position: relative
}

.cricket-total-wrap .profit:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -.2666666667rem;
  width: 95%;
  height: .2666666667rem;
  background: linear-gradient(to right, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem 2.6666666667rem
}

.cricket-total-wrap .negative {
  color: var(--cricket-betting-details-profit-amount)
}

.cricket-list-content .accordion-wrap {
  margin: 2.1333333333rem
}

.cricket-list-content .accordion-header {
  width: 100%;
  padding: 2.1333333333rem
}

.cricket-list-content .accordion-header.show .arrow {
  transform: rotate(180deg);
  transform-origin: center
}

.cricket-list-content .accordion-collapse {
  display: block;
  padding: 2.1333333333rem
}

.cricket-list-content .main-info {
  display: grid;
  grid-template-columns: 10.6666666667rem calc(100% - 20.2666666667rem) 5.3333333333rem;
  align-items: center;
  margin-bottom: 2.1333333333rem;
  column-gap: 2.1333333333rem
}

.cricket-list-content .main-info img {
  grid-row: 1/span 2;
  width: 10.6666666667rem
}

.cricket-list-content .title {
  display: inline-flex;
  align-items: center;
  overflow: hidden
}

.cricket-list-content .category-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cricket-betting-details-title);
  font-size: 4.2666666667rem;
  font-weight: 700
}

.cricket-list-content .parlay-type {
  height: 4.8rem;
  margin-left: 2.1333333333rem;
  padding: .5333333333rem 1.0666666667rem;
  border-radius: 1.0666666667rem;
  background: var(--cricket-betting-details-tag-bg);
  color: var(--cricket-betting-details-tag-txt);
  font-size: 3.2rem;
  line-height: 3.7333333333rem
}

.cricket-list-content .arrow {
  position: relative;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  transition: all .3s;
  background: unset;
  justify-self: center;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 60%;
  background: var(--cricket-betting-details-collapse-arrow-color)
}

.cricket-list-content .settled-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 2/span 2;
  color: var(--cricket-betting-details-date-txt);
  font-size: 3.2rem
}

.cricket-list-content .settled-date span {
  color: var(--cricket-betting-details-date-txt)
}

.cricket-list-content .betting-info {
  display: grid;
  position: relative;
  grid-gap: 2.1333333333rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2.1333333333rem
}

.cricket-list-content .betting-info:before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - .4rem);
  width: 100%;
  height: .2666666667rem;
  background: linear-gradient(to right, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem 2.6666666667rem
}

.cricket-list-content .betting-info:after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - .4rem);
  width: .2666666667rem;
  height: 100%;
  background-image: linear-gradient(to bottom, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-y;
  background-size: 2.6666666667rem 2.6666666667rem
}

.cricket-list-content .avg-odds,
.cricket-list-content .turnover,
.cricket-list-content .stake,
.cricket-list-content .profit {
  display: grid;
  grid-template-columns: 4.8rem calc(100% - 4.8rem);
  padding: 1.0666666667rem;
  column-gap: 2.1333333333rem;
  color: var(--cricket-betting-details-value)
}

.cricket-list-content .avg-odds span,
.cricket-list-content .turnover span,
.cricket-list-content .stake span,
.cricket-list-content .profit span {
  grid-column: 2/span 1
}

.cricket-list-content .avg-odds .item-icon,
.cricket-list-content .turnover .item-icon,
.cricket-list-content .stake .item-icon,
.cricket-list-content .profit .item-icon {
  position: relative;
  width: 4.8rem;
  height: 4.8rem
}

.cricket-list-content .avg-odds .icon {
  fill: var(--cricket-betting-details-avg-odds-icon-color)
}

.cricket-list-content .avg-odds .circle {
  fill: var(--cricket-betting-details-avg-odds-circle)
}

.cricket-list-content .turnover .icon {
  fill: var(--cricket-betting-details-turnover-icon-color)
}

.cricket-list-content .turnover .circle {
  fill: var(--cricket-betting-details-turnover-circle)
}

.cricket-list-content .stake .icon {
  fill: var(--cricket-betting-details-stake-icon-color)
}

.cricket-list-content .stake .circle {
  fill: var(--cricket-betting-details-stake-circle)
}

.cricket-list-content .profit {
  text-align: left
}

.cricket-list-content .profit .icon {
  fill: var(--cricket-betting-details-profit-icon-color)
}

.cricket-list-content .profit .circle {
  fill: var(--cricket-betting-details-profit-circle)
}

.cricket-list-content strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cricket-list-content span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cricket-betting-details-value-title);
  font-size: 3.2rem
}

.cricket-list-content .bet-bid,
.cricket-list-content .bet-placed {
  color: var(--cricket-betting-details-date-txt);
  font-size: 3.2rem
}

.cricket-list-content .bet-bid {
  float: left;
  text-align: left
}

.cricket-list-content .bet-placed {
  float: right;
  text-align: right
}

.parlay-wrap {
  display: grid;
  position: relative;
  grid-template-columns: 6.4rem calc(100% - 6.4rem);
  grid-template-rows: 6.4rem auto auto;
  padding: 1.0666666667rem;
  overflow: hidden;
  border-radius: 1.0666666667rem;
  background: var(--cricket-betting-details-sub-item-bg)
}

.parlay-wrap+.parlay-wrap {
  margin-top: 1.0666666667rem
}

.parlay-wrap:not(.commission):after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 9.6rem 9.6rem 0;
  border-style: solid
}

.parlay-wrap .event-type {
  align-self: center;
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  fill: var(--cricket-betting-details-sub-item-sport-icon-color);
  justify-self: center
}

.parlay-wrap .event-name {
  display: inline-flex;
  grid-column: 2/span 8;
  align-self: center;
  overflow: hidden;
  color: #222;
  font-size: 3.2rem;
  font-weight: 700
}

.parlay-wrap .event-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: calc((100% - 4.2666666667rem - 9.6rem) / 2);
  color: var(--cricket-betting-details-sub-item-title);
  font-weight: 400
}

.parlay-wrap .event-name i {
  margin: 0 1.0666666667rem
}

.parlay-wrap .market {
  grid-column: 2/span 9;
  color: var(--cricket-betting-details-sub-item-txt);
  font-size: 3.7333333333rem;
  line-height: 4.2666666667rem
}

.parlay-wrap .market .sub-txn-event-name {
  margin-bottom: 2.1333333333rem
}

.parlay-wrap .parlay-status {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 9.6rem;
  height: 9.6rem
}

.parlay-wrap.win:after {
  border-color: transparent var(--color-success) transparent transparent
}

.parlay-wrap.win .parlay-status {
  fill: var(--cricket-betting-details-sub-item-win-txt)
}

.parlay-wrap.lose:after {
  border-color: transparent var(--color-danger) transparent transparent
}

.parlay-wrap.lose .parlay-status {
  fill: var(--cricket-betting-details-sub-item-lose-txt)
}

.parlay-wrap.cancel:after {
  border-color: transparent #d5d9dc transparent transparent
}

.parlay-wrap.cancel .parlay-status {
  fill: var(--cricket-betting-details-sub-item-cancel-txt)
}

.parlay-wrap.voided:after {
  border-color: transparent var(--color-warning) transparent transparent
}

.parlay-wrap.voided .parlay-status {
  fill: var(--cricket-betting-details-sub-item-voided-txt)
}

.parlay-wrap .details {
  display: grid;
  grid-column: 1/span 2;
  grid-gap: 1.0666666667rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.1333333333rem
}

.parlay-wrap .details .select {
  grid-column: 1/span 2;
  padding: 2.1333333333rem;
  border-radius: 1.0666666667rem;
  background: var(--cricket-betting-details-sub-item-table-bg);
  color: var(--cricket-betting-details-sub-item-txt);
  font-size: 3.7333333333rem
}

.parlay-wrap .details .bet-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 1/span 2
}

.parlay-wrap .odds-req,
.parlay-wrap .odds-matched,
.parlay-wrap .bet-type {
  padding: 2.1333333333rem;
  border-radius: 1.0666666667rem;
  background: var(--cricket-betting-details-sub-item-table-bg);
  color: var(--cricket-betting-details-sub-item-value-title);
  font-size: 3.2rem
}

.parlay-wrap .odds-req strong,
.parlay-wrap .odds-matched strong,
.parlay-wrap .bet-type strong {
  display: block;
  color: var(--cricket-betting-details-sub-item-value);
  font-size: 4.2666666667rem;
  text-align: right
}

.parlay-wrap .odds-req strong,
.parlay-wrap .odds-matched strong {
  margin-top: .5333333333rem
}

.mat-ripple {
  overflow: hidden;
  position: relative
}

.mat-ripple:not(:empty) {
  transform: translateZ(0)
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, .2, 1);
  transform: scale3d(0, 0, 0);
  background-color: var(--mat-ripple-color, rgba(0, 0, 0, .1))
}

.cdk-high-contrast-active .mat-ripple-element {
  display: none
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  left: 0
}

[dir=rtl] .cdk-visually-hidden {
  left: auto;
  right: 0
}

.cdk-overlay-container,
.cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000
}

.cdk-overlay-container:empty {
  display: none
}

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%
}

.cdk-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
  opacity: 0
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1
}

.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: .6
}

.cdk-overlay-dark-backdrop {
  background: #00000052
}

.cdk-overlay-transparent-backdrop {
  transition: visibility 1ms linear, opacity 1ms linear;
  visibility: hidden;
  opacity: 1
}

.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
  visibility: visible
}

.cdk-overlay-backdrop-noop-animation {
  transition: none
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll
}

textarea.cdk-textarea-autosize {
  resize: none
}

textarea.cdk-textarea-autosize-measuring {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: auto !important;
  overflow: hidden !important
}

textarea.cdk-textarea-autosize-measuring-firefox {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: 0 !important
}

@keyframes cdk-text-field-autofill-start {}

@keyframes cdk-text-field-autofill-end {}

.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms
}

.mat-focus-indicator {
  position: relative
}

.mat-focus-indicator:before {
  inset: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-focus-indicator-display, none);
  border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
  border-radius: var(--mat-focus-indicator-border-radius, 4px)
}

.mat-focus-indicator:focus:before {
  content: ""
}

.cdk-high-contrast-active {
  --mat-focus-indicator-display: block
}

.mat-mdc-focus-indicator {
  position: relative
}

.mat-mdc-focus-indicator:before {
  inset: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-mdc-focus-indicator-display, none);
  border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
  border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px)
}

.mat-mdc-focus-indicator:focus:before {
  content: ""
}

.cdk-high-contrast-active {
  --mat-mdc-focus-indicator-display: block
}

.mat-app-background {
  background-color: var(--mat-app-background-color, transparent);
  color: var(--mat-app-text-color, inherit)
}

html {
  --mat-ripple-color: rgba(255, 255, 255, .1)
}

html {
  --mat-option-selected-state-label-text-color: #f4b600;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-accent {
  --mat-option-selected-state-label-text-color: #a38d5b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-warn {
  --mat-option-selected-state-label-text-color: #f44336;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

html {
  --mat-optgroup-label-text-color: white
}

.mat-primary {
  --mat-full-pseudo-checkbox-selected-icon-color: #f4b600;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f4b600;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

html,
.mat-accent {
  --mat-full-pseudo-checkbox-selected-icon-color: #a38d5b;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #a38d5b;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

.mat-warn {
  --mat-full-pseudo-checkbox-selected-icon-color: #f44336;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

html {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white
}

.mat-elevation-z0,
.mat-mdc-elevation-specific.mat-elevation-z0 {
  box-shadow: 0 0 #0003, 0 0 #00000024, 0 0 #0000001f
}

.mat-elevation-z1,
.mat-mdc-elevation-specific.mat-elevation-z1 {
  box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f
}

.mat-elevation-z2,
.mat-mdc-elevation-specific.mat-elevation-z2 {
  box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f
}

.mat-elevation-z3,
.mat-mdc-elevation-specific.mat-elevation-z3 {
  box-shadow: 0 3px 3px -2px #0003, 0 3px 4px #00000024, 0 1px 8px #0000001f
}

.mat-elevation-z4,
.mat-mdc-elevation-specific.mat-elevation-z4 {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f
}

.mat-elevation-z5,
.mat-mdc-elevation-specific.mat-elevation-z5 {
  box-shadow: 0 3px 5px -1px #0003, 0 5px 8px #00000024, 0 1px 14px #0000001f
}

.mat-elevation-z6,
.mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f
}

.mat-elevation-z7,
.mat-mdc-elevation-specific.mat-elevation-z7 {
  box-shadow: 0 4px 5px -2px #0003, 0 7px 10px 1px #00000024, 0 2px 16px 1px #0000001f
}

.mat-elevation-z8,
.mat-mdc-elevation-specific.mat-elevation-z8 {
  box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f
}

.mat-elevation-z9,
.mat-mdc-elevation-specific.mat-elevation-z9 {
  box-shadow: 0 5px 6px -3px #0003, 0 9px 12px 1px #00000024, 0 3px 16px 2px #0000001f
}

.mat-elevation-z10,
.mat-mdc-elevation-specific.mat-elevation-z10 {
  box-shadow: 0 6px 6px -3px #0003, 0 10px 14px 1px #00000024, 0 4px 18px 3px #0000001f
}

.mat-elevation-z11,
.mat-mdc-elevation-specific.mat-elevation-z11 {
  box-shadow: 0 6px 7px -4px #0003, 0 11px 15px 1px #00000024, 0 4px 20px 3px #0000001f
}

.mat-elevation-z12,
.mat-mdc-elevation-specific.mat-elevation-z12 {
  box-shadow: 0 7px 8px -4px #0003, 0 12px 17px 2px #00000024, 0 5px 22px 4px #0000001f
}

.mat-elevation-z13,
.mat-mdc-elevation-specific.mat-elevation-z13 {
  box-shadow: 0 7px 8px -4px #0003, 0 13px 19px 2px #00000024, 0 5px 24px 4px #0000001f
}

.mat-elevation-z14,
.mat-mdc-elevation-specific.mat-elevation-z14 {
  box-shadow: 0 7px 9px -4px #0003, 0 14px 21px 2px #00000024, 0 5px 26px 4px #0000001f
}

.mat-elevation-z15,
.mat-mdc-elevation-specific.mat-elevation-z15 {
  box-shadow: 0 8px 9px -5px #0003, 0 15px 22px 2px #00000024, 0 6px 28px 5px #0000001f
}

.mat-elevation-z16,
.mat-mdc-elevation-specific.mat-elevation-z16 {
  box-shadow: 0 8px 10px -5px #0003, 0 16px 24px 2px #00000024, 0 6px 30px 5px #0000001f
}

.mat-elevation-z17,
.mat-mdc-elevation-specific.mat-elevation-z17 {
  box-shadow: 0 8px 11px -5px #0003, 0 17px 26px 2px #00000024, 0 6px 32px 5px #0000001f
}

.mat-elevation-z18,
.mat-mdc-elevation-specific.mat-elevation-z18 {
  box-shadow: 0 9px 11px -5px #0003, 0 18px 28px 2px #00000024, 0 7px 34px 6px #0000001f
}

.mat-elevation-z19,
.mat-mdc-elevation-specific.mat-elevation-z19 {
  box-shadow: 0 9px 12px -6px #0003, 0 19px 29px 2px #00000024, 0 7px 36px 6px #0000001f
}

.mat-elevation-z20,
.mat-mdc-elevation-specific.mat-elevation-z20 {
  box-shadow: 0 10px 13px -6px #0003, 0 20px 31px 3px #00000024, 0 8px 38px 7px #0000001f
}

.mat-elevation-z21,
.mat-mdc-elevation-specific.mat-elevation-z21 {
  box-shadow: 0 10px 13px -6px #0003, 0 21px 33px 3px #00000024, 0 8px 40px 7px #0000001f
}

.mat-elevation-z22,
.mat-mdc-elevation-specific.mat-elevation-z22 {
  box-shadow: 0 10px 14px -6px #0003, 0 22px 35px 3px #00000024, 0 8px 42px 7px #0000001f
}

.mat-elevation-z23,
.mat-mdc-elevation-specific.mat-elevation-z23 {
  box-shadow: 0 11px 14px -7px #0003, 0 23px 36px 3px #00000024, 0 9px 44px 8px #0000001f
}

.mat-elevation-z24,
.mat-mdc-elevation-specific.mat-elevation-z24 {
  box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f
}

.mat-theme-loaded-marker {
  display: none
}

html {
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)
}

html {
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #f4b600;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 182, 0, .4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 182, 0, .3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 182, 0, .3);
  --mat-datepicker-toggle-active-state-icon-color: #f4b600;
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 182, 0, .2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
  --mat-datepicker-toggle-icon-color: white;
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, .7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: white;
  --mat-datepicker-calendar-navigation-button-icon-color: white;
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, .12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, .7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, .5);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(255, 255, 255, .3);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, .5);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, .24);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: rgba(255, 255, 255, .5);
  --mat-datepicker-range-input-disabled-state-text-color: rgba(255, 255, 255, .5);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white
}

.mat-datepicker-content.mat-accent {
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #a38d5b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(163, 141, 91, .4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(163, 141, 91, .3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(163, 141, 91, .3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(163, 141, 91, .2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-content.mat-warn {
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-toggle-active-state-icon-color: #a38d5b
}

.mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-toggle-active-state-icon-color: #f44336
}

.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px
}

.datepicker-toggle {
  color: #222
}

header.cricket,
header.member,
header.normal,
header.player,
header.normal-logo-left {
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

header.slot,
header.editor,
header.vip {
  box-shadow: none
}

header .logo {
  width: 10.6666666667rem
}

.login-biometric-content .button {
  margin: 2.1333333333rem
}

.member-content .button {
  width: calc(100% - 4.2666666667rem);
  margin: 2.1333333333rem
}

.menu-box {
  margin: 2.1333333333rem;
  padding: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.input-group input {
  border-radius: 1.3333333333rem
}

.input-group.upload-file .input-wrap:before {
  border-radius: 1.3333333333rem
}

.under-maintain .maintain-mask,
.select-group select,
.btn-select {
  border-radius: 1.3333333333rem
}

.option-group.select-bar {
  padding: 2.1333333333rem 0 2.1333333333rem 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.option-group select {
  padding: 0 6.4rem 0 2.1333333333rem
}

.option-wrap:after {
  right: 2.1333333333rem
}

.upload-wrap .upload-group,
.file-box,
.crypto-group-2 .crypto-input input {
  border-radius: 1.3333333333rem
}

.tab-btn-bar:before {
  border-radius: 1.3333333333rem
}

.tab-btn-bar .line:after {
  border-radius: 1.3333333333rem
}

.tab-btn-page {
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.btn-box {
  margin: 2.1333333333rem 0 0
}

.switch-mode,
.inner-block {
  grid-gap: 2.1333333333rem;
  margin: 2.1333333333rem
}

.switch-mode li,
.inner-block li {
  border-radius: 1.3333333333rem
}

.switch-mode li.active:after,
.inner-block li.active:after {
  border-radius: 1.0666666667rem
}

.switch-mode li.active:before,
.inner-block li.active:before {
  border-radius: 1.0666666667rem
}

.loader-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.loader-box video {
  width: 21.3333333333rem
}

.menu-first .beforelogin,
.menu-first .afterlogin {
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.menu-first .menu-item li,
.menu-first .menu-item .item-box,
.menu-first .menu-item .contact-box,
.menu-first .menu-item .home-box {
  border-radius: 1.3333333333rem
}

.menu-header {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.member-menu-content {
  padding: 2.1333333333rem
}

.member-menu-box {
  margin: 0 0 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.member-menu-box .title {
  padding: 0 3.2rem
}

.member-menu-box ul {
  padding: 0 0 2.1333333333rem
}

.member-menu-box ul li {
  padding: 1.0666666667rem
}

.member-menu-box:nth-child(1) {
  background: var(--sidenav-category-area-bg);
  box-shadow: inset 0 .2666666667rem .5333333333rem color-mix(in srgb, var(--inset-shadow), transparent 90%)
}

.member-menu-box:nth-child(1) .title {
  padding: 0 2.1333333333rem
}

.menu-second ul.active {
  border-radius: 1.3333333333rem
}

.cricket .betting {
  width: 100%;
  margin-top: 2.1333333333rem
}

.nextevent .slider .slick-slide {
  margin: 0 2.1333333333rem
}

.login-info-box {
  margin: 1.0666666667rem 2.1333333333rem 0
}

.pop-account-lock {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-confirm-password {
  padding-top: 9.6rem;
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-biometric-success,
.register-fail-wrap,
.register-success-wrap {
  border-radius: 1.3333333333rem
}

.pop-other-account {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-transfer .menu-box {
  padding: 2.1333333333rem
}

.pop-wrap3 {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
  padding: 8.5333333333rem 2.1333333333rem 2.1333333333rem
}

.pop-wrap3 .inner-wrap .inner-right .inner-box:nth-child(2) {
  padding: 8.5333333333rem 2.1333333333rem 2.1333333333rem
}

.pop-wrap3 .title-wrap .title {
  margin-bottom: 2.1333333333rem
}

.lvup-select-wrap {
  grid-gap: 2.1333333333rem
}

.lvup-select-wrap .event {
  border-radius: 1.3333333333rem
}

.reel-box {
  margin-bottom: 2.1333333333rem
}

.lvup-event-detail {
  margin-bottom: 2.1333333333rem;
  padding: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.category {
  padding-bottom: 2.1333333333rem
}

.category ul {
  grid-gap: 1.0666666667rem;
  margin: 2.1333333333rem 0
}

.category ul li {
  border-radius: 1.3333333333rem
}

.category ul li.active:after {
  border-radius: 1.3333333333rem
}

.category ul li.active:before {
  border-bottom-right-radius: 1.3333333333rem
}

.search-box .my-favorites,
.search-box .recently-played,
.game-list li button {
  border-radius: 1.3333333333rem
}

.recently-played-wrap .select-date,
.my-favorites-wrap .select-date,
.pop-casino-details-filter,
.pop-slot-details-filter,
.pop-casino-details-filter .pop-btn-group,
.pop-slot-details-filter .pop-btn-group {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.fixed-tab .promotion .promotion-main {
  padding: 0 2.1333333333rem
}

.tips-info {
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.bonus-wallet-wrap {
  width: calc(100% - 4.2666666667rem);
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.bonus-wallet {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.bonus-card-down {
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.no-result {
  width: calc(100% - 4.2666666667rem);
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.player-vip-box {
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.card-top {
  border-radius: 1.3333333333rem
}

.card-bottom {
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.vip-content .button {
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.acquired-content {
  padding: 0 2.1333333333rem
}

.cash-points,
.form-vip-history {
  border-radius: 1.3333333333rem
}

.player-vip-detailed-menu {
  padding: 2.1333333333rem 2.1333333333rem 0
}

.player-vip-detailed-menu .btn {
  border-radius: 1.3333333333rem 50% 1.3333333333rem 1.3333333333rem
}

.player-vip-detailed-box .inner-box {
  width: calc(100% - 4.2666666667rem);
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.player-vip-detailed-box .title {
  margin: 2.1333333333rem 2.1333333333rem 0
}

.head-lv-name {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.lv-info-wrap {
  padding: 2.1333333333rem
}

.lv-info-wrap .status.accept2 {
  border-radius: 1.3333333333rem
}

.terms {
  padding: 2.1333333333rem
}

.list-title {
  margin: 2.1333333333rem 2.1333333333rem 0;
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.list-content {
  margin: 0 2.1333333333rem;
  padding: 1.0666666667rem;
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.list-content li {
  padding: 0
}

.vip-list {
  margin-top: 0
}

.time-zone {
  border-radius: .5333333333rem
}

.accordion-wrap.error {
  box-shadow: none
}

.playerform-content .button {
  margin: 2.1333333333rem
}

.drop-down-menu {
  border-radius: 1.3333333333rem
}

.drop-down-menu .phone-code-list {
  left: 4.5333333333rem;
  width: 29.6rem
}

.drop-down-menu-btn {
  border-radius: 1.0666666667rem 1.0666666667rem 0 0
}

.accordion-card-wrap.select-bar,
.option-group.select-bar,
.player-deposit-wrap .player-deposit-step1 .menu-box {
  margin: 2.1333333333rem
}

.player-top .credit-card {
  margin: 2.1333333333rem 0 1.0666666667rem
}

.credit-card {
  width: calc(100% - 4.2666666667rem)
}

.main-wallet-info {
  padding: 2.1333333333rem
}

.accordion-card-wrap {
  margin: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.pop-otp-verification {
  padding-top: 8.5333333333rem;
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.ac-list .btn-revert {
  border-radius: 1.3333333333rem
}

.ac-list .btn-revert:after {
  border-radius: 1.0666666667rem
}

.info-list li:first-child {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.info-list li:last-child {
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.style-bank li input[type=checkbox]+label,
.style-bank li input[type=radio]+label {
  border-radius: 1.3333333333rem
}

.style-bank li input[type=checkbox].active+label:before,
.style-bank li input[type=radio].active+label:before {
  border-bottom-right-radius: 1.3333333333rem
}

.transaction-record-list .list-title {
  margin: 0 2.1333333333rem
}

.list-group .date-title {
  margin: 0 2.1333333333rem;
  padding: 2.1333333333rem
}

.list-group:last-child {
  margin-bottom: 2.1333333333rem
}

.list-group:last-child .list-content {
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.transaction-record-list .no-result,
.betting-record-list .no-result,
.betting-record-inner-list .no-result {
  margin-top: 0
}

.betting-record-list .list-content {
  border-radius: 0
}

.list-bar {
  margin: 0 2.1333333333rem
}

.list-bar .date-title {
  margin: 0
}

.timeline-block .content {
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.details-box {
  border-radius: 1.3333333333rem
}

.pop-transaction-records-details .member-content .button {
  width: auto
}

.list-arrow {
  margin-right: 2.1333333333rem
}

.pop-transaction-records-details {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-transaction-records-details .bank-name {
  border-radius: 1.0666666667rem
}

.inbox-list .inner-box {
  margin-top: 2.1333333333rem
}

.inbox-list .list-group:first-child .date-title {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.inbox-list .list-content {
  border-radius: 0
}

.inbox-list .message-item {
  padding: 0 2.1333333333rem
}

.inbox-list .message-item:last-child {
  border-bottom: 0
}

.inbox-list .content-wrap {
  margin-left: 2.1333333333rem;
  padding: 2.1333333333rem 0
}

.recommend-friends-box {
  margin: 2.1333333333rem;
  padding: 2.1333333333rem;
  border-radius: 1.3333333333rem
}

.recommend-friends-box.deco {
  margin-top: 17.0666666667rem
}

.date-bar {
  padding: 2.1333333333rem
}

.code-box .code,
.code-box .btn-share,
.condition-box .item .text {
  border-radius: 1.3333333333rem
}

.ticket+.ticket {
  margin-top: 2.1333333333rem
}

.ticket .ticket-inner-left {
  padding: 2.1333333333rem
}

.ticket .ticket-inner {
  border-radius: 1.3333333333rem
}

.article-content {
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.article-detail .table {
  border-radius: 1.3333333333rem
}

.article-detail .table-title:first-child {
  border-radius: 1.3333333333rem 0 0
}

.article-detail .table-title:last-child {
  border-radius: 0 1.3333333333rem 0 0
}

.currency-selector-wrap {
  width: 26.6666666667rem;
  top: 4.2666666667rem;
  right: 4.2666666667rem;
  background-color: var(--form-input-bg);
  box-shadow: 0 1.6rem 3.2rem #0003;
  border-radius: 1.3333333333rem;
  display: flex;
  flex-flow: row nowrap;
  padding: 0 2.1333333333rem
}

.currency-selector-wrap.input-wrap {
  position: fixed
}

.currency-selector-wrap .currency-area-code {
  width: 100%
}

.currency-selector-wrap .btn-select {
  position: relative;
  background-color: var(--form-input-bg);
  padding: 0;
  line-height: normal;
  box-shadow: none
}

.currency-selector-wrap .btn-select:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 5.3333333333rem;
  right: 0;
  border-width: 1.3333333333rem;
  border-style: solid;
  border-color: var(--pop-close-icon-color) transparent transparent
}

.currency-selector-wrap li {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 2.1333333333rem 0;
  list-style: none
}

.currency-selector-wrap li img {
  width: 8rem;
  margin-right: 3.2rem;
  border-radius: 50%;
  box-shadow: 0 0 .5333333333rem #000c
}

.currency-selector-wrap li span {
  font-size: 3.2rem;
  color: var(--pop-txt);
  margin-left: 0
}

.nav-category {
  padding: 0 1.0666666667rem 1.0666666667rem
}

.nav-category:before {
  background: transparent
}

.nav-category.nav-auto .slick-list .btn {
  min-width: 21.3333333333rem
}

.nav-category .btn {
  margin-top: 1.0666666667rem;
  padding: 1.0666666667rem 0;
  transition: background .05s ease-out
}

.nav-category .btn span {
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto;
  transition: all .3s;
  border-radius: 10.6666666667rem;
  opacity: 1;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  background-color: var(--nav-icon-normal-bg)
}

.nav-category .btn span.active {
  background-color: var(--nav-icon-active-bg)
}

.nav-category .btn.slick-current {
  border-radius: 1.3333333333rem;
  background: var(--nav-category-bg-active-circle)
}

.nav-category .btn p {
  margin: 1.0666666667rem;
  font-size: 2.6666666667rem;
  font-weight: 700
}

.nav-category.active {
  height: 8.5333333333rem !important;
  animation: slide-out-top .2s cubic-bezier(.55, .085, .68, .53) both
}

.nav-category.active .btn {
  margin-top: 1.3333333333rem
}

.nav-category.active .btn span {
  height: 0
}

.nav-category.active .btn p {
  display: block
}

@keyframes slide-out-top {
  0% {
    height: 6.4rem;
    opacity: 0
  }

  to {
    height: 8.5333333333rem;
    opacity: 1
  }
}

.nav-category.nav-column {
  padding: 1.0666666667rem
}

.nav-category.nav-column .btn {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  margin-top: 0
}

.nav-category.nav-column .btn span {
  margin: 1.0666666667rem auto 0
}

.nav-category.nav-column .btn p {
  width: calc(100% - 2.1333333333rem);
  padding: 0 1.0666666667rem;
  overflow: hidden
}

.nav-category.nav-column.active {
  height: var(--nav-category-active-height, 10.1333333333rem) !important;
  padding-top: 1.6rem
}

.nav-category.nav-column.active .btn {
  justify-content: center;
  margin-top: 0
}

.nav-category.nav-column.active span {
  margin: 0 auto
}

.nav-category.nav-column.active p {
  max-height: var(--nav-category-txt-height, 5.3333333333rem);
  margin: 0
}

.card1 li,
.card2 li {
  border-radius: 1.3333333333rem;
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.content-title {
  padding: 1.0666666667rem
}

.content-main .slick-slide {
  margin: 0 2.1333333333rem
}

.maintenance-row {
  display: grid;
  position: relative;
  grid-gap: 2.1333333333rem;
  grid-template-columns: calc(100% - 8rem - 2.1333333333rem) 6rem;
  margin: 2.1333333333rem
}

.maintenance-row h6 {
  display: flex;
  align-items: center;
  height: 8rem;
  background: var(--sa-maintenance-bg);
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%);
  padding: 1.0666666667rem 2.1333333333rem;
  border-radius: 1.3333333333rem;
  font-size: 3.2rem;
  line-height: 8rem
}

.maintenance-row h6 i {
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  margin-right: 2.1333333333rem;
  background: var(--sa-maintenance-icon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%
}

.maintenance-row h6 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sa-maintenance-txt);
  max-width: calc(100% - 6.4rem)
}

.maintenance-row h6 .error-code {
  margin-left: auto
}

.maintenance-row .info {
  position: relative;
  justify-content: flex-end;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--sa-maintenance-info-bg);
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

.maintenance-row .info:before {
  content: "?";
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  color: var(--sa-maintenance-info-icon-color);
  font-weight: 700;
  line-height: 8rem;
  text-align: center
}

.maintenance-row .tooltips {
  display: none;
  position: absolute;
  z-index: 3;
  top: 10.1333333333rem;
  right: 0;
  width: auto;
  max-width: 100%;
  padding: 2.1333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--sa-maintenance-info-tooltips-bg);
  color: var(--sa-maintenance-info-tooltips-txt);
  font-size: 3.2rem;
  line-height: 4.2666666667rem
}

.maintenance-row .tooltips:before {
  content: "";
  display: block;
  position: absolute;
  top: -1.6rem;
  right: 2.4rem;
  border-width: 0 1.6rem 1.6rem;
  border-style: solid;
  border-color: transparent transparent var(--sa-maintenance-info-tooltips-bg)
}

.maintenance-row .tooltips.active {
  display: block
}

.back-to-cricket-row {
  display: grid;
  grid-template-columns: 6.4rem calc(100% - 6.4rem);
  align-items: center;
  width: calc(100% - 4.2666666667rem);
  height: 8rem;
  margin: 2.1333333333rem;
  padding: 1.0666666667rem 2.1333333333rem;
  border-radius: 1.3333333333rem;
  background: var(--sa-back-to-cricket-bg);
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%);
  color: var(--sa-maintenance-info-tooltips-txt)
}

.back-to-cricket-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  color: var(--sa-maintenance-txt);
  font-size: 3.2rem
}

.back-to-cricket-row .tap-circle {
  position: relative
}

.back-to-cricket-row .tap {
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  background: var(--sa-back-tocricket-tap-icon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%
}

.back-to-cricket-row .circle-wave-1 {
  position: absolute;
  top: 0;
  left: .4rem;
  width: 1.6rem;
  height: 1.6rem;
  transform-origin: 45% 35%;
  border: .2666666667rem solid var(--sa-back-tocricket-tap-icon-color);
  border-radius: 50%;
  opacity: .25
}

.back-to-cricket-row .circle-wave-2 {
  position: absolute;
  top: -.5333333333rem;
  left: -.1333333333rem;
  width: 2.6666666667rem;
  height: 2.6666666667rem;
  transform-origin: 45% 35%;
  border: .2666666667rem solid var(--sa-back-tocricket-tap-icon-color);
  border-radius: 50%;
  opacity: .4
}

.sport-loader {
  position: relative
}

.sport-loader svg {
  position: absolute;
  width: 100%;
  height: 53.3333333333rem
}

.sport-loader circle {
  fill: var(--sa-loader-circle)
}

.sport-loader .target {
  position: absolute;
  animation: target-ball 3s infinite ease-in-out
}

.sport-loader .ball-wrap {
  position: absolute;
  width: 100%;
  height: 53.3333333333rem
}

.sport-loader .ball-wrap li {
  display: inline-block;
  position: absolute;
  top: calc(50% - 2.1333333333rem);
  width: 4.2666666667rem;
  height: 4.2666666667rem;
  transform-origin: center;
  animation: rotate-in-center infinite 2s cubic-bezier(.25, .46, .45, .94) both;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.sport-loader .basketball {
  animation-delay: .3s;
  left: calc(40% - 2.1333333333rem)
}

.sport-loader .soccer {
  animation-delay: .6s;
  left: calc(50% - 2.1333333333rem)
}

.sport-loader .cricket {
  animation-delay: .9s;
  left: calc(60% - 2.1333333333rem)
}

@keyframes tap {
  0% {
    transform: rotateX(0)
  }

  10% {
    transform: rotateX(15deg) rotateY(-10deg)
  }

  15% {
    transform: rotateX(25deg) rotateY(-10deg)
  }

  30% {
    transform: rotateX(0)
  }
}

@keyframes tap-circle {
  0% {
    transform: scale(0);
    opacity: 0
  }

  25% {
    transform: scale(1.05);
    opacity: .5
  }

  30% {
    transform: scale(1);
    opacity: .4
  }
}

@keyframes dot {
  50% {
    transform: translate(400%)
  }
}

@keyframes target-ball {
  0% {
    transform: translate(-15%)
  }

  50% {
    transform: translate(15%)
  }

  to {
    transform: translate(-15%)
  }
}

@keyframes rotate-in-center {
  0% {
    transform: rotate(-360deg)
  }

  to {
    transform: rotate(0)
  }
}

header .logo {
  width: 25.6rem;
  height: 13.3333333333rem
}

header.cricket,
header.member,
header.normal,
header.player {
  box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb, var(--offset-shadow), transparent 95%)
}

header.cricket .logo {
  left: 14.6666666667rem
}

header .header-right-btn-group {
  width: 53.3333333333rem
}

header .header-right-btn-group .header-right-link {
  width: 17.3333333333rem;
  height: 6.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap
}

header .header-right-btn-group .header-right-link:nth-child(2) {
  margin-left: .5rem
}

header .header-right-btn-group .language-select img {
  width: 6.4rem;
  height: 6.4rem
}

.pop-wrap .pop-laguage .pop-title h3 {
  color: #fff
}

.pop-wrap .pop-inner {
  background: var(pop-wrap-inner-for-custom, #ffffff)
}

.menu-btn {
  width: 8.5333333333rem;
  height: 8.5333333333rem;
  margin-left: .8rem;
  border-radius: 5px;
  box-shadow: 0 0 4px #ffffff80;
  opacity: .801223;
  background-image: linear-gradient(90deg, #0b2966, #030f26 100%, #030e23)
}

.menu-btn ul {
  width: 8.5333333333rem;
  height: 8.5333333333rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center
}

.menu-btn ul li {
  width: 5.3333333333rem;
  margin: .5333333333rem 0
}

.menu-btn ul li:nth-child(2) {
  width: 3.7333333333rem
}

.logo-box {
  width: 40rem
}

.nav-category .slick-current:before {
  background-color: transparent;
  box-shadow: none
}

.site-top .site-menu.no-deposit .f-logo-bg {
  width: 21.3333333333rem
}

.content-wrap.withdrawal .ani-box .before-amount .icon-account {
  background: linear-gradient(180deg, #ffc20f, #f4b600)
}

.content-wrap.withdrawal .ani-box .before-amount .player-account {
  color: #123ea1
}

.content-wrap.deposit .ani-box .after-amount .platform-logo {
  background: linear-gradient(180deg, #ffc20f, #f4b600)
}

.content-wrap.deposit .ani-box .after-amount .platform-name {
  color: #123ea1
}

.style-bank li input[type=checkbox]+label,
.style-bank li input[type=radio]+label {
  border-radius: 2.1333333333rem
}

.dialog-wrap .top-bar .bar-title {
  color: #fff
}

.dialog-wrap .top-bar .close:before,
.dialog-wrap .top-bar .close:after {
  background-color: #fff
}

@font-face {
  font-family: Bebas Neue;
  src: url(/font/BebasNeue-Regular.ttf)
}

.tag-recommond {
  height: 5.3333333333rem
}

.footer .footer-top .sponsor {
  flex: 1 0 100%
}

.footer .footer-top .sponsor ul li {
  display: grid;
  grid-template-columns: 8rem auto;
  grid-column-gap: 2.1333333333rem;
  margin: 0;
  font-size: 3.2rem
}

.footer .footer-top .sponsor ul li p {
  font-weight: 700
}

.footer .footer-top .sponsor ul li strong {
  font-size: 2.9333333333rem;
  font-style: italic
}

.footer .footer-top .sponsor ul li img {
  height: 8rem;
  grid-row: 1/span 2
}

.footer .footer-top .ambassadors ul,
.footer .footer-top .official-partner ul {
  padding: 2.1333333333rem;
  height: 26.1333333333rem
}

.footer .footer-top .ambassadors ul li,
.footer .footer-top .official-partner ul li {
  color: var(--footer-top-txt, #ffffff);
  font-size: 3.2rem
}

.footer .footer-top .ambassadors ul li img,
.footer .footer-top .official-partner ul li img {
  height: 8.5333333333rem;
  margin-bottom: 1.3333333333rem
}

.footer .footer-top .ambassadors {
  flex-grow: 1;
  margin-right: 2.1333333333rem
}

.footer .footer-top .ambassadors ul li p {
  font-weight: 700
}

.footer .footer-top .ambassadors ul li strong {
  font-size: 2.9333333333rem;
  font-style: italic
}

.footer .footer-top .official-partner {
  flex: 0 0 49.5%
}

.footer .footer-top .official-partner ul {
  align-items: flex-start
}

.float-banner .close {
  background-color: #fff
}

.searchpage-main .check-group {
  padding: 2.1333333333rem
}

.searchpage-main .check-group:nth-child(1) {
  border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.searchpage-main .check-group:nth-child(2) {
  border-radius: 0
}

.searchpage-main .check-group:last-child {
  border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.pop-transaction-records-details {
  background: transparent
}

.recommend-friends-list .prompt {
  color: var(--recommend-friends-prompt-txt, #ffffff)
}

.main-wallet-wrapper {
  padding: 4rem 2.6666666667rem 0px;
  background-color: var(--main-wallet-wrapper-bg, #0e2749)
}

.nextevent .title:before {
  margin-right: 2.1333333333rem
}

.main-wrapper {
  background: var(--main-wrapper-bg, #0e2749);
  padding-bottom: 2.6666666667rem
}

.marquee-wrapper .announcement-row .marquee ul li span p {
  color: var(--announvement-txt, #ffffff);
  font-family: Jost-Regular;
  font-weight: 400
}

.third-party-login .login-group label:hover {
  opacity: 1
}

.nextevent .title {
  color: var(--nextevent-title-txt, #ffffff)
}

.popup-page-main__close:after,
.popup-page-main__close:before {
  background-color: #fff
}

.app-download-content {
  padding-top: 0
}

#side-page .side-page-content {
  opacity: 1
}

.pwa-download {
  bottom: 0
}

.isLogin .pwa-download {
  bottom: 13.3333333333rem
}

.launch-game-content {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background .3s
}

.launch-game-content.active {
  background: #000
}

.launch-game-loading {
  display: none;
  position: fixed;
  z-index: 4;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 53.3333333333rem;
  pointer-events: none
}

.launch-game-loading.select-logo .center-logo-bg,
.launch-game-loading.select-slot .center-logo-bg,
.launch-game-loading.select-bn2 .center-logo-bg {
  background-color: var(--launch-bg);
  background-image: var(--launch-linear-bg)
}

.launch-game-loading.select-bn2 .center-logo-bg .center-logo {
  object-position: 0%
}

.launch-game-loading.select-mini-game-logo .center-logo-bg {
  background-color: var(--launch-bg);
  background-image: var(--launch-linear-bg)
}

.launch-game-loading.select-mini-game-logo .center-logo-bg .center-logo {
  object-position: 0%
}

.launch-game-loading .center-logo-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14.6666666667rem;
  height: 14.6666666667rem;
  padding: 1.0666666667rem;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background-image: var(--launch-linear-bg);
  box-shadow: .5333333333rem 2.1333333333rem 3.7333333333rem #0003, 0 .5333333333rem 1.0666666667rem #000, 0 .2666666667rem 8rem #7f7f7f, inset 0 .5333333333rem 1.0666666667rem #ffffffb3
}

.launch-game-loading .center-logo-bg .center-logo,
.launch-game-loading .center-logo-bg .brand-logo {
  width: 100%;
  height: 100%
}

.launch-game-loading .center-logo-bg .center-logo {
  border-radius: 100%;
  object-fit: cover
}

.launch-game-loading .center-logo-bg .brand-logo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center
}

.launch-game-loading .loader-round {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 21.3333333333rem;
  height: 21.3333333333rem;
  transform: translate(-50%, -50%);
  opacity: 0
}

.launch-game-loading .loading-bg {
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  background-image: linear-gradient(180deg, transparent 0%, #000000 100%)
}

.launch-game-loading svg {
  max-width: 100%;
  max-height: 100%;
  transform: rotate(-90deg)
}

.launch-game-loading .circle {
  animation-name: circle-loader;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  stroke-dashoffset: 2000;
  stroke-dasharray: 1680, 1650;
  animation-fill-mode: backwards
}

.launch-game-loading #dark {
  animation-name: circle-loader-dark;
  stroke: #ffffff40
}

.launch-game-loading #white {
  animation-name: circle-loader-white;
  animation-delay: .3s;
  stroke: url(#loading-bar-color)
}

.launch-game-loading #loading-bar-color .loading-stop-color {
  stop-color: var(--lanuch-stop-color)
}

.launch-game-loading #loading-bar-color .loading-end-color {
  stop-color: var(--lanuch-end-color)
}

@keyframes circle-loader-dark {
  0% {
    stroke-dasharray: 1685, 1574;
    stroke-dashoffset: 2000
  }

  35% {
    stroke-dashoffset: 3310
  }

  35.1% {
    stroke-dashoffset: 3600
  }

  70% {
    stroke-dasharray: 1574;
    stroke-dashoffset: 4719
  }

  to {
    stroke-dasharray: 1574;
    stroke-dashoffset: 4719
  }
}

@keyframes circle-loader-white {
  0% {
    stroke-dasharray: 1685, 1660;
    stroke-dashoffset: 2000
  }

  50% {
    stroke-dashoffset: 3310
  }

  50.1% {
    stroke-dashoffset: 3600
  }

  to {
    stroke-dasharray: 1574;
    stroke-dashoffset: 4719
  }
}

.site-top {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  pointer-events: all
}

.site-top .menu-bg {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: var(--launch-game-header-bg)
}

.site-top .menu-bg .highlight {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -2px 2.5px 0 var(--launch-menu-highlight-shadow-color01), inset 0 1px 3px 0 var(--launch-menu-highlight-shadow-color02)
}

.site-top .site-menu {
  display: flex;
  position: relative;
  z-index: 2;
  top: 50%;
  left: 50%;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  transform-origin: center
}

.site-top .site-menu .f-logo-bg {
  position: relative;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  margin: 0 2.1333333333rem;
  border-radius: 50%;
  opacity: 0;
  background-image: var(--launch-btn-bg);
  background-size: 100%
}

.site-top .site-menu .f-logo-bg .f-logo {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 80%
}

.site-top .site-menu .f-logo-bg .light-ring {
  position: absolute;
  z-index: 3;
  top: 0;
  width: 8.2666666667rem;
  height: 8.2666666667rem;
  opacity: .6;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  pointer-events: none;
  mix-blend-mode: overlay
}

.site-top .site-menu .info-wrap {
  position: relative;
  opacity: 0;
  width: 69.3333333333rem;
  height: 100%;
  padding-left: 4.8rem;
  transform: skew(-10deg);
  border-left: .5333333333rem solid var(--launch-info-border-left);
  letter-spacing: normal
}

.site-top .site-menu .info-wrap .info-block {
  position: absolute;
  width: -moz-fit-content;
  width: fit-content;
  top: 50%;
  height: 100%;
  line-height: 14px;
  transform: skew(10deg) translateY(-35%)
}

.site-top .site-menu .info-wrap .info-block .info-title {
  font-weight: 700;
  color: var(--launch-info-title);
  font-size: 10px
}

.site-top .site-menu .info-wrap .info-block .info-value {
  color: var(--launch-info-value);
  font-size: 12px
}

.site-top .site-menu .info-wrap .info-block .info-value-sub {
  color: var(--launch-info-value);
  padding-left: .8rem;
  opacity: 25%
}

.site-top .site-menu .btn {
  position: relative;
  width: 44px;
  height: 44px;
  opacity: 0;
  background: var(--launch-home-btn-bg)
}

.site-top .site-menu .btn .btn-home {
  width: 100%;
  height: 100%;
  background: var(--launch-home-btn-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70%
}

.site-top .site-menu .btn .btn-cross {
  position: relative;
  width: 100%;
  height: 100%
}

.site-top .site-menu .btn .btn-cross:after,
.site-top .site-menu .btn .btn-cross:before {
  content: "";
  display: block;
  height: 40%;
  width: 2px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  background-color: var(--launch-home-btn-icon-color);
  transform-origin: 50% 50%
}

.site-top .site-menu .btn .btn-cross:after {
  transform: translateY(-50%) rotate(-45deg)
}

.site-top .site-menu .btn .btn-cross:before {
  transform: translateY(-50%) rotate(45deg)
}

.site-top .site-menu .btn .btn-deposit {
  width: 100%;
  height: 100%;
  background: var(--launch-game-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 60%
}

.site-top .site-menu .btn .light-ring {
  position: absolute;
  z-index: 3;
  top: 0;
  width: 5.3333333333rem;
  height: 5.3333333333rem;
  opacity: .6;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  pointer-events: none;
  mix-blend-mode: overlay
}

.site-top .site-menu.no-deposit {
  flex-flow: row-reverse nowrap
}

.site-top .site-menu.no-deposit .f-logo-bg {
  position: relative;
  width: 17.8666666667rem;
  height: 6.6666666667rem;
  margin: 0 2.1333333333rem;
  border-radius: 0;
  opacity: 0;
  background-image: var(--launch-nodeposit-btn-bg);
  background-size: 100%;
  padding: 1px 0
}

.site-top .site-menu.no-deposit .f-logo-bg .light-ring {
  display: none
}

.site-top .site-menu.no-deposit .f-logo-bg .logo-image {
  background-size: contain;
  filter: drop-shadow(0 .5333333333rem 1.0666666667rem var(--launch-game-logo-shadow))
}

.site-top .site-menu.no-deposit .btn:nth-child(4) {
  display: none
}

.site-top .top-bg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-100%)
}

.site-top .top-bg.gradient {
  background-image: var(--lanuch-site-bg)
}

.launch-game-page {
  display: none;
  pointer-events: auto
}

.launch-game-wrap {
  position: absolute;
  z-index: 3;
  top: 44px;
  left: 0;
  width: 100%;
  height: calc(100% - 44px);
  transform: translateY(6%);
  opacity: 0;
  background-color: #000
}

.launch-game-wrap.show {
  transform: translate(0);
  opacity: 1
}

.launch-game-wrap .launch-game-iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0
}

.site-bg {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  background-image: linear-gradient(180deg, #333 10%, #ff840380);
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw)
}

.site-bg .effect {
  mix-blend-mode: overlay
}

.site-bg #Gradient .start-color {
  stop-color: #ffffff4d
}

.site-bg #Gradient .end-color {
  stop-color: #fff0
}

@media screen and (min-aspect-ratio: 16/9) {
  .site-top .site-menu.no-deposit .f-logo-bg {
    height: 3.748125937vmax;
    width: 10.0449775112vmax
  }
}

* {
  touch-action: pan-x pan-y
}

@media (display-mode: standalone) {
  body {
    overscroll-behavior: none
  }

  *:not(input):not(textarea) {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
  }
}

.loading-mask {
  position: fixed;
  display: flex;
  inset: 0;
  background-color: var(--content-bg);
  justify-content: center;
  align-items: center;
  z-index: 9001
}

.loader-box {
  z-index: 9002;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.loader-box video {
  width: 80px
}

header {
  transition: all 0s
}

.wrap {
  display: block;
  position: inherit;
  inset: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: cubic-bezier(.075, .82, .165, 1)
}

.tab.search-tab {
  z-index: 2
}

.language-select-area .language-area {
  margin: 0 .8rem
}

.player-vip-detailed-box .section-wrap {
  display: block;
  height: 100%;
  transition: all .3s ease;
  width: 100%
}

.footer {
  transition: .3s all
}

.footer.hide {
  opacity: 0
}

.player-vip-detailed-menu {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch
}

.player-vip-detailed-menu::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none
}

.player-vip-detailed-menu .btn-wrap {
  display: inline-flex
}

.player-vip-detailed-menu .btn-wrap .btn {
  min-width: 24rem
}

.login-info-box .error-message-box {
  flex: 1 0 60%
}

.login-info-box .forgetpassword-buttn {
  margin-top: 3px
}

.btn-select.only:hover,
.btn-select.disabled:hover {
  opacity: 1;
  cursor: default
}

.btn-select.only:after,
.btn-select.disabled:after {
  display: none
}

.popup-page-wrapper {
  display: block;
  position: relative;
  text-align: center;
  z-index: 110
}

.third-party-login.member-content.new-profile,
.third-party-login.member-content.new-login,
.third-party-login.verify-code {
  min-height: 100% !important
}

html.is-mobile .popup-page.show-toolbar,
html.is-mobile .popup-page.show-toolbar .popup-page__backdrop {
  height: calc(100% - 13.3333333333rem)
}

.carousel-wrap {
  display: block;
  position: relative;
  width: auto;
  overflow: hidden;
  max-width: 100rem;
  margin: auto;
  height: 100%
}

html.is-desktop .carousel-wrap {
  max-width: none
}

.carousel-wrap.style-init .item-drag .item-left {
  width: inherit;
  transform: translate(-250%, -50%)
}

.carousel-wrap.style-init .item-drag .item-wrap {
  width: inherit
}

.carousel-wrap.style-init.siblings .item-drag .item-left {
  transform: translate(-175%, -50%)
}

.carousel-wrap.style-init.siblings .item-drag .item {
  width: 70%
}

.carousel-wrap .item-drag {
  display: block;
  margin: auto;
  padding-top: 35%;
  width: 100%;
  height: 100%
}

.carousel-wrap .item-drag .item-left {
  display: block;
  width: inherit;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%
}

.carousel-wrap .item-drag .item-left .item-wrap {
  display: block;
  position: relative;
  height: 100%;
  white-space: nowrap;
  line-height: 0
}

.carousel-wrap .item {
  display: inline-block;
  position: relative;
  padding: 2.4rem 2.4rem 7.2rem;
  width: 100%;
  height: 100%;
  margin: auto;
  color: #221919;
  opacity: 1;
  overflow: hidden
}

.carousel-wrap .item .item-pic {
  display: block;
  position: relative;
  margin: auto;
  height: 100%;
  border-radius: 1.3333333333rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
  transform-origin: center;
  transition: all .3s
}

.carousel-wrap.siblings .item {
  padding: 1.3333333333rem 1.3333333333rem 3.4666666667rem
}

.carousel-wrap.siblings .item .item-pic {
  border-radius: 1.3333333333rem
}

.carousel-wrap.siblings .item .item-pic.focus {
  box-shadow: 0 .5333333333rem 3.2rem #00000059;
  transform: translateY(-2px)
}

.carousel-wrap.siblings .dot-group {
  bottom: 0
}

.carousel-wrap.singlefull .item {
  padding: 0
}

.carousel-wrap.singlefull .item .item-pic {
  border-radius: 0
}

.carousel-wrap.singlefull .item .item-pic.focus {
  transform: scale(1.05)
}

.carousel-wrap.singlefull .dot-group {
  bottom: 0
}

.dot-group {
  display: flex;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 3.2rem;
  left: 0;
  z-index: 1
}

.dot-group.style-dot li {
  display: block;
  margin-right: 1.0666666667rem;
  margin-left: 1.0666666667rem;
  width: 2.1333333333rem;
  height: 2.1333333333rem;
  background: var(--event-slick-dot);
  border-radius: 50%;
  transition: .3s;
  cursor: pointer
}

.dot-group.style-dot li:hover {
  background: var(--event-slick-dot)
}

.dot-group.style-dot li.active {
  background: var(--event-slick-dot-active)
}

.dot-group.style-bar {
  padding: 1.8666666667rem 0 .8rem
}

.dot-group.style-bar li {
  display: block;
  margin: 0 .8rem;
  width: 5.3333333333rem;
  height: .5333333333rem;
  background: #ffffff80;
  border-radius: 1.3333333333rem;
  overflow: hidden
}

.dot-group.style-bar li:hover .dot-progress,
.dot-group.style-bar li.active .dot-progress {
  animation-name: dot-ani;
  background: #fff
}

.dot-group.style-bar li .dot-progress {
  display: block;
  width: 100%;
  height: 100%
}

.button-prev,
.button-next {
  padding: 15px 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .3s;
  border-radius: 3px;
  cursor: pointer;
  position: absolute;
  z-index: 1
}

.button-prev {
  left: 0
}

.button-next {
  right: 0;
  transform: translateY(-50%) rotateY(180deg)
}

.button-prev:hover,
.button-next:hover {
  opacity: .7
}

.button-prev img,
.button-next img {
  display: block;
  max-width: 50px
}

@keyframes dot-ani {
  0% {
    transform: translate(-100%)
  }

  to {
    transform: translate(0)
  }
}

.carousel-wrap.debug {
  border: 1px solid white;
  overflow: visible
}

.carousel-wrap.debug .item-drag {
  border: 1px solid red
}

.carousel-wrap.debug .item-drag .item-left {
  border: 1px solid yellow
}

.carousel-wrap.debug .item-drag .item-left .item-wrap {
  border: 1px solid blue
}

.carousel-wrap.debug .button-prev,
.carousel-wrap.debug .button-next {
  background-color: #fff3
}

.carousel-wrap.debug .item {
  border: 1px solid olive
}

.carousel-wrap.debug .item .item-pic {
  border: 1px solid purple
}

.nav-wrap {
  overflow: hidden
}

.nav-wrap .nav-content-wrap {
  display: block;
  width: 100%;
  overflow: visible
}

.nav-wrap .nav-content-wrap .nav-content-inner {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
  transition: all .3s ease-in-out
}

.nav-wrap .nav-content-wrap .content-box {
  display: block;
  position: relative;
  width: 100%;
  flex-shrink: 0;
  max-height: 10000px;
  transition: all .5s ease-in-out
}

.nav .btn.selected {
  background-color: #222;
  border-radius: 1.3333333333rem
}

.nav .btn.selected p {
  color: #fff
}

.nav .btn.selected:before {
  box-shadow: 0 .5333333333rem 1.3333333333rem #0000004d
}

.nav .btn.selected:after {
  display: block
}

.nav.nav-auto {
  display: flex;
  overflow: auto
}

.nav.nav-auto .btn {
  width: auto;
  min-width: 21.3333333333rem
}

.layout-brand {
  padding: 0 2.1333333333rem
}

.loading .nav-category {
  height: 18.1333333333rem
}

.loading .nav-category.active {
  height: auto
}

.loading .announcement-row {
  height: 8rem
}

.loading .nav-wrap {
  min-height: 132rem
}

.loading mcd-marquee {
  display: block;
  height: 8.8rem
}

.loading mcd-scroll-banner {
  display: block;
  height: 56.5333333333rem;
  width: auto
}

.loading mcd-feature-games {
  display: block;
  height: 53.3333333333rem;
  width: auto
}

.loading mcd-icon-marquee {
  display: block;
  height: 25.8666666667rem;
  width: auto
}

.mcd-date-picker .cdk-global-overlay-wrapper {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px)
}

.mcd-date-picker .mat-datepicker-content {
  border-radius: 1.3333333333rem;
  background-color: unset;
  background: var(--date-picker-calendar-bg);
  box-shadow: 0 4.2666666667rem 2.1333333333rem var(--date-picker-calendar-shadow), inset 0 .2666666667rem .5333333333rem var(--date-picker-calendar-shadow-inset);
  border: .2666666667rem solid var(--date-picker-calendar-border)
}

.mcd-date-picker .mat-calendar-body-cell-content,
.mcd-date-picker .mat-calendar-body-label,
.mcd-date-picker .mat-mdc-button:not(:disabled),
.mcd-date-picker .mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled),
.mcd-date-picker .mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled) {
  color: var(--date-picker-calendar-table-txt)
}

.mcd-date-picker .mat-datepicker-content-touch .mat-datepicker-content-container {
  max-width: 375px;
  height: -moz-fit-content;
  height: fit-content
}

.mcd-date-picker .mat-calendar-body-label {
  vertical-align: middle
}

.mcd-date-picker .mat-calendar-body-selected {
  background: var(--date-picker-calendar-selected-bg);
  box-shadow: 0 .2666666667rem .5333333333rem var(--date-picker-calendar-selected-shadow), inset 0 0 .8rem var(--date-picker-calendar-selected-shadow-inset);
  border-width: 0;
  color: var(--date-picker-calendar-selected-txt)
}

.mcd-date-picker .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  border-color: var(--date-picker-calendar-today-border)
}

.mcd-date-picker .mat-calendar-table-header th {
  font-weight: 700;
  color: var(--date-picker-calendar-table-title)
}

.mcd-date-picker .mat-calendar-arrow {
  fill: var(--date-picker-calendar-arrow-icon)
}

.mcd-date-picker .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.mcd-date-picker .mat-mdc-icon-button:disabled {
  color: var(--date-picker-calendar-today-txt-disabled)
}

.cdk-overlay-container {
  z-index: 9000
}

.dialog-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .4s;
  background-color: var(--content-bg);
  -webkit-overflow-scrolling: touch;
  z-index: 7999
}

.dialog-wrap .dialog-wrap-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #00000080;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 1
}

.dialog-wrap .dialog-wrap-inner {
  border-radius: 1.3333333333rem;
  overflow: hidden;
  position: absolute;
  background-color: var(--content-bg);
  width: 100rem;
  z-index: 2
}

.dialog-wrap .dialog-wrap-inner:host-context(html.is-desktop) {
  height: calc(100% - 53.3333333333rem);
  margin: auto;
  inset: 0
}

.dialog-wrap .close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  border-radius: 0 0 0 100%
}

.dialog-wrap .close:before,
.dialog-wrap .close:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.3333333333rem;
  height: .5333333333rem;
  margin: -.2666666667rem 0 0 -2.6666666667rem;
  border-radius: .5333333333rem;
  background-color: var(--header-bg)
}

.dialog-wrap .close:before {
  transform: rotate(45deg)
}

.dialog-wrap .close:after {
  transform: rotate(-45deg)
}

.top-bar {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.3333333333rem;
  overflow: hidden;
  transition: all .3s;
  background: var(--header-bg);
  z-index: 2
}

.top-bar .bar-title {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translate(-50%);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 4.8rem;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pop-title)
}

.top-bar .close:before,
.top-bar .close:after {
  background-color: var(--pop-title)
}

.dialog-overlay-desktop {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100rem;
  max-height: 700px;
  overflow: hidden;
  transform: translate(-50%, -50%)
}

@supports (height: 100dvh) {
  .dialog-overlay-desktop {
    height: calc(100dvh - 16rem)
  }
}

@supports not (height: 100dvh) {
  .dialog-overlay-desktop {
    height: calc(100vh - 16rem)
  }
}

.dialog-overlay-desktop .popup {
  position: absolute;
  top: 50%;
  right: 50%;
  max-height: 100%;
  border-radius: 2.6666666667rem;
  transform: translate(50%, -50%);
  width: 100rem;
  overflow: hidden
}

@supports (height: 100dvh) {
  .dialog-overlay-desktop .popup {
    height: calc(100dvh - 16rem)
  }
}

@supports not (height: 100dvh) {
  .dialog-overlay-desktop .popup {
    height: calc(100vh - 16rem)
  }
}

.back-bar {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.3333333333rem;
  overflow: hidden;
  transition: all .3s;
  background: var(--header-bg)
}

.back-bar .bar-title {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  transform: translate(-50%);
  color: var(--header-title);
  font-size: 4.2666666667rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap
}

.back-bar__arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  transform: rotate(90deg);
  z-index: 1
}

.back-bar__arrow .item-icon {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--header-back-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 20%;
  z-index: 2
}

.date-bar .date-input .mat-mdc-form-field {
  width: 100%
}

.date-bar .date-input .mat-mdc-text-field-wrapper {
  background: var(--recommend-input-bg)
}

.date-bar .date-input .mat-mdc-form-field-flex,
.date-bar .date-input .mat-mdc-form-field-infix {
  height: 8rem
}

.date-bar .date-input .mat-mdc-form-field-infix {
  min-height: unset
}

.date-bar .date-input .mat-mdc-form-field-infix input {
  font-size: 3.4666666667rem
}

.date-bar .date-input .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
  padding: 0;
  display: inline-flex
}

.date-bar .date-input .mdc-line-ripple,
.date-bar .date-input .mat-mdc-form-field-subscript-wrapper {
  display: none
}

.date-bar .date-input .mdc-text-field {
  border-radius: 1.3333333333rem
}

.date-bar .date-input .mdc-text-field__input {
  height: 100%
}

.date-bar .date-input .mdc-icon-button svg {
  fill: var(--color-rf-statusbox-input-date-text)
}

.date-bar .date-input .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 30px;
  --mdc-icon-button-icon-size: 20px;
  padding: 5px
}

.date-bar .date-input .mat-mdc-icon-button .mat-mdc-button-touch-target {
  padding: 1.3333333333rem;
  height: var(--mdc-icon-button-state-layer-size);
  width: var(--mdc-icon-button-state-layer-size)
}

.date-bar .date-input .mat-mdc-form-field-icon-suffix {
  width: 12rem
}

.date-bar .date-input .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
  color: var(--color-rf-statusbox-input-date-text)
}

.input-group .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  --mdc-icon-button-icon-size: 20px;
  padding: 10px
}

.input-group .mat-mdc-icon-button .mat-mdc-button-touch-target {
  padding: 1.3333333333rem;
  height: var(--mdc-icon-button-state-layer-size);
  width: var(--mdc-icon-button-state-layer-size)
}

.input-group .mdc-icon-button svg {
  fill: var(--form-txt)
}

.limit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 8.5333333333rem);
  margin: auto;
  padding: 4.2666666667rem;
  padding-top: 0;
  color: var(--limit-title);
  font-family: var(--custom-font), var(--custom-serif)
}

.limit-content .logo-box {
  width: 18.6666666667rem;
  height: 18.6666666667rem;
  margin: 0 auto;
  background: no-repeat center/contain
}

.limit-content h1 {
  margin: 2.1333333333rem 0;
  font-size: 8rem;
  font-weight: 600;
  text-align: center
}

.limit-content h2 {
  color: var(--limit-time-txt);
  font-size: 8rem;
  font-weight: 500
}

.limit-content h3 {
  margin: 2.1333333333rem 0;
  color: var(--limit-timezone-txt);
  font-size: 3.7333333333rem;
  font-weight: 500
}

.limit-content h4 {
  margin: 4.2666666667rem 0;
  color: var(--limit-txt);
  font-size: 3.7333333333rem;
  font-weight: 500;
  line-height: 5.3333333333rem;
  text-align: center
}

.limit-content span {
  color: var(--limit-ip-txt);
  font-size: 3.7333333333rem;
  line-height: 5.3333333333rem
}

.limit-content video {
  width: 80%;
  max-width: 280px;
  margin: 8rem 0
}

.limit-content .sm {
  width: 60%
}

.limit-content .img-not-found {
  width: 80%;
  max-width: 280px;
  margin: 8rem 0
}

.limit-content .img-for-ios {
  width: 60%;
  margin: 8rem 0
}

.limit-content .btn-box {
  margin: auto;
  max-width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 4.2666666667rem 0 0;
  text-align: right
}

.limit-content .btn-box .button {
  display: inline-block;
  flex: 1;
  width: 100%;
  max-width: 100%;
  margin: 2.6666666667rem;
  padding: 0 2.6666666667rem
}

.limit-content .btn-box.other-choice {
  margin-top: 0
}

body {
  flex-direction: column;
  font-family: var(--custom-font), var(--custom-serif);
  font-weight: 400
}

@supports (height: 100dvh) {
  body {
    min-height: 100dvh
  }
}

@supports not (height: 100dvh) {
  body {
    min-height: 100vh
  }
}

body {
  background-color: var(--content-bg)
}

.reset-password-page header {
  display: flex;
  position: fixed;
  top: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.3333333333rem;
  overflow: hidden;
  transition: all .3s;
  background-color: var(--primary)
}

.reset-password-page header .logo {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  width: 26.6666666667rem;
  height: 100%;
  margin: 0 auto;
  transform: translate(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  text-indent: -2666.4rem
}

.reset-password-page .content {
  background-color: var(--content-bg);
  background-repeat: no-repeat;
  background-position: top 0 right 60%;
  font-family: var(--custom-font), var(--custom-serif);
  text-align: center
}

.reset-password-page .content .lock {
  width: 43%;
  height: auto;
  margin: 17.6rem auto 0
}

.reset-password-page .content .reset-password-txt {
  width: 90%;
  max-width: 94.6666666667rem;
  margin: 0 auto;
  padding: 4.2666666667rem 0
}

.reset-password-page .content .reset-password-txt p {
  color: var(--reset-password-txt);
  font-size: 3.7333333333rem;
  font-weight: 500;
  line-height: 1.6
}

.reset-password-page .tips-info {
  position: relative;
  flex: 1;
  margin: 4.2666666667rem 0;
  padding: 4.2666666667rem;
  border: .2666666667rem solid var(--tips-info-border);
  border-radius: 2.6666666667rem;
  background-color: var(--tips-info-bg);
  text-align: left;
  white-space: normal
}

.reset-password-page .tips-info .title-box {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2.1333333333rem
}

.reset-password-page .tips-info h5 {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 92%;
  color: var(--tips-info-title)
}

.reset-password-page .tips-info h5:before {
  content: "!";
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin-right: 2.6666666667rem;
  border-radius: 50%;
  background-color: var(--tips-info-title);
  color: var(--tips-info-bg);
  text-align: center
}

.reset-password-page .tips-info h5 span {
  display: inline-block;
  flex: 1;
  width: calc(100% - 13.3333333333rem);
  vertical-align: text-top
}

.reset-password-page .tips-info a {
  text-decoration: none
}

.reset-password-page .tips-info p,
.reset-password-page .tips-info b {
  display: block;
  padding-bottom: 5px;
  color: var(--tips-info-title);
  font-size: 3.2rem;
  line-height: 1.2;
  text-align: left
}

.reset-password-page .tips-info i {
  padding: 0 .8rem;
  color: var(--tips-info-i);
  font-weight: 700
}

.reset-password-page .tips-info ol,
.reset-password-page .tips-info ol li {
  list-style: decimal outside
}

.reset-password-page .tips-info ul,
.reset-password-page .tips-info ul li {
  list-style: disc outside
}

.reset-password-page .tips-info ul,
.reset-password-page .tips-info ol {
  display: block;
  width: 100%;
  padding-left: 4rem;
  color: var(--tips-info-title);
  font-size: 3.2rem;
  line-height: 1.5;
  text-align: left
}

.reset-password-page .tips-info li {
  display: list-item
}

.reset-password-page .menu-box {
  position: relative;
  height: auto;
  margin: 4.2666666667rem;
  padding: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--form-box-bg)
}

.reset-password-page .input-group {
  display: flex;
  position: relative;
  flex-direction: column;
  padding-bottom: 3.2rem;
  font-size: 3.2rem;
  line-height: 1.5
}

.reset-password-page .input-group label {
  position: relative;
  height: 6.4rem;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 3.7333333333rem
}

.reset-password-page .input-group input {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333rem;
  padding: 0 11.7333333333rem 0 4.2666666667rem;
  transition: background .3s;
  border: .2666666667rem solid var(--form-input-bg);
  border-radius: 2.6666666667rem;
  background: var(--form-input-bg);
  color: var(--form-input-txt);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.8rem;
  font-weight: 400
}

.reset-password-page .input-group input::placeholder {
  color: var(--form-input-txt-placeholder)
}

.reset-password-page .input-group input:focus {
  border: .2666666667rem solid var(--form-input-border-focus)
}

.reset-password-page .input-group input:disabled {
  background: var(--form-input-bg-disabled);
  color: var(--form-input-txt-disabled)
}

.reset-password-page .input-group .clear {
  position: absolute;
  top: 6.4rem;
  right: 0;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  padding: 0;
  opacity: 0;
  background: var(--form-clear-icon-color);
  color: transparent;
  mask: url(/assets/images/icon-set/icon-cross-type09.svg) no-repeat center/30%;
  -webkit-mask: url(/assets/images/icon-set/icon-cross-type09.svg) no-repeat center/30%
}

.reset-password-page .input-group .clear.active {
  opacity: 1
}

.reset-password-page .input-group .eyes {
  position: absolute;
  z-index: 1;
  top: 6.4rem;
  right: 0;
  width: 11.7333333333rem;
  height: 11.7333333333rem;
  transform: none;
  background: var(--form-eyes-icon-color);
  mask: var(--form-eyes-close-icon) no-repeat center/50%;
  -webkit-mask: var(--form-eyes-close-icon) no-repeat center/50%
}

.reset-password-page .input-group .eyes.active {
  mask: var(--form-eyes-open-icon) no-repeat center/50%;
  -webkit-mask: var(--form-eyes-open-icon) no-repeat center/50%
}

.reset-password-page .input-group.password .clear {
  right: 11.7333333333rem
}

.reset-password-page .button {
  position: relative;
  width: calc(100% - 8.5333333333rem);
  height: 13.3333333333rem;
  margin: 4.2666666667rem;
  border-radius: 2.6666666667rem;
  background: var(--btn-main-bg);
  color: var(--btn-main-txt);
  font-size: 5.3333333333rem;
  font-weight: 500;
  line-height: 13.3333333333rem;
  text-align: center
}

.reset-password-page .button a {
  display: block;
  padding: 0 4rem;
  overflow: hidden;
  color: var(--btn-main-txt);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap
}

.reset-password-page .accordion-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2.1333333333rem 2.1333333333rem 0;
  overflow: hidden;
  border-radius: 1.3333333333rem;
  background: var(--accordion-bg)
}

.reset-password-page .accordion-wrap.show .a-content {
  height: 100%;
  max-height: 80rem;
  opacity: 1
}

.reset-password-page .accordion-wrap.show .a-arrow {
  transform: rotate(180deg);
  transform-origin: center
}

.reset-password-page .accordion-wrap .a-title {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4.2666666667rem;
  background: var(--accordion-title-bg);
  color: var(--accordion-title);
  font-size: 4rem;
  text-align: left
}

.reset-password-page .accordion-wrap .a-title:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -.2666666667rem;
  width: calc(100% - 8.5333333333rem);
  height: .2666666667rem;
  background-image: linear-gradient(to right, var(--accordion-dot) 0%, var(--accordion-dot) 10%, transparent 10%);
  background-repeat: repeat-x;
  background-size: 2.6666666667rem 2.6666666667rem
}

.reset-password-page .accordion-wrap .a-title .a-text {
  flex-grow: 1;
  font-weight: 500
}

.reset-password-page .accordion-wrap .a-title .a-icon {
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  margin-right: 4.2666666667rem;
  background: var(--accordion-info-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%
}

.reset-password-page .accordion-wrap .a-title .a-arrow {
  width: 3.7333333333rem;
  height: 3.7333333333rem;
  transition: all .3s;
  background: var(--accordion-arrow-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70%
}

.reset-password-page .accordion-wrap .a-content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s, opacity .5s;
  opacity: 0;
  color: var(--accordion-txt);
  text-align: left
}

.reset-password-page .accordion-wrap .a-content ol.a-list {
  padding: 4.2666666667rem 4.2666666667rem 4.2666666667rem 8.5333333333rem
}

.reset-password-page .accordion-wrap .a-content .a-list {
  padding: 4.2666666667rem 0 0;
  list-style: auto
}

.reset-password-page .accordion-wrap .a-content .a-item {
  padding: 1.0666666667rem 0;
  font-size: 3.7333333333rem;
  font-weight: 400;
  line-height: 1.3
}

.reset-password-page .error .a-arrow {
  display: none
}

.top-banner-wrapper {
  margin-top: 3.2rem
}

.top-banner-wrapper .banner .carousel-wrap {
  display: flex;
  align-items: center;
  max-width: none;
  height: 300px
}

.top-banner-wrapper .banner .carousel-wrap .carousel-frame-alpha-container {
  max-width: 1200px;
  margin: 0 auto
}

.top-banner-wrapper .banner .carousel-wrap .item {
  height: 300px;
  border-radius: 1.3333333333rem
}

.top-banner-wrapper .banner .carousel-wrap .item .item-pic {
  height: 300px
}

::-webkit-scrollbar {
  width: 1.3333333333rem;
  height: 1.3333333333rem
}

::-webkit-scrollbar-thumb {
  background: #5555554d;
  border-radius: 1.3333333333rem
}

::-webkit-scrollbar-thumb:hover {
  background: #5555554d
}

::-webkit-scrollbar-track {
  background: transparent
}

.nav-wrap .nav-content-wrap .nav-content-inner {
  transition: all .75s ease-in-out
}

.layout-brand {
  padding: 0
}

.layout-desktop__content .tab.search-tab,
.layout-desktop__content .tab.filter-tab {
  width: 100%;
  margin: 4.2666666667rem auto
}

.layout-desktop__content .tab.search-tab ul li,
.layout-desktop__content .tab.filter-tab ul li {
  cursor: pointer;
  opacity: 1
}

.layout-desktop__content .tab.search-tab ul li:hover,
.layout-desktop__content .tab.filter-tab ul li:hover {
  opacity: .7
}

.layout-desktop__content .tab.search-tab ul li label,
.layout-desktop__content .tab.filter-tab ul li label {
  cursor: pointer;
  opacity: 1
}

.layout-desktop__content .tab.search-tab ul li label:hover,
.layout-desktop__content .tab.filter-tab ul li label:hover {
  opacity: .7
}

.layout-desktop__content .tab ul li {
  min-width: 24.8rem
}

.layout-desktop__content .tab .btn {
  cursor: pointer;
  opacity: 1
}

.layout-desktop__content .tab .btn:hover {
  opacity: .7
}

.layout-desktop__content .tab .btn span {
  mask-size: 32%;
  -webkit-mask-size: 32%
}

.sort-bar {
  margin: 0 0 4.2666666667rem
}

.layout-desktop__content .select-group [type=checkbox]+label,
.layout-desktop__content .select-group [type=radio]+label {
  padding: 0 4rem;
  font-size: 3.4666666667rem;
  line-height: 10.6666666667rem
}

.popup-page-main {
  width: 100rem;
  max-height: 700px;
  border-radius: 2.6666666667rem
}

@supports (height: 100dvh) {
  .popup-page-main {
    height: calc(100dvh - 16rem)
  }
}

@supports not (height: 100dvh) {
  .popup-page-main {
    height: calc(100vh - 16rem)
  }
}

.popup-page-main .tab.search-tab ul li,
.popup-page-main .tab.filter-tab ul li {
  cursor: pointer;
  opacity: 1
}

.popup-page-main .tab.search-tab ul li:hover,
.popup-page-main .tab.filter-tab ul li:hover {
  opacity: .7
}

.popup-page-main .tab.search-tab ul li label,
.popup-page-main .tab.filter-tab ul li label {
  cursor: pointer;
  opacity: 1
}

.popup-page-main .tab.search-tab ul li label:hover,
.popup-page-main .tab.filter-tab ul li label:hover {
  opacity: .7
}

html,
body {
  height: 100%
}

.main-router-wrapper {
  display: contents
}

/* body {
  overflow: hidden
} */

.layout-desktop__content .button {
  cursor: pointer;
  opacity: 1
}

.layout-desktop__content .button:hover {
  opacity: .7
}

.layout-desktop .cricket-container {
  width: 480px;
  margin: 0 auto;
  background: var(--content-bg);
  z-index: 0
}

.layout-desktop .cricket-maintenance-container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--content-bg)
}

.layout-desktop .main-wrapper,
.layout-desktop .content-box {
  max-width: var(--layout-desktop-content-max-width, 1200px);
  width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
  transition: width 1s;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto
}

.get-vcode-btn,
.btn-closed,
.btn-close,
.bank-info-copy,
.checkbox-agree,
.float-wrap__btn,
.right-language-area li,
.button,
.editor__btn,
.editor-menu li,
.editor-check li,
.message-item,
.tab-btn .btn {
  cursor: pointer;
  opacity: 1
}

.get-vcode-btn:hover,
.btn-closed:hover,
.btn-close:hover,
.bank-info-copy:hover,
.checkbox-agree:hover,
.float-wrap__btn:hover,
.right-language-area li:hover,
.button:hover,
.editor__btn:hover,
.editor-menu li:hover,
.editor-check li:hover,
.message-item:hover,
.tab-btn .btn:hover {
  opacity: .7
}

.footer-top {
  max-width: 1200px
}

.footer-top .license,
.footer-top .safe {
  flex: 0 0 49.5%
}

.footer-top .footer-social ul {
  grid-template-columns: repeat(25, 1fr)
}

.footer-top .about-us ul {
  display: flex
}

.footer-top .about-us ul li {
  max-width: 150px
}

.float-banner {
  bottom: 30px;
  left: 30px
}

.float-banner .close {
  cursor: pointer;
  opacity: 1
}

.float-banner .close:hover {
  opacity: .7
}

.float-banner img {
  min-width: 120px;
  min-height: 120px;
  max-width: 240px;
  max-height: 240px;
  cursor: pointer
}

.pop-wrap {
  max-width: 450px
}

.pop-bg {
  -webkit-backdrop-filter: blur(.8vw);
  backdrop-filter: blur(.8vw)
}

.pop-wrap3 {
  max-width: 375px
}

.pop-language {
  width: 100%;
  height: auto;
  border-radius: 2.6666666667rem;
  overflow: hidden
}

@supports (height: 100dvh) {
  .pop-language {
    max-height: 90dvh
  }
}

@supports not (height: 100dvh) {
  .pop-language {
    max-height: 90vh
  }
}

@supports (height: 100dvh) {
  .pop-language .pop-inner {
    max-height: calc(90dvh - 13.3333333333rem)
  }
}

@supports not (height: 100dvh) {
  .pop-language .pop-inner {
    max-height: calc(90vh - 13.3333333333rem)
  }
}

.pop-reset-password,
.pop-account-lock {
  top: 50%;
  left: 50%;
  bottom: unset;
  max-width: 500px;
  transform: translate(-50%, -50%)
}

.pop-reset-password .btn-close,
.pop-account-lock .btn-close {
  position: absolute;
  display: inline-block;
  z-index: 1;
  top: 0;
  right: 0;
  width: 13.3333333333rem;
  height: 13.3333333333rem;
  transition: .5s;
  background: var(--pop-lock-close-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 25%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 25%
}

.layout-desktop__content .searchpage {
  display: flex;
  flex-direction: column;
  top: var(--header-desktop-height, 60px);
  bottom: 0;
  width: 450px;
  border: 2px solid var(--desktop-searchpage-border);
  border-radius: 1.3333333333rem;
  box-shadow: 1px 2.6px 3.6px #00000023, 2.6px 7.1px 10px #00000032, 6.3px 17.2px 24.1px #00000041, 21px 57px 80px #00000063
}

.layout-desktop__content .searchpage .button {
  font-size: 16px
}

.layout-desktop__content .search-top-info {
  flex: none;
  height: 60px
}

.layout-desktop__content .search-top-info .back {
  width: 60px;
  transform: rotate(180deg);
  cursor: pointer;
  opacity: 1
}

.layout-desktop__content .search-top-info .back:hover {
  opacity: .7
}

.layout-desktop__content .search-top-info input {
  border-radius: 5px
}

.layout-desktop__content .search-top-info .icon-search {
  width: 60px;
  cursor: pointer;
  opacity: 1
}

.layout-desktop__content .search-top-info .icon-search:hover {
  opacity: .7
}

.layout-desktop__content .searchpage-main {
  position: relative;
  padding: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 5px
}

.layout-desktop__content .searchpage-main h2 {
  margin-bottom: 2.6666666667rem;
  font-size: 14px
}

.layout-desktop__content .searchpage-main .check-group {
  padding: 5.3333333333rem
}

.layout-desktop__content .check-group {
  background: var(--pop-search-inner-bg)
}

.layout-desktop__content .check-group:nth-child(1) {
  border-radius: 5px 5px 0 0
}

.layout-desktop__content .check-group:last-child {
  border-radius: 0 0 5px 5px
}

.layout-desktop__content .search-checkbox-group ul {
  grid-gap: 8px;
  margin-bottom: 0
}

.layout-desktop__content .search-checkbox-group [type=checkbox]+label,
.layout-desktop__content .search-checkbox-group [type=radio]+label {
  padding: 0 4rem;
  cursor: pointer;
  opacity: 1
}

.layout-desktop__content .search-checkbox-group [type=checkbox]+label:hover,
.layout-desktop__content .search-checkbox-group [type=radio]+label:hover {
  opacity: .7
}

.layout-desktop__content .searchpage-bar {
  position: relative;
  right: auto;
  top: auto;
  transform: translate(0);
  padding: 0 15px 35px
}

.layout-desktop__content .searchpage-bar.active {
  right: auto
}

.card1 ul,
.card2 ul {
  grid-gap: 8px;
  grid-template-columns: repeat(8, minmax(0, 1fr))
}

.card1 li img,
.card2 li img {
  margin: 8px auto;
  width: 30px
}

.card1 li p,
.card2 li p {
  padding: 0 5px 8px
}

.card1 li .icon-all-provider,
.card2 li .icon-all-provider,
.icon-sport {
  width: 30px;
  height: 30px;
  margin: 8px auto
}

.mcd-style .nextevent {
  padding: 0
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item-drag,
.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item .item-pic {
  height: 60.2666666667rem
}

.recommend {
  padding: 0
}

.games .prompt {
  margin-bottom: 0
}

.games .jackpot {
  position: relative;
  width: calc(100% - 5.3333333333rem);
  height: 66.6666666667rem;
  margin: 5.3333333333rem auto
}

.games .jackpot h2 {
  margin-bottom: 5.3333333333rem;
  font-size: 5.8666666667rem
}

.games .searchpage {
  height: 100%
}

.games .searchpage .searchpage-bar {
  bottom: 0
}

.games .games-main {
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(48rem, 1fr));
  column-gap: 2.6666666667rem;
  row-gap: 5.3333333333rem
}

.games .games-box {
  width: 48rem;
  margin: auto;
  cursor: pointer
}

.games .games-box:hover .pic img {
  transform: scale(1.2)
}

.games .games-box .pic img {
  transition: transform .3s ease-in;
  transform: scale(1)
}

.games .jackpot-banner-wrapper {
  position: relative;
  height: auto;
  transform: unset;
  padding: 3.7333333333rem 0 0
}

.games .game-jackpot-number-group p.center-peak-grand {
  top: 75%;
  font-size: 6.4rem
}

.games .game-jackpot-number-group p.center-peak-major {
  top: 81%;
  left: 72%;
  font-size: 6.4rem
}

.games .game-jackpot-number-group p.center-peak-mini {
  top: 81%;
  left: 29%;
  font-size: 6.4rem
}

.games .game-jackpot-number-group p.twin-base-grand {
  left: 39%;
  font-size: 9.0666666667rem
}

.games .game-jackpot-number-group p.twin-base-major {
  top: 81%;
  left: 49%;
  font-size: 6.4rem
}

.games .game-jackpot-number-group p.twin-base-mini {
  top: 81%;
  left: 29%;
  font-size: 6.4rem
}

.games .game-jackpot-number-group p.wide-to-narrow-grand {
  top: 30%;
  left: 38%;
  font-size: 6.6666666667rem
}

.games .game-jackpot-number-group p.wide-to-narrow-major {
  top: 55%;
  left: 38%;
  font-size: 6.1333333333rem
}

.games .game-jackpot-number-group p.wide-to-narrow-mini {
  top: 80%;
  left: 38%;
  font-size: 6.1333333333rem
}

.games .game-jackpot-number-group p.left-aligned-grand {
  top: 61%;
  left: 28%;
  font-size: 10.6666666667rem
}

.games .game-jackpot-number-group p.center-aligned-grand {
  top: 67%;
  left: 50%;
  font-size: 11.2rem
}

.games .game-jackpot-number-group p.right-aligned-grand {
  top: 61%;
  left: 73%;
  font-size: 11.2rem
}

.games-main.main-vertical {
  grid-template-columns: repeat(auto-fill, minmax(36rem, 1fr))
}

.games-main.main-vertical .games-box {
  width: 100% !important;
  transition: transform .2s ease-in-out;
  transform: translateY(0)
}

.games-main.main-vertical .games-box.games-box--login {
  margin: 4.8rem auto 0px !important
}

.games-main.main-vertical .games-box .info-wrap {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4.2666666667rem 4.2666666667rem 6.4rem;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transition: opacity .3s
}

.games-main.main-vertical .games-box .info-wrap:before {
  z-index: 1;
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--game-box-info-hover-bg, #2d2e30);
  border-radius: .8rem;
  transition: opacity .5s ease-in
}

.games-main.main-vertical .games-box .info-wrap .game-info-container,
.games-main.main-vertical .games-box .info-wrap .game-group {
  z-index: 1;
  line-height: 5.3333333333rem;
  color: var(--game-box-info-hover-txt, #fff)
}

.games-main.main-vertical .games-box .info-wrap .game-group {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 3.7333333333rem
}

.games-main.main-vertical .games-box .game-info-wrap {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden
}

.games-main.main-vertical .games-box .wrap-icon {
  z-index: 1;
  height: 10.6666666667rem;
  width: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background-color: var(--game-box-info-hover-txt, #fff)
}

.games-main.main-vertical .games-box:hover {
  transform: translateY(-4%)
}

.games-main.main-vertical .games-box:hover .pic img {
  transform: none
}

.games-main.main-vertical .games-box:hover .info-wrap {
  opacity: 1;
  pointer-events: all;
  z-index: 2
}

.games-main.main-vertical .games-box:hover .info-wrap:before {
  opacity: .9
}

.games-main.main-vertical .games-box:hover .like {
  transform: translateY(-90%) rotate(144deg)
}

.games-main.main-vertical .games-box:hover .like img[alt=favStar] {
  filter: drop-shadow(0px 0px 1px var(--game-box-star-shower-colr))
}

.games-empty-container {
  display: block;
  max-width: var(--layout-desktop-content-max-width, 1200px);
  width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
  transition: width 1s;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto 16px
}

.games-empty-container .top-inner {
  max-width: 500px;
  padding: 20px
}

.header-inner-promotion {
  display: none
}

.promotion .promotion-main {
  padding: 0
}

.promotion .promotion-main.promotion-main-scroll-wrapper {
  display: grid;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2.6666666667rem;
  row-gap: 5.3333333333rem;
  gap: 3.2rem;
  align-items: stretch
}

.promotion .promotion-box {
  display: flex;
  flex-direction: column;
  width: 104.5333333333rem;
  height: 100%;
  max-width: 100%;
  margin: auto;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden
}

.promotion .promotion-box .promotion-box-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex: 1;
  justify-content: space-between;
  gap: 2.1333333333rem
}

.promotion .promotion-box .text-main {
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 2.1333333333rem;
  flex-shrink: 0;
  min-height: 0
}

.promotion .promotion-box .text-main h3 {
  margin: 0
}

.promotion .promotion-box .text-main p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  margin: 0;
  height: auto;
  min-height: auto
}

.promotion .promotion-box .times {
  margin-bottom: 5.3333333333rem
}

.promotion .prompt {
  margin: 0;
  font-size: 3.4666666667rem;
  text-align: center;
  grid-column: 1/-1
}

.promotion .content-style .button-box {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  margin-top: auto;
  flex-wrap: nowrap;
  gap: 2.1333333333rem
}

.promotion .content-style .button-box .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 32rem;
  max-width: 50%;
  flex: 0 1 auto;
  box-sizing: border-box;
  overflow: hidden;
  padding: 3.2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0
}

.promotion .content-style .button-box .button span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: center
}

.promotion .content-style .button-box .button+.button {
  margin: 0
}

.promotion .content-style p {
  word-break: break-word;
  white-space: normal
}

.promotion .promotion-main.custom-promo-code-form {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 0 4.2666666667rem
}

.promotion .promotion-main.custom-promo-code-form .input-group {
  width: 106.6666666667rem
}

.promotion .promotion-main.custom-promo-code-form .promo-code-msg.error {
  position: absolute;
  bottom: 0;
  right: 0
}

.promotion .no-result {
  width: 100%;
  margin: 0
}

.promotion .no-result .text {
  margin-top: 2.1333333333rem
}

.promo-code-form {
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.promo-code-form .input-group {
  width: 106.6666666667rem;
  height: 10.6666666667rem
}

.promo-code-form .input-group input,
.promo-code-form .input-group .promo-code-add-btn {
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center
}

.header-desktop {
  --header-logo-width: 120px
}

.head-item__icon {
  background-size: contain !important
}

.header-desktop-user-dropdown-item__text {
  font-weight: 400
}

.auth-container__button--primary {
  box-shadow: inset 1px 1px #fff3
}

.auth-container__button--secondary {
  box-shadow: transparent
}

.deposit-label {
  box-shadow: inset 0 -1px #a42a2f80
}

.nav.nav-auto .btn {
  min-width: 90px
}

.main-wrapper {
  max-width: 1200px;
  transition: width 1s;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto
}

.footer-top {
  justify-content: space-between
}

.layout-desktop__body {
  scrollbar-width: none;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat
}

.layout-desktop__body:has(.cricket-maintenance-container) {
  background-image: none !important
}

.limit-content {
  flex: none;
  max-width: 273.0666666667rem
}

.limit-content .logo-box {
  width: 26.6666666667rem;
  height: 26.6666666667rem
}

.limit-content h1 {
  margin: 3.2rem 0;
  font-size: 13.3333333333rem
}

.limit-content h2 {
  font-size: 13.3333333333rem
}

.limit-content h3 {
  margin: 3.2rem 0;
  font-size: 5.8666666667rem
}

.limit-content h4 {
  margin: 4.2666666667rem 0;
  font-size: 5.8666666667rem;
  line-height: 7.4666666667rem
}

body {
  margin: 0;
  padding: 0;
}

/* .main-container {
  height: 100vh;
  overflow-y: auto;
  height: 100%;
} */

@media (max-width:767px) {
  #desktop-bg-logo {
    display: none;
  }
}


@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.owl-carousel .owl-dots {
  height: 25px;
  position: absolute;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  transform: translate(-50%, 0);
  left: 50%;
}

.loading-mask {
  position: fixed;
  display: flex;
  inset: 0;
  background: #ebebeb;
  justify-content: center;
  align-items: center;
  z-index: 9001;
}

.loader-box {
  z-index: 9002;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

/* img {
  width: 80px;
  height: 80px;
} */


[_nghost-serverApp-c452472900] {
  display: contents
}

[_nghost-ng-c927587687] {
  display: contents;
}

.wrap-inner {
  display: flex;
  min-height: 100vh;
  flex-direction: column
}

[_nghost-serverApp-c3119839165] {
  display: contents
}

[_nghost-serverApp-c1510284603] {
  display: contents
}

header {
  z-index: 60
}

.pop-bg {
  z-index: 120
}

.pop-wrap {
  z-index: 129
}

.menu-mask {
  z-index: 115
}

.gotop {
  z-index: 84
}

.float-banner {
  z-index: 80
}

.searchpage {
  z-index: 129
}

.launch-game-content {
  z-index: 115
}

.tips-display {
  z-index: 116
}

.loader-box {
  z-index: 9002
}

.loading-mask {
  z-index: 9001
}

.rotating-pop {
  z-index: 130
}

#chat-widget-container {
  z-index: 120 !important
}

[_nghost-serverApp-c3153229102] {
  display: contents
}

.object-container {
  position: relative;
  width: 100%;
  height: 100%
}

.pwa-download {
  --pwa-download-bg: linear-gradient(90deg, #af9963 0%, #192243 100%);
  --pwa-icon-frame: rgba(255, 255, 255, .5);
  --pwa-close-icon-bg: #ffffff;
  --pwa-name-text: #ffffff;
  --pwa-download-btn-text: #ffffff
}

.ios-pwa-pop {
  --ios-pop-header-bg: linear-gradient(0deg, #192243 0%, #af9963 100%);
  --ios-title-text-color: #ffffff;
  --ios-line-color: rgba(255, 255, 255, .2);
  --ios-icon-bg: #ffffff
}

header {
  z-index: 6000
}

.menu {
  z-index: 9000
}

.pop-bg {
  z-index: 8000
}

.pop-wrap,
.member-menu,
.searchpage {
  z-index: 9000
}

.menu-mask,
.modal {
  z-index: 8000
}

.modal-backdrop {
  z-index: 7000
}

.launch-game-content {
  z-index: 8500
}

.tips-display {
  z-index: 8501
}

.loading-mask {
  z-index: 9003
}

.loader-box {
  z-index: 9004 !important
}

.rotating-pop {
  z-index: 9002
}

.game-type-menu {
  z-index: 8000
}

#chat-widget-container {
  z-index: 9001 !important
}

[_nghost-serverApp-c1758678389] {
  display: block;
  width: 100%
}

.carousel-frame-alpha,
.carousel-frame-alpha__shell {
  position: relative
}

.carousel-frame-alpha__track {
  display: flex;
  align-items: flex-start
}

.carousel-frame-alpha__unit {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  display: block;
  color: #fff
}

.carousel-frame-alpha__navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 24px;
  box-sizing: border-box
}

.carousel-frame-alpha--dragging {
  position: relative
}

.carousel-frame-alpha--dragging:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0
}

.navigation {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none
}

.navigation__prev,
.navigation__next {
  width: 24px;
  height: 24px;
  pointer-events: auto
}

.prev__img,
.next__img {
  height: 100%
}

.pagination {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  bottom: 12px;
  transform: translate(-50%)
}

.pagination__bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: var(--carousel-pagination-bullet, white);
  border-radius: 50%
}

.pagination__bullet--active {
  background: var(--carousel-pagination-bullet-active, var(--primary))
}


header {
  z-index: 60
}

.pop-bg {
  z-index: 120
}

.pop-wrap {
  z-index: 129
}

.menu-mask {
  z-index: 115
}

.gotop {
  z-index: 84
}

.float-banner {
  z-index: 80
}

.searchpage {
  z-index: 129
}

.launch-game-content {
  z-index: 115
}

.tips-display {
  z-index: 116
}

.loader-box {
  z-index: 9002
}

.loading-mask {
  z-index: 9001
}

.rotating-pop {
  z-index: 130
}

#chat-widget-container {
  z-index: 120 !important
}



.layout-desktop {
  display: contents;
  overflow-y: hidden;
  overflow-x: auto
}

.layout-desktop__inner {
  display: flex;
  flex-direction: row-reverse;
  height: 100%
}

.layout-desktop__inner .layout-desktop__menu {
  flex: none;
  height: 100%;
  position: relative
}

@media screen and (max-width: 1200px) {
  .layout-desktop__inner .layout-desktop__menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99
  }
}

.layout-desktop__inner .layout-desktop__main {
  flex: 1;
  position: relative;
  height: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  overflow: auto
}

@media screen and (max-width: 1200px) {
  .layout-desktop__inner .layout-desktop__main {
    padding-left: var(--layout-desktop-left-menu-min-width, 63px);
    width: 100%
  }
}

.layout-desktop__main:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
  transition: opacity 1s, -webkit-backdrop-filter 1s;
  transition: opacity 1s, backdrop-filter 1s;
  transition: opacity 1s, backdrop-filter 1s, -webkit-backdrop-filter 1s;
  pointer-events: none;
  background-color: var(--layout-desktop-mask-color, rgba(0, 0, 0, .6));
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px)
}

@media screen and (max-width: 1200px) {
  .layout-desktop--menu-open .layout-desktop__main:after {
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
  }
}

.layout-desktop__main .layout-desktop__header-inner {
  flex: none;
  width: 100%
}

.layout-desktop__header-inner {
  transition: box-shadow 1s
}

.layout-desktop__header-inner--shaded {
  box-shadow: 0 3.3px 5px #0000004d, 0 9.1px 13.8px #00000032, 0 22px 33.2px #00000026, 0 73px 110px #0000001b
}

.layout-desktop__main .layout-desktop__body {
  flex: 1;
  width: 100%;
  overflow: auto
}

.layout-desktop__main .layout-desktop__body-inner {
  display: flex;
  flex-direction: column;
  min-height: -webkit-fill-available;
  min-width: var(--desktop-min-width, 1024px)
}

.layout-desktop__body .layout-desktop__content {
  transition: width 1s;
  position: relative;
  left: 0;
  right: 0
}

.layout-desktop__body {
  display: flex;
  flex-direction: column
}

.layout-desktop__content {
  flex: 1
}

.layout-desktop--menu-open .layout-desktop__body .layout-desktop__content {
  width: var(--layout-desktop-content-limit-when-menu-open)
}

.main-wrapper {
  max-width: var(--layout-desktop-content-max-width, 1200px);
  width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
  transition: width 1s;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto
}

header {
  z-index: 60
}

.pop-bg {
  z-index: 120
}

.pop-wrap {
  z-index: 129
}

.menu-mask {
  z-index: 115
}

.gotop {
  z-index: 84
}

.float-banner {
  z-index: 80
}

.searchpage {
  z-index: 129
}

.launch-game-content {
  z-index: 115
}

.tips-display {
  z-index: 116
}

.loader-box {
  z-index: 9002
}

.loading-mask {
  z-index: 9001
}

.rotating-pop {
  z-index: 130
}

#chat-widget-container {
  z-index: 120 !important
}

[_nghost-serverApp-c1230361670] {
  display: block
}

.header-desktop {
  padding-bottom: var(--header-desktop-height, 60px);
  transform: translateZ(0)
}

.header-desktop__inner {
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--header-background, #000);
  display: flex;
  justify-content: center
}

.header-desktop__main {
  max-width: var(--layout-desktop-content-max-width, 1200px);
  width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
  transition: width 1s;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  flex: none
}

.header-desktop--shrink .header-desktop__main {
  width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 4)
}

.header-desktop__main .header-desktop__latter {
  margin-left: auto
}

.header-desktop__former,
.header-desktop__latter {
  display: flex;
  align-items: center
}

.header-desktop__former>*,
.header-desktop__latter>* {
  flex: none
}

.header-desktop__logo {
  display: block;
  height: 100%;
  width: var(--header-logo-width, 80px);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  opacity: 1
}

.header-desktop__logo:hover {
  opacity: .7
}

.header-desktop__user,
.header-desktop__deposit-label,
.header-desktop__main-wallet-label,
.header-desktop__mode-switch,
.header-desktop__auth-container button,
.header-desktop__lang-switch {
  cursor: pointer;
  opacity: 1;
  transition: opacity .5s
}

.header-desktop__user:hover,
.header-desktop__deposit-label:hover,
.header-desktop__main-wallet-label:hover,
.header-desktop__mode-switch:hover,
.header-desktop__auth-container button:hover,
.header-desktop__lang-switch:hover {
  opacity: .8
}

.header-desktop__user,
.header-desktop__mode-switch {
  height: 30px;
  width: 30px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  background-color: var(--icon-color, #e9e9e9)
}

.header-desktop__lang-switch {
  height: 20px
}

.header-desktop__lang-switch img {
  height: 100%
}

.header-desktop__item+.header-desktop__item {
  margin-left: 16px
}

.deposit-label {
  padding: 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  background: var(--deposit-label-bg, #3b392f)
}

.deposit-label>*+* {
  margin-left: 10px
}

.deposit-label__deposit {
  width: 20px;
  height: 14px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  background-color: var(--main-deposit-text, #fff)
}

.deposit-label__deposit img {
  width: 100%
}

.deposit-label__title {
  font-weight: 400;
  font-size: 14px;
  color: var(--main-deposit-text, #fff)
}

.main-wallet-label {
  padding: 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  background: var(--main-wallet-label-bg, #3b392f)
}

.main-wallet-label>*+* {
  margin-left: 10px
}

.main-wallet-label__refresh {
  width: 14px;
  height: 14px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background-color: var(--main-wallet-label-text, #fff)
}

.main-wallet-label__refresh img {
  width: 100%
}

.main-wallet-label--clicked .main-wallet-label__refresh {
  animation: _ngcontent-serverApp-c1230361670_rotate 1s
}

.main-wallet-label__title {
  font-weight: 400;
  font-size: 14px;
  color: var(--main-wallet-label-text, #fff)
}

.main-wallet-label__value {
  font-weight: 700;
  font-size: 14px;
  color: var(--main-wallet-label-text, #fff)
}

.auth-container {
  display: flex;
  align-items: center
}

.auth-container__button {
  cursor: pointer;
  padding: 10px;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  font-size: 12px;
  border: none
}

.auth-container__button--primary {
  background: var(--header-btn-bg, #2d2e30);
  color: var(--header-btn-color, #fff)
}

.auth-container__button--secondary {
  background: var(--header-btn-bg-secondary, #2d2e30);
  color: var(--header-btn-color-secondary, #fff)
}

.auth-container>.auth-container__button {
  flex: none;
  min-width: 105px;
  padding: 10px
}

.auth-container__button+.auth-container__button {
  margin-left: 5px
}

.cricket-money {
  display: flex;
  align-items: center;
  border-radius: 5px 0 0 5px;
  background: var(--header-login-btn-bg, #000);
  color: var(--header-login-btn-txt, #fff);
  margin-left: 10px;
  padding: 9px
}

.exp {
  display: flex;
  align-items: center;
  border-radius: 0 5px 5px 0;
  background: var(--header-exp-btn-bg, #000);
  color: var(--header-exp-btn-txt, #fff);
  margin-right: 10px;
  padding: 9px
}

.icon-refresh {
  width: 16px;
  height: 16px;
  background: var(--header-refresh-icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  margin-right: 4px
}

.icon-refresh.active {
  animation: _ngcontent-serverApp-c1230361670_rotate 1s forwards
}

@keyframes _ngcontent-serverApp-c1230361670_rotate {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

header {
  z-index: 60
}

.pop-bg {
  z-index: 120
}

.pop-wrap {
  z-index: 129
}

.menu-mask {
  z-index: 115
}

.gotop {
  z-index: 84
}

.float-banner {
  z-index: 80
}

.searchpage {
  z-index: 129
}

.launch-game-content {
  z-index: 115
}

.tips-display {
  z-index: 116
}

.loader-box {
  z-index: 9002
}

.loading-mask {
  z-index: 9001
}

.rotating-pop {
  z-index: 130
}

#chat-widget-container {
  z-index: 120 !important
}

[_nghost-serverApp-c357405858] {
  display: block
}

@supports (height: 100dvh) {
  [_nghost-serverApp-c357405858]>* {
    height: 100dvh
  }
}

@supports not (height: 100dvh) {
  [_nghost-serverApp-c357405858]>* {
    height: 100vh
  }
}

@keyframes _ngcontent-serverApp-c357405858_fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.left-menu {
  display: flex;
  flex-direction: column;
  width: var(--layout-desktop-left-menu-max-width, 250px);
  transition: width .3s;
  -webkit-overflow-scrolling: touch;
  color: var(--leftmenu-head-btn-txt, #ffffff)
}

.left-menu--mini {
  width: var(--layout-desktop-left-menu-min-width, 63px);
  transition: width .3s ease-in .2s
}

.left-menu--mini .left-menu__component-slot,
.left-menu--mini .left-menu__head-item {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-in
}

.left-menu__content {
  position: relative;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--leftmenu-category-bg, #2d2e30);
  padding-bottom: 50px
}

.left-menu__head {
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 30px 0 10px;
  background: var(--leftmenu-head-bg, #1f1f1f);
  transition: .2s height, .5s background;
  gap: 6px
}

.left-menu__head--auto {
  flex-wrap: wrap;
  height: auto;
  padding: 10px 30px 10px 10px
}

.left-menu__head.need-hide {
  height: 0
}

.left-menu--mini .left-menu__head {
  background: var(--leftmenu-head-bg-mini)
}

.left-menu__component-slot {
  transition: opacity .3s ease-in;
  padding-top: 10px;
  background: var(--leftmenu-head-bg, #1f1f1f)
}

.left-menu__head .left-menu__head-item {
  flex: 1
}

.left-menu__head .left-menu__head-item:nth-child(n+4) {
  display: none
}

.left-menu__head-arrow {
  position: absolute;
  z-index: 100;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  transition: transform .5s
}

.left-menu__head-arrow.need-hide {
  transform: translate(50%, 30%)
}

.left-menu--mini .left-menu__head-arrow {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: _ngcontent-serverApp-c357405858_fadeIn 1.5s forwards
}

.head-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 5px;
  background: var(--leftmenu-head-btn-bg, #2d2e30);
  color: var(--leftmenu-head-btn-txt, #ffffff);
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s ease-in .2s;
  padding: 10px;
  max-width: 210px
}

.head-item--highlight {
  background: var(--leftmenu-head-btn-bg-highlight, #454545);
  color: var(--leftmenu-head-btn-txt-highlight, #fff)
}

.head-item:hover {
  opacity: .7
}

.head-item__icon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.head-item__icon+.head-item__text {
  margin-left: 6px
}

.head-item__text {
  font-weight: 600;
  font-size: 14px
}

.head-arrow {
  cursor: pointer;
  width: 40px;
  height: 28px;
  background: var(--leftmenu-head-arrow-bg, #2d2e30);
  border-radius: 30px;
  transition: opacity .3s ease-in .2s
}

.head-arrow:hover {
  opacity: .7
}

.head-arrow__icon {
  width: 100%;
  height: 100%;
  background: var(--leftmenu-head-arrow-icon, #e9e9e9);
  transform: rotate(270deg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 40%;
  transition: transform .5s
}

.head-arrow--active .head-arrow__icon {
  transform: rotate(90deg)
}

.left-menu-content__toggle-box {
  width: 100%;
  border-bottom: 1px solid var(--leftmenu-category-border, #454545)
}

.left-menu-content__home {
  position: relative;
  border-bottom: 1px solid var(--leftmenu-category-border, #454545)
}

.left-menu-content__home.active:before,
.left-menu-content__home:hover:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  margin: 4px;
  background: var(--leftmenu-category-focus-bg-active);
  border-radius: 4px
}

.left-menu-content__home:hover:before {
  background: var(--leftmenu-category-hover)
}

.left-menu-content__item--grouped+*:not(.left-menu-content__item--grouped) {
  border-top: 1px solid var(--leftmenu-category-border, #454545)
}

*:not(.left-menu-content__item--grouped)+.left-menu-content__item--grouped {
  border-top: 1px solid var(--leftmenu-category-border, #454545)
}

.nav-item {
  position: relative
}

.nav-item__head {
  position: relative;
  cursor: pointer;
  padding: 10px 10px 10px 23px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nav-item__head.active:before,
.nav-item__head:hover:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  margin: 4px;
  background: var(--leftmenu-category-focus-bg-active);
  border-radius: 4px
}

.nav-item__head:hover:before {
  background: var(--leftmenu-category-hover)
}

.nav-item__collapse-arrow {
  opacity: 1;
  transition: opacity .3s, transform .5s
}

.nav-item__head .nav-item__collapse-arrow {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  transform-origin: 50% 50%
}

.nav-item__link {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 10px 10px 23px
}

.nav-item__link.active:before,
.nav-item__link:hover:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  margin: 4px;
  background: var(--leftmenu-category-focus-bg-active);
  border-radius: 4px
}

.nav-item__link:hover:before {
  background: var(--leftmenu-category-hover)
}

.nav-item__icon {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform .5s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: none
}

.nav-item__icon.custom-cricket {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--left-menu-icon-bg)
}

.nav-item__color {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--left-menu-icon-bg)
}

.nav-item__color.highlight {
  background-color: var(--left-menu-head-icon-highlight-bg)
}

.nav-item__use-icon-path {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: unset;
  -webkit-background-repeat: no-repeat;
  -webkit-background-position: center;
  -webkit-background-size: contain
}

.nav-item--mini .nav-item__icon {
  transition: transform .5s .5s;
  transform: translate(calc((var(--layout-desktop-left-menu-min-width, 63px) - 24px) / 2 - 26px))
}

.nav-item__icon+.nav-item__text {
  margin-left: 16px
}

.nav-item__text {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 18px;
  opacity: 1;
  color: var(--leftmenu-category-txt, #ffffff);
  transition: opacity .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  z-index: 1
}

.nav-item--collapsed .nav-item__collapse-arrow {
  transform: translateY(-50%) rotate(180deg)
}

.nav-item--mini .nav-item__collapse-arrow,
.nav-item--mini .nav-item__text {
  opacity: 0;
  pointer-events: none
}

.nav-item--router {
  display: flex;
  cursor: pointer;
  align-items: center
}

.nav-item--descend {
  background-color: var(--leftmenu-category-sec-bg, #353638);
  padding: 12px 12px 12px 40px
}

.nav-item--descend .nav-item__icon {
  width: 18px;
  height: 18px
}

.nav-item--descend .nav-item__icon+.nav-item__text {
  margin-left: 8px
}

.nav-item--descend .nav-item__text {
  font-weight: 400
}

.nav-item-reminder {
  position: absolute;
  top: 0;
  right: -4px
}

.nav-item-reminder__icon {
  width: 40px
}

.nav-item .icon-all-provider {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-color: var(--icon-all-provider-bg)
}

.nav-item-body__link {
  cursor: pointer;
  display: flex;
  align-items: center
}

.toggle-box {
  padding: 10px 10px 10px 23px
}

.toggle-box__title {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--toggle-box-txt, rgba(255, 255, 255, .8));
  overflow: hidden;
  line-height: 1.5em;
  text-wrap: nowrap
}

.toggle-box__title:after {
  content: "";
  display: inline-block;
  flex: none;
  width: 5px
}

.toggle-box__inner {
  width: 45px;
  margin-left: 0;
  transition: transform .8s;
  transform: none
}

.toggle-box--fold .toggle-box__inner {
  transform: translate(calc((var(--layout-desktop-left-menu-min-width, 63px) - 45px) / 2 - 23px))
}

.toggle-box__switch {
  background: var(--toggle-box-bg, #b1b1b1)
}

.toggle-box__input:checked~.toggle-box__switch {
  background: var(--toggle-box-bg, #1f1f1f)
}

.item-sport {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.collapse-arrow {
  width: 40px;
  height: 28px;
  opacity: 1;
  transition: .3s ease-in .2s
}

.collapse-arrow__icon {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--leftmenu-category-arrow-icon, #e9e9e9);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 40%;
  transition: .3s ease-in;
  transform: rotate(180deg)
}

.switch-banner__img {
  width: 100%;
  height: auto;
  display: block
}

header {
  z-index: 60
}

.pop-bg {
  z-index: 120
}

.pop-wrap {
  z-index: 129
}

.menu-mask {
  z-index: 115
}

.gotop {
  z-index: 84
}

.float-banner {
  z-index: 80
}

.searchpage {
  z-index: 129
}

.launch-game-content {
  z-index: 115
}

.tips-display {
  z-index: 116
}

.loader-box {
  z-index: 9002
}

.loading-mask {
  z-index: 9001
}

.rotating-pop {
  z-index: 130
}

#chat-widget-container {
  z-index: 120 !important
}

.nav-category:before {
  background: 0 0
}

[_nghost-serverApp-c1907600589] {
  display: contents
}

[_nghost-serverApp-c3151814184] {
  display: contents
}

[_nghost-serverApp-c3419815403] {
  display: contents
}

[_nghost-serverApp-c4171275969] {
  display: block
}

.collapse-alpha {
  overflow: hidden
}

header {
  z-index: 60
}

.pop-bg {
  z-index: 120
}

.pop-wrap {
  z-index: 129
}

.menu-mask {
  z-index: 115
}

.gotop {
  z-index: 84
}

.float-banner {
  z-index: 80
}

.searchpage {
  z-index: 129
}

.launch-game-content {
  z-index: 115
}

.tips-display {
  z-index: 116
}

.loader-box {
  z-index: 9002
}

.loading-mask {
  z-index: 9001
}

.rotating-pop {
  z-index: 130
}

#chat-widget-container {
  z-index: 120 !important
}

.card1.vertical,
.card2.vertical {
  width: 100%;
  height: auto;
  margin-bottom: 2.6666666667vw;
  border-radius: .8vw
}

.card1.vertical ul,
.card2.vertical ul {
  display: grid;
  grid-gap: 1.0666666667vw;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  width: 100%;
  height: auto
}

.card1.vertical ul li a,
.card2.vertical ul li a {
  padding: 0;
  aspect-ratio: 141/187
}

.card1.vertical ul img,
.card2.vertical ul img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  border-radius: .8vw
}

.card1.vertical.isDesktop ul,
.card2.vertical.isDesktop ul {
  grid-gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.horizontal ul {
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2.6666666667vw
}

.horizontal.isDesktop ul {
  grid-template-columns: repeat(3, 1fr)
}

.horizontal__top {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%
}

.horizontal__top .tag {
  top: 20%;
  bottom: 5%
}

.horizontal__bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 50%
}

.horizontal__bottom .tag {
  top: 5%;
  bottom: 20%
}

.horizontal li {
  width: 100%;
  border-radius: 1.3333333333vw;
  overflow: hidden
}

.horizontal li a {
  padding: 0
}

.horizontal li img {
  display: block;
  width: 100%;
  height: 100%
}

.pwa-download {
  --pwa-download-bg: linear-gradient(90deg, #af9963 0%, #192243 100%);
  --pwa-icon-frame: rgba(255, 255, 255, .5);
  --pwa-close-icon-bg: #ffffff;
  --pwa-name-text: #ffffff;
  --pwa-download-btn-text: #ffffff
}

.ios-pwa-pop {
  --ios-pop-header-bg: linear-gradient(0deg, #192243 0%, #af9963 100%);
  --ios-title-text-color: #ffffff;
  --ios-line-color: rgba(255, 255, 255, .2);
  --ios-icon-bg: #ffffff
}

header {
  z-index: 6000
}

.menu {
  z-index: 9000
}

.pop-bg {
  z-index: 8000
}

.pop-wrap,
.member-menu,
.searchpage {
  z-index: 9000
}

.menu-mask,
.modal {
  z-index: 8000
}

.modal-backdrop {
  z-index: 7000
}

.launch-game-content {
  z-index: 8500
}

.tips-display {
  z-index: 8501
}

.loading-mask {
  z-index: 9003
}

.loader-box {
  z-index: 9004 !important
}

.rotating-pop {
  z-index: 9002
}

.game-type-menu {
  z-index: 8000
}

#chat-widget-container {
  z-index: 9001 !important
}

[_nghost-serverApp-c1891764309] {
  --left-game-layout-nav-item-icon-width: 30px;
  --left-game-layout-nav-item-icon-height: 30px;
  --left-game-layout-nav-item-text-font-size: 14px;
  --left-game-layout-nav-descend-item-text-font-weight: 400;
  --left-game-layout-nav-item-text-font-weight: 600;
  --left-game-layout-category-sec-border-width: 1px;
  --left-game-layout-collapse-arrow-transform: rotate(90deg);
  --left-game-layout-collapse-arrow-mask-size: 35%;
  --left-game-layout-collapse-arrow-webkit-mask-size: 35%;
  --left-game-layout-category-hover: var(--leftmenu-category-hover, $nav-bg-active );
  --left-game-layout-descend-icon-size: 20px
}

@keyframes _ngcontent-serverApp-c1891764309_fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.left-menu {
  display: flex;
  flex-direction: column;
  width: var(--layout-desktop-left-menu-max-width, 250px);
  transition: width .3s;
  -webkit-overflow-scrolling: touch;
  color: var(--leftmenu-head-btn-txt, #ffffff)
}

.left-menu--mini {
  width: var(--layout-desktop-left-menu-min-width, 63px);
  transition: width .3s ease-in .2s
}

.left-menu--mini .left-menu__head-item {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-in
}

.left-menu__content {
  position: relative;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--leftmenu-category-bg, #192243);
  padding-bottom: 50px
}

.left-menu__head {
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 30px 0 10px;
  background: var(--leftmenu-head-bg, #263668)
}

.left-menu__head.need-hide {
  height: 0
}

.left-menu__head .left-menu__head-item {
  flex: 1
}

.left-menu__head .left-menu__head-item:nth-child(n+4) {
  display: none
}

.left-menu__head .left-menu__head-item+.left-menu__head-item {
  margin-left: 6px
}

.left-menu__head-arrow {
  position: absolute;
  z-index: 70;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  transition: transform .5s
}

.left-menu__head-arrow.need-hide {
  transform: translate(50%, 30%)
}

.left-menu--mini .left-menu__head-arrow {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: _ngcontent-serverApp-c1891764309_fadeIn 1.5s forwards
}

.head-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 5px;
  background: var(--leftmenu-head-btn-bg, #2b3458);
  color: var(--leftmenu-head-btn-txt, #ffffff);
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s ease-in .2s;
  padding: 10px
}

.head-item--highlight {
  background: var(--leftmenu-head-btn-bg-highlight, #af9963);
  color: var(--leftmenu-head-btn-txt-highlight, #fff)
}

.head-item:hover {
  opacity: .7
}

.head-item__icon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.head-item__icon.sports {
  background: var(--leftmenu-head-btn-txt, #ffffff);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain
}

.head-item__icon+.head-item__text {
  margin-left: 6px
}

.head-item__text {
  font-weight: 700;
  font-size: 14px
}

.head-arrow {
  cursor: pointer;
  width: 40px;
  height: 28px;
  background: var(--leftmenu-head-arrow-bg, #0f1529);
  border-radius: 30px;
  transition: opacity .3s ease-in .2s
}

.head-arrow:hover {
  opacity: .7
}

.head-arrow__icon {
  width: 100%;
  height: 100%;
  background: var(--leftmenu-head-arrow-icon, #b1bad3);
  transform: rotate(180deg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 20%;
  transition: transform .5s
}

.head-arrow--active .head-arrow__icon {
  transform: rotate(0)
}

.left-menu-content__toggle-box {
  width: 100%;
  border-bottom: 1px solid var(--leftmenu-category-border, #152341)
}

.left-menu-content__home {
  border-bottom: 1px solid var(--leftmenu-category-border, #152341)
}

.left-menu-content__home.active {
  border-left: 4px solid var(--leftmenu-category-focus-border-active);
  background: var(--leftmenu-category-focus-bg-active)
}

.left-menu-content__item--grouped+*:not(.left-menu-content__item--grouped) {
  border-top: 1px solid var(--leftmenu-category-border, #152341)
}

*:not(.left-menu-content__item--grouped)+.left-menu-content__item--grouped {
  border-top: 1px solid var(--leftmenu-category-border, #152341)
}

.nav-item__head {
  cursor: pointer;
  padding: 10px 10px 10px 23px;
  position: relative;
  display: flex;
  align-items: center;
  transition: all .3s ease-in-out;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nav-item__head:hover {
  background: var(--leftmenu-category-hover, #263668)
}

.nav-item__head.active {
  border-left: 4px solid var(--leftmenu-category-focus-border-active);
  background: var(--leftmenu-category-focus-bg-active)
}

.nav-item__collapse-arrow {
  opacity: 1;
  transition: opacity .3s, transform .5s
}

.nav-item__head .nav-item__collapse-arrow {
  position: absolute;
  z-index: 66;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  transform-origin: 50% 50%
}

.nav-item__link {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 10px 10px 23px;
  text-decoration: none;
  transition: all .3s ease-in-out
}

.nav-item__link:hover {
  background: var(--leftmenu-category-hover, #263668)
}

.nav-item__link.active {
  border-left: 4px solid var(--leftmenu-category-focus-border-active);
  background: var(--leftmenu-category-focus-bg-active)
}

.nav-item__icon {
  display: block;
  width: var(--left-game-layout-nav-item-icon-width);
  height: var(--left-game-layout-nav-item-icon-height);
  transition: transform .5s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: none
}

.nav-item--mini .nav-item__icon {
  transition: transform .5s .5s;
  transform: translate(calc((var(--layout-desktop-left-menu-min-width, 63px) - var(--left-game-layout-nav-item-icon-width)) / 2 - 26px))
}

.nav-item__icon+.nav-item__text {
  margin-left: 16px
}

.nav-item__color {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--left-menu-icon-bg)
}

.nav-item__color.highlight {
  background-color: var(--left-menu-head-icon-highlight-bg)
}

.nav-item__text {
  font-weight: var(--left-game-layout-nav-item-text-font-weight);
  font-size: var(--left-game-layout-nav-item-text-font-size);
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 28px;
  opacity: 1;
  color: var(--leftmenu-category-txt, #ffffff);
  transition: opacity .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  z-index: 1
}

.nav-item--collapsed .nav-item__collapse-arrow {
  transform: translateY(-50%) rotate(180deg)
}

.nav-item--mini .nav-item__collapse-arrow,
.nav-item--mini .nav-item__text {
  opacity: 0;
  pointer-events: none
}

.nav-item--router {
  display: flex;
  cursor: pointer;
  align-items: center
}

.nav-item--descend {
  background-color: var(--leftmenu-category-sec-bg, #0f1529);
  padding: 12px 12px 12px 40px;
  transition: all .3s ease-in-out
}

.nav-item--descend:hover {
  background: var(--left-game-layout-category-hover, #263668)
}

.nav-item--descend+.nav-item--descend {
  border-top: var(--left-game-layout-category-sec-border-width) solid var(--leftmenu-category-sec-border, #1b264b)
}

.nav-item--descend .nav-item__icon {
  width: var(--left-game-layout-descend-icon-size);
  height: var(--left-game-layout-descend-icon-size)
}

.nav-item--descend .nav-item__icon+.nav-item__text {
  margin-left: 8px
}

.nav-item--descend .nav-item__text {
  font-weight: var(--left-game-layout-nav-descend-item-text-font-weight)
}

.nav-item--descend .nav-item__use-icon-path {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 30px
}

.nav-item--descend .nav-item__use-icon-path:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--leftmenu-nav-item-custom-icon-bg)
}

.nav-item--descend .nav-item__use-icon-path i {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--leftmenu-nav-item-custom-icon-size, 12px);
  height: var(--leftmenu-nav-item-custom-icon-size, 12px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 2px
}

.nav-item .icon-all-provider {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-color: var(--icon-all-provider-bg)
}

.nav-item-body__link {
  cursor: pointer;
  display: flex;
  text-decoration: none;
  align-items: center
}

.portrait .nav-item-body__ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: .8vw;
  list-style: none;
  box-sizing: border-box
}

.portrait .nav-item-body__ul>.nav-item--descend {
  aspect-ratio: 250/330;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 calc((100% - 8px)/2);
  min-width: 0
}

.portrait .nav-item-body__ul>.nav-item--descend>.nav-item__icon {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}

.portrait .nav-item-body__ul img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover
}

.toggle-box {
  padding: 10px 10px 10px 23px
}

.toggle-box__title {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--toggle-box-txt, rgba(255, 255, 255, .8));
  overflow: hidden;
  line-height: 1.5em
}

.toggle-box__title:after {
  content: "";
  display: inline-block;
  flex: none;
  width: 5px
}

.toggle-box__inner {
  width: 45px;
  margin-left: 0;
  transition: transform .8s;
  transform: none
}

.toggle-box--fold .toggle-box__inner {
  transform: translate(calc((var(--layout-desktop-left-menu-min-width, 63px) - 45px) / 2 - 23px))
}

.toggle-box__switch {
  background: var(--toggle-box-bg, #b1b1b1)
}

.toggle-box__input:checked~.toggle-box__switch {
  background: var(--toggle-box-bg, #1f1f1f)
}

.item-sport {
  background: #af9963;
  mask-size: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat
}

.collapse-arrow {
  width: 40px;
  height: 28px;
  opacity: 1;
  transition: .3s ease-in .2s
}

.collapse-arrow__icon {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--leftmenu-category-arrow-icon, #e9e9e9);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--left-game-layout-collapse-arrow-mask-size);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: var(--left-game-layout-collapse-arrow-webkit-mask-size);
  transition: .3s ease-in;
  transform: var(--left-game-layout-collapse-arrow-transform)
}

[_nghost-serverApp-c1344634289] {
  display: block
}

.collapse-alpha {
  overflow: hidden
}

.fullscreenButton {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  background-color: transparent;
}

.floating_spinWin_button {
  position: fixed;
  right: 20px;
  z-index: 50;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

.floating_dailyreword_button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 60px;
  height: 60px;
}

.button-image {
  width: 56%;
  height: 56%;
  border-radius: 0px;
}

.dailyreword_button-image {
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ff4444;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.floating-window {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  border-radius: 0px;
}

.floating-window-iframe {
  width: 100%;
  height: 100%;
  border: none;
}