@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, 0.4);
  --pop-bg-content: #281a70;
  --pop-bg-shadow: rgba(0, 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, 0.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, 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, 0.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-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-color: #ffffff;
  --form-upload-bg: var(--form-input-bg);
  --form-upload-border: rgba(255, 255, 255, 0.3);
  --form-upload-camera-icon-color: #a0a2ca;
  --form-upload-txt: #a0a2ca;
  --form-upload-mask-bg: rgba(0, 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, 0.5);
  --form-input-crypto-unit: #ffae12;
  --form-input-crypto-unit-txt: #ffffff;
  --tab-header-bg: #342e80;
  --tab-line-txt: rgba(255, 255, 255, 0.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, 0.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, 0.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, 0.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, 0.7);
  --pop-notshow-bg: rgba(0, 0, 0, 0.2);
  --pop-notshow-txt: var(--pop-title);
  --pop-notshow-check-bg: rgba(0, 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, 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, 0.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);
  --loading-list-circle-main: var(--primary);
  --loading-list-circle-secondary: var(--secondary);
  --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, 0.9);
  --btn-voucher-bg-border: #494949;
  --sidenav-mask: rgba(0, 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, 0.6) 0%,
    rgba(98, 48, 213, 0.6) 40%,
    rgba(78, 92, 255, 0.6) 60%,
    rgba(0, 187, 230, 0.6) 100%
  );
  --sidenav-info-bottom-bg: linear-gradient(
    45deg,
    rgba(68, 50, 164, 0.7) 0%,
    rgba(57, 135, 215, 0.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, 0.1);
  --sidenav-shortcut-txt: #b9c9ff;
  --sidenav-shortcut-icon-bg: rgba(255, 255, 255, 0.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, 0.9) 0%,
    #473f8d 100%
  );
  --sidenav-category-txt: #ffffff;
  --sidenav-category-shadow: #241d60;
  --sidenav-category-bg-active: rgba(161, 160, 255, 0.3);
  --sidenav-category-txt-active: #ffffff;
  --sidenav-info-points-bg: rgba(204, 204, 204, 0.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, 0.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, 0.6);
  --pop-language-txt: #ffffff;
  --pop-language-btn: rgba(54, 50, 133, 0.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, 0.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, 0.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-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: var(--primary);
  --event-title: var(--color-title);
  --event-border: var(--secondary);
  --event-slick-dot: rgba(255, 255, 255, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.8);
  --pop-bonuswallet-title: #ffffff;
  --pop-bonuswallet-card-bg: linear-gradient(
    180deg,
    rgba(54, 50, 133, 0.8) 0%,
    rgba(78, 85, 162, 0.8) 100%
  );
  --pop-bonuswallet-card-title: var(--color-title);
  --pop-bonuswallet-card-border: var(--secondary);
  --pop-bonuswallet-card-date: rgba(255, 255, 255, 0.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;
  --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, 0.5);
  --promotion-clock-icon-color: rgba(255, 255, 255, 0.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-bg: #ffffff;
  --pop-promotion-txt: #5c567a;
  --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, 0.2);
  --pop-promotion-link: var(--color-text-strong);
  --pop-promotion-bonuswallet-title: #ffffff;
  --pop-promotion-bonuswallet-wallet-bg: rgba(255, 255, 255, 0.1);
  --pop-promotion-bonuswallet-wallet-txt: #a0a2ca;
  --pop-promotion-bonuswallet-wallet-number: #ffffff;
  --pop-promotion-bonuswallet-deposit-now-border: rgba(160, 162, 202, 0.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, 0.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, 0.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, 0.5);
  --app-download-side-bg: rgba(40, 26, 112, 0.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, 0.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, 0.3) 0%,
    rgba(0, 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, 0.5);
  --launch-game-icon-color: #ffffff;
  --launch-info-border-left: rgba(255, 255, 255, 0.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, 0.5);
  --third-party-login-form-clear-icon-color: rgba(34, 34, 34, 0.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) 0.5);
  --quick-register-entry-btn-icon: rgba(var(--third-party-txt-fourth) 0.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, 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, 0.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, 0.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, 0.3);
  --bonuswallet-border: var(--secondary);
  --bonuswallet-amount: #ffd259;
  --bonuswallet-amount-complete: #ffd259;
  --bonuswallet-amount-disable: rgba(255, 210, 89, 0.5);
  --bonuswallet-progress-bar-bg: rgba(255, 255, 255, 0.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, 0.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, 0.5) 0%,
    rgba(98, 48, 213, 0.5) 40%,
    rgba(78, 92, 255, 0.5) 80%,
    rgba(0, 187, 230, 0.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, 0.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, 0.8);
  --vip-card-bottom-bg: rgba(255, 255, 255, 0.1);
  --vip-card-bottom-more-txt: rgba(255, 255, 255, 0.8);
  --vip-total-ttile: rgba(255, 255, 255, 0.6);
  --vip-total-num: #ffffff;
  --vip-total-txt: var(--vip-total-ttile);
  --vip-total-txt-bg: rgba(0, 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, 0.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, 0.5) 0%,
    rgba(98, 50, 215, 0.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, 0.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, 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, 0.5);
  --vip-cash-point-allow-btn-bg-txt-shadow: none;
  --vip-ani-title: #ffffff;
  --vip-history-year: rgba(255, 255, 255, 0.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, 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, 0.4);
  --vip-points-table-head-zone: rgba(255, 255, 255, 0.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, 0.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, 0.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, 0.8);
  --wallet-maintain-border: rgba(255, 255, 255, 0.2);
  --wallet-maintain-txt: rgba(255, 255, 255, 0.8);
  --wallet-account-info-bg: var(--form-input-bg);
  --wallet-account-info-txt: var(--color-title);
  --wallet-account-info-border: rgba(255, 255, 255, 0.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, 0.5);
  --wallet-account-info-copy-tooltips-txt-shadow: rgba(0, 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, 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, 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, 0.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, 0.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, 0.2);
  --wallet-otp-send-btn-bg: #79a5fc;
  --wallet-otp-send-btn-txt: #ffffff;
  --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, 0.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, 0.4);
  --wallet-kyc-verify-mask-txt: #ffffff;
  --wallet-kyc-verify-mask-txt-shadow: rgba(0, 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, 0.8) 0%,
    rgba(255, 255, 255, 0.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, 0.3);
  --transaction-record-calendar-icon-color: rgba(255, 255, 255, 0.3);
  --transaction-record-table-body-zone: rgba(255, 255, 255, 0.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, 0.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, 0.8);
  --betting-record-table-date-area-bg: transparent;
  --betting-record-table-zone: #4d4891;
  --betting-record-tooltips-icon-color: rgba(255, 255, 255, 0.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, 0.3);
  --mail-date-calendar-icon-color: var(--mail-date-txt);
  --mail-date-zone: rgba(255, 255, 255, 0.3);
  --mail-list-bg: var(--content-bg);
  --mail-list-title: var(--color-title);
  --mail-list-txt: rgba(255, 255, 255, 0.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, 0.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, 0.8) 0%,
    rgba(78, 85, 162, 0.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, 0.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, 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, 0.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, 0.05);
  --color-player-form-upload: #999999;
  --color-input-form-disabled: rgba(255, 255, 255, 0.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, 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, 0.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, 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, 0.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, 0.5);
  --form-input-border-focus: #f4b600;
  --form-input-bg-disabled: #e5e5e5;
  --form-input-txt-disabled: rgba(14, 39, 73, 0.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, 0.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, 0.8);
  --toolbar-bg: #054ea2;
  --toolbar-icon-active: #0e2749;
  --toolbar-shadow: rgba(0, 0, 0, 0.2);
  --loading-list-circle-main: #ffc20f;
  --loading-list-circle-secondary: #f4b600;
  --mode-txt: #0e2749;
  --mode-tips-bg: #ffffff;
  --mode-tips-txt: #0e2749;
  --pagination-bullet-bg: rgba(0, 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, 0.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, 0.2);
  --sidenav-category-bg-active: rgba(246, 249, 255, 0.2);
  --sidenav-category-txt-active: #ffffff;
  --sidenav-info-points-bg: rgba(14, 39, 73, 0.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, 0.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, 0.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, 0.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;
  --promotion-bg: #ffffff;
  --promotion-info-bg: #ffffff;
  --promotion-info-txt: #0e2749;
  --promotion-clock-icon-color: rgba(14, 39, 73, 0.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, 0.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, 0.8);
  --btn-joined-status-txt: rgba(255, 255, 255, 0.8);
  --btn-detail-bg: var(--btn-main-bg);
  --btn-before-bg: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.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, 0.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, 0.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, 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, 0.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, 0.2);
  --bonuswallet-detail-txt: rgba(14, 39, 73, 0.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, 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, 0.1);
  --vip-card-bottom-more-txt: #ffffff;
  --vip-total-ttile: #ffffff;
  --vip-total-num: #f4b600;
  --vip-total-txt-bg: rgba(0, 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, 0.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, 0.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, 0.05);
  --vip-detail-highlight-txt: #054ea1;
  --vip-detail-txt: #0e2749;
  --vip-detail-border: rgba(14, 39, 73, 0.06);
  --vip-detail-card-bg: #f2f2f2;
  --vip-detail-card-bg-shadow: rgba(0, 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, 0.5);
  --accordion-txt: rgba(14, 39, 73, 0.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, 0.8);
  --wallet-maintain-border: rgba(146, 146, 146, 0.8);
  --wallet-account-info-txt: #0e2749;
  --wallet-account-info-border: rgba(14, 39, 73, 0.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, 0.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-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, 0.4);
  --transaction-pop-processing-cont-border-color: rgba(14, 39, 73, 0.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, 0.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, 0.8);
  --mail-list-border: rgba(14, 39, 73, 0.2);
  --mail-editor-icon-color: #054ea1;
  --mail-editor-pop-txt: #0e2749;
  --mail-editor-choose-icon-color: rgba(14, 39, 73, 0.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, 0.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, 0.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;
  --black-5: rgba(0, 0, 0, 0.05);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-90: rgba(0, 0, 0, 0.9);
  --black-100: #1a1a1a;
  --white-5: rgba(255, 255, 255, 0.05);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-100: #ffffff;
  --background-0: #ffffff;
  --background-100: #ebebeb;
  --background-200: #e0e0e0;
  --background-300: #dadada;
  --background-400: #cccccc;
  --background-500: #bababa;
  --background-600: #000000;
  --background-900: #000000;
  --primary-50: #fef8e6;
  --primary-100: #fce8b0;
  --primary-200: #fadd8a;
  --primary-300: #f8ce54;
  --primary-400: #f6c533;
  --primary-500: #f4b600;
  --primary-600: #dea600;
  --primary-700: #ad8100;
  --primary-800: #866400;
  --primary-900: #664c00;
  --secondary-50: #e6edf6;
  --secondary-100: #b2c8e2;
  --secondary-200: #8caed4;
  --secondary-300: #5888c0;
  --secondary-400: #3771b4;
  --secondary-500: #054ea1;
  --secondary-600: #054793;
  --secondary-700: #043772;
  --secondary-800: #032b59;
  --secondary-900: #022144;
  --on-surface-primary: rgba(0, 0, 0, 0.9);
  --on-surface-secondary: rgba(0, 0, 0, 0.7);
  --on-surface-tertiary: rgba(0, 0, 0, 0.5);
  --on-surface-disabled: rgba(0, 0, 0, 0.3);
  --on-primary: #000000;
  --surface-default: #ebebeb;
  --surface-container: #ffffff;
  --surface-disabled: rgba(0, 0, 0, 0.2);
  --table-body-odd-bg: #bababa;
  --table-body-even-bg: #dadada;
  --pwa-download-bg: linear-gradient(90deg, #f5f5f5 0%, #cccccc 100%);
  --pwa-icon-frame: rgba(255, 255, 255, 0.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, 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-tab-btn {
  --tab-btn-bg: #dad8d8;
}
: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;
}
:root mcd-top-banner {
  --winner-board-top-banner-date-range-bg: rgba(229, 229, 229, 0.7);
  --winner-board-top-banner-date-range-border: #e0e0e0;
}
:root mcd-countdown-timer {
  --winner-board-countdown-timer-icon-bg: #e0e0e0;
  --winner-board-text-block-item-bg: var(--white-40);
  --winner-board-text-block-value: var(--primary-700);
}
:root mcd-leader-board-list {
  --winner-board-rk-item-bg: #dad8d8;
  --winner-board-rk-info-bg: #e0e0e0;
  --winner-board-usr-bg: #d1990c;
  --winner-board-usr-border: #ffd363;
  --winner-board-usr-rank-number-border: #ffd363;
  --winner-board-usr-reward-border: #ffd363;
  --winner-board-usr-next-title: #ffffff;
  --winner-board-usr-next-reward: #ffffff;
}
:root mcd-leader-board-history {
  --leader-board-history-content-header-bg: #e0e0e0;
}
:root mcd-first-to-reach-history {
  --first-to-reach-history-content-header-bg: #e0e0e0;
}
:root mcd-coming-soon {
  --coming-soon-text-block-item-bg: rgba(0, 0, 0, 0.1);
  --coming-soon-text-block-value: var(--primary-700);
}
:root mcd-event-has-ended {
  --winner-board-event-has-ended-text: var(--primary-700);
}
:root mcd-first-to-reach-list {
  --first-to-reach-list-status-bg: #e0e0e0;
  --first-to-reach-list-item-body-bg: #dad8d8;
}
.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, 0.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, 0.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, 0.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, 0.1);
  --leftmenu-category-focus-bg-active: linear-gradient(
    270deg,
    rgba(#ffb80c, 0.3) 0%,
    rgba(#ffb80c, 0.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;
}
.gotop {
  display: none;
  opacity: 0;
  background: var(--gotop-bg);
}
.gotop.is-visible {
  display: block;
  animation: gotopShow 0.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: 0.5333333333vw;
  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(0.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.6666666667vw;
  bottom: 5.3333333333vw;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  transition: all 0.3s ease-in;
  border-radius: 50%;
  background: var(--gotop-bg);
  box-shadow: 0 3.2vw 2.6666666667vw #281a7021,
    inset 0 0.2666666667vw 0.8vw #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 0.3s;
  -webkit-overflow-scrolling: touch;
}
.menu.active {
  left: 0;
  transition-delay: 0.3s;
}
.menu.active .btn-close {
  position: absolute;
  z-index: 117;
  top: 0;
  right: 0;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  animation: closeshow 0.6s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.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.6666666667vw;
  left: 2.1333333333vw;
  z-index: 116;
  height: -moz-fit-content;
  height: fit-content;
}
.menu-first .beforelogin,
.menu-first .afterlogin {
  width: 100%;
  height: 16vw;
  margin: 0;
  border-radius: 0 0 2.6666666667vw 2.6666666667vw;
  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 0.8vw 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 4vw;
  background: var(--sidenav-info-login-icon-color);
  height: 16vw;
  margin: 0 2.1333333333vw 0 6.6666666667vw;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 4vw;
}
.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 4vw;
  background: var(--sidenav-info-register-icon-color);
  height: 16vw;
  margin: 0 2.1333333333vw 0 6.6666666667vw;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 4vw;
}
.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.2666666667vw;
  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.8vw;
}
.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: 8vw;
  height: 8vw;
  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: 8vw;
  height: 8vw;
  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: 16vw;
}
.menu-first .menu-item {
  position: relative;
  margin-top: 2.1333333333vw;
  padding-bottom: 4.2666666667vw;
}
.menu-first .menu-item ul {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 61.8666666667vw;
}
.menu-first .menu-item .item-box,
.menu-first .menu-item .contact-box,
.menu-first .menu-item .home-box {
  margin-bottom: 2.1333333333vw;
  border-radius: 2.6666666667vw;
  background: var(--sidenav-category-columns-bg);
  box-shadow: 0 2.1333333333vw 2.6666666667vw
      color-mix(in srgb, var(--sidenav-category-shadow), transparent 70%),
    inset 0.2666666667vw 0.2666666667vw
      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.1333333333vw 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.1333333333vw;
}
.menu-first .menu-item .switch-banner__img {
  border-radius: 2.6666666667vw;
  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.8666666667vw;
  margin: 0;
}
.menu-first .menu-item .home-box li a {
  display: flex;
  align-items: center;
  margin: 0 0 0 2.6666666667vw;
}
.menu-first .menu-item .home-box li p {
  overflow: visible;
  white-space: normal;
  line-height: 1.2;
  margin-left: 1.0666666667vw;
}
.menu-first .menu-item li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 19.2vw;
  height: 19.2vw;
  margin: 0 2.1333333333vw 2.1333333333vw 0;
  padding: 1.0666666667vw;
  transition: all 0.3s;
  border-radius: 2.6666666667vw;
  background: var(--sidenav-category-bg);
  box-shadow: 0 2.1333333333vw 2.6666666667vw
      color-mix(in srgb, var(--sidenav-category-shadow), transparent 70%),
    inset 0.2666666667vw 0.2666666667vw
      color-mix(in srgb, var(--inset-shadow), transparent 80%);
  font-size: 2.9333333333vw;
  text-align: center;
  overflow: hidden;
}
.menu-first .menu-item li:nth-child(3n) {
  margin: 0 0 2.6666666667vw;
}
.menu-first .menu-item li a {
  color: var(--sidenav-category-txt);
  text-decoration: none;
}
.menu-first .menu-item li a span {
  display: block;
  width: 8vw;
  height: 8vw;
  -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.9333333333vw;
  height: 6.9333333333vw;
}
.menu-first .menu-item li a img {
  display: block;
  width: 8vw;
  height: 8vw;
  margin: 0 auto;
}
.menu-first .menu-item li a p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 19.2vw;
  line-height: 1.5;
  margin-top: 1.0666666667vw;
}
.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.0666666667vw;
  right: -1.0666666667vw;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 50%;
  background: #ff3a3a;
  line-height: 4.8vw;
  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: -8vw;
  right: 0;
}
.menu-first .menu-component-slot {
  background: var(--sidenav-category-bg);
  border-radius: 2.6666666667vw;
  margin-top: 2.1333333333vw;
}
.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.6666666667vw;
  margin-top: 2.1333333333vw;
}
.menu-first .bottom-menu-component .sponsor-representation__former {
  display: block;
  position: relative;
  padding: 3.2vw 4vw;
}
.menu-first .bottom-menu-component .sponsor-representation__descrp {
  position: absolute;
  bottom: 4vw;
  left: 16.5333333333vw;
  font-size: 3.2vw;
  color: var(--sidenav-category-txt);
}
html:lang(ma)
  .menu-first
  .bottom-menu-component
  .sponsor-representation__descrp {
  font-size: 2.9333333333vw;
}
.menu-top {
  position: relative;
  z-index: 116;
  width: 61.8666666667vw;
}
.menu-banner {
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: 0 0.2666666667vw 0.8vw
    color-mix(in srgb, var(--offset-shadow), transparent 50%);
  background: var(--sidenav-bg);
}
.menu-banner__img {
  width: 100%;
  height: 100%;
}
.menu .menu-banner {
  height: 36vw;
  padding: 2.1333333333vw;
}
.menu .menu-banner .banner-v1 {
  height: 125px !important;
}
.menu .menu-banner .banner-v1 .carousel-wrap {
  height: 33.3333333333vw;
}
.menu .menu-banner .banner-v1 .carousel-wrap .item {
  height: 33.3333333333vw;
  padding: 0;
}
.menu .menu-banner .banner-v1 .carousel-wrap .item .item-pic {
  height: 33.3333333333vw;
  background-size: cover;
}
.menu.show .menu-banner {
  height: 21.3333333333vw;
  padding: 0;
  margin-top: 2.1333333333vw;
}
.menu.show .menu-banner .banner-v1 {
  height: 21.3333333333vw !important;
}
.menu.show .menu-banner .banner-v1 .carousel-wrap {
  height: 21.3333333333vw;
}
.menu.show .menu-banner .banner-v1 .carousel-wrap .item {
  height: 21.3333333333vw;
  padding: 0;
}
.menu.show .menu-banner .banner-v1 .carousel-wrap .item .item-pic {
  height: 21.3333333333vw;
  background-size: cover;
}
.btn-voucher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  bottom: 6.4vw;
}
.btn-voucher .voucher-img {
  position: relative;
  left: 6.6666666667vw;
  width: 9.6vw;
  height: 9.6vw;
}
.btn-voucher .voucher-content {
  display: flex;
  padding: 0 2.6666666667vw 0 8vw;
  line-height: 5.3333333333vw;
  max-width: 61.3333333333vw;
  background: var(--btn-voucher-bg);
  border-radius: 13.3333333333vw;
  border: 1px solid var(--btn-voucher-bg-border);
}
.btn-voucher .voucher-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2.6666666667vw;
  color: var(--btn-voucher-txt);
}
.btn-voucher .voucher-value {
  margin-left: 1.0666666667vw;
  font-size: 3.7333333333vw;
  font-weight: 600;
  color: var(--btn-voucher-txt-value);
}
.menu-header {
  display: flex;
  position: relative;
  width: 100%;
  height: 16vw;
  border-radius: 2.6666666667vw 2.6666666667vw 0 0;
  background: var(--sidenav-info-bg);
  box-shadow: inset 0 0.2666666667vw 0.2666666667vw
    color-mix(in srgb, var(--inset-shadow), transparent 80%);
}
.menu-header video,
.menu-header img {
  position: absolute;
  z-index: 117;
  bottom: -0.2666666667vw;
  left: -2.6666666667vw;
  width: 28vw;
  height: 19.7333333333vw;
}
.menu-header .member-name {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  height: 16vw;
  padding-left: 26.6666666667vw;
  font-size: 3.2vw;
  font-weight: 600;
}
.menu-header .member-name .account {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32vw;
  margin: 2.1333333333vw 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.6666666667vw;
  color: var(--sidenav-profile-txt);
  font-weight: 400;
}
.menu-header .icon-arrow {
  position: absolute;
  right: 4.2666666667vw;
  bottom: 2.1333333333vw;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  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: 0.8vw 2.6666666667vw;
  border-radius: 6.4vw;
  background: var(--sidenav-info-points-bg);
  color: var(--sidenav-info-points-txt);
  font-size: 3.4666666667vw;
  font-weight: 400;
}
.menu-header .vip-points span {
  display: inline-block;
  margin-left: 2.6666666667vw;
  color: var(--sidenav-info-points-number);
  font-weight: 500;
}
.menu-second {
  position: relative;
  top: 10.6666666667vw;
  left: 2.6666666667vw;
  height: 100%;
}
.menu-second ul {
  position: absolute;
  top: 0;
  left: -29.3333333333vw;
  width: 29.3333333333vw;
  height: auto;
  max-height: 170.6666666667vw;
  overflow-y: scroll;
  transition: all 0.5s;
  opacity: 0;
  box-shadow: inset 0.2666666667vw 0.2666666667vw
    color-mix(in srgb, var(--inset-shadow), transparent 80%);
}
.menu-second ul.active {
  left: 2.6666666667vw;
  border-radius: 2.6666666667vw;
  opacity: 1;
  background: var(--sidenav-category-bg-active);
}
.menu-second ul li {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 2.6666666667vw 0;
}
.menu-second ul li a {
  text-decoration: none;
}
.menu-second ul li img {
  display: block;
  width: 55%;
  height: auto;
  max-height: 16vw;
  margin: 0 auto 1.3333333333vw;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.menu-second ul li .icon-all-provider {
  display: block;
  width: 12.8vw;
  height: 12.8vw;
  margin: 0 auto 1.3333333333vw;
  -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.2vw;
  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.2vw;
  font-weight: 500;
  line-height: 5.3333333333vw;
}
.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.6666666667vw;
  height: 10.6666666667vw;
  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: 0.5333333333vw auto 2.1333333333vw;
}
.menu.player .wallet-box li[data-category="deposit"] {
  width: 40.5333333333vw;
  padding-left: 4vw;
  padding-right: 4vw;
  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.6666666667vw;
}
.skeleton-item__text,
.skeleton-item__icon {
  opacity: 0.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: 16vw;
  height: 3.2vw;
  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.3333333333vw;
}
.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.2666666667vw;
}
.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.6666666667vw;
  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.6666666667vw;
  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.2666666667vw);
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    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.3333333333vw 1.3333333333vw 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.3333333333vw;
}
.tab.search-tab ul li.active:after,
.tab.filter-tab ul li.active:after {
  border-radius: 1.3333333333vw;
}
.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.3333333333vw;
}
.tab ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 0 2.1333333333vw;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 13.3333333333vw;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tab ul li {
  display: inline-block;
  position: relative;
  margin-right: 1.0666666667vw;
  padding: 0 4.2666666667vw;
  border-radius: 2.6666666667vw;
  font-size: 3.4666666667vw;
  line-height: 8vw;
  vertical-align: middle;
  text-align: center;
}
.tab .btn {
  display: block;
  width: 13.3333333333vw;
  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.6vw;
  margin: 0 2.1333333333vw 2.1333333333vw;
  z-index: 1;
}
.sort-bar__title {
  color: var(--game-filter-title);
  font-size: 3.7333333333vw;
  font-weight: 500;
  letter-spacing: 0.2666666667vw;
  vertical-align: middle;
}
.sort-bar__title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 3.2vw;
  border-radius: 0.5333333333vw;
  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.2vw;
  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.1333333333vw;
  border-radius: 1.3333333333vw;
  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.3333333333vw;
  overflow: hidden;
  transition: max-height 0.3s, opacity 0.5s;
  opacity: 0;
  background-color: var(--game-filter-dropdown-item-bg);
}
.sort-bar__select__item {
  display: block;
  width: 100%;
  margin: 0 2.1333333333vw;
  transition: all 0.3s;
}
.sort-bar__select__item span {
  display: block;
  padding: 2.1333333333vw 0;
  margin: 0 2.1333333333vw;
}
.sort-bar__select__item:first-child {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.sort-bar__select__item:last-child {
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.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.2vw;
  height: 3.2vw;
  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.3333333333vw;
  transition: all 0.5s;
}
.tab-btn-page.tab-nav-icon {
  position: relative !important;
  padding: 4vw 3.2vw;
  height: auto;
  align-items: flex-start;
  background: var(
    --tab-icon-section-tab-bg,
    var(--quick-register-entry-btn-wrap-bg)
  );
  box-shadow: inset 0 -0.2666666667vw 0.5333333333vw 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.3333333333vw;
}
.tab-btn-page.tab-nav-icon .btn .text {
  padding-top: 2.6666666667vw;
  width: 90%;
  color: var(--tab-icon-section-btn-txt, var(--quick-register-entry-btn-txt));
  font-size: 3.2vw;
  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 0.8vw 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: 4vw 0;
  border-radius: 1.3333333333vw;
  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 0.2666666667vw 0.2666666667vw 0
    var(--tab-icon-section-btn-shadow-inset, var(--third-party-border-default));
}
.tab-btn-page.tab-nav-icon .tab-btn-icon {
  width: 8vw;
  height: 8vw;
  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.2vw;
  font-size: 3.2vw;
  line-height: 1.5;
}
.input-group .input-wrap + .input-wrap {
  margin-top: 2.6666666667vw;
}
.input-group label {
  position: relative;
  height: 6.4vw;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4vw;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 3.7333333333vw;
}
.input-group input,
.input-group textarea {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333vw;
  padding: 0 10.6666666667vw 0 4.2666666667vw;
  transition: background 0.3s;
  border: 0.2666666667vw solid var(--form-input-border);
  border-radius: 2.6666666667vw;
  background: var(--form-input-bg);
  color: var(--form-input-txt);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.8vw;
}
.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.7333333333vw 0 4.2666666667vw;
  border: 0.2666666667vw solid var(--form-input-border-focus);
}
.input-group input:disabled,
.input-group textarea:disabled {
  border: 0.2666666667vw 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.1333333333vw 4.2666666667vw;
}
.input-group .clear {
  position: absolute;
  top: 6.4vw;
  right: 0;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  padding: 0;
  opacity: 0;
  background: var(--form-clear-icon-color);
  color: transparent;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 30%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 30%;
}
.input-group .clear.active {
  opacity: 1;
}
.input-group .eyes {
  position: absolute;
  z-index: 1;
  top: 6.4vw;
  right: 0;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  transform: none;
  background: var(--form-eyes-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%;
}
.input-group .refresh {
  position: absolute;
  top: 6.4vw;
  right: 0;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  border-radius: 0.8vw;
  background-color: var(--form-refresh-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%;
}
.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: 0.8vw 0 0;
  padding: 1.3333333333vw 0;
}
.input-group .member-error span {
  color: #ff5959;
}
.input-group .member-error:before {
  content: "!";
  display: inline-block;
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 50%;
  background-color: var(--color-danger);
  color: var(--third-party-bg-default);
  font-size: 3.7333333333vw;
  font-weight: 700;
  line-height: 4.2666666667vw;
  text-align: center;
  vertical-align: text-top;
}
.input-group.password .clear {
  right: 10.6666666667vw;
}
.input-group.password .clear.hasbutton {
  right: 29.3333333333vw;
}
.input-group.money label {
  position: absolute;
  z-index: 2;
  left: 4.2666666667vw;
  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.6666666667vw;
  border-radius: 2.1333333333vw;
  background: var(--form-input-bg);
  pointer-events: none;
}
.input-group.upload-file input {
  opacity: 0;
}
.input-group.date input:focus {
  padding: 0 4.2666666667vw;
}
.input-group .info {
  margin-top: 2.1333333333vw;
}
.input-group .info:before {
  content: "$";
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  margin-right: 1.3333333333vw;
  transform: translateY(-50%);
  border-radius: 5.3333333333vw;
  background-color: var(--wallet-amount-info-icon);
  color: var(--wallet-amount-info-icon-txt);
  font-size: 2.4vw;
  font-weight: 700;
  line-height: 4.2666666667vw;
  text-align: center;
  vertical-align: middle;
}
.input-group .info span {
  display: inline-block;
  width: calc(100% - 5.6vw);
  margin-left: 5.6vw;
}
.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.2666666667vw;
  transform: translateY(-50%);
  color: var(--color-success);
  font-size: 3.2vw;
  text-decoration: none;
}
.input-wrap .status .item-icon {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.5333333333vw;
  width: 3.4666666667vw;
  height: 3.4666666667vw;
  margin-right: 1.3333333333vw;
  background-color: var(--color-success);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.input-wrap .status.textarea-wrap textarea {
  padding: 10px 30px 10px 10px;
}
.input-wrap .get-vcode-btn span {
  padding: 0.5333333333vw 1.6vw;
  border-radius: 8vw;
  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.7333333333vw;
  padding: 0 2.6666666667vw;
  font-size: 4.8vw;
  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.7333333333vw;
}
.input-wrap .otp-resend-btn {
  display: none;
  position: absolute;
  top: 3.7333333333vw;
  right: 2.6666666667vw;
  color: var(--pop-getvcode-resend-txt);
  font-size: 3.2vw;
  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.1333333333vw;
  color: var(--color-danger);
  font-size: 3.2vw;
  text-align: left;
}
.error-message:before {
  content: "!";
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 50%;
  background-color: var(--color-danger);
  color: var(--form-box-bg);
  font-size: 3.2vw;
  font-weight: 700;
  line-height: 4.2666666667vw;
  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.1333333333vw;
}
.delete-btn {
  display: none;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  transition: all 0.3s;
  background: var(--form-clear-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%;
}
.verification input {
  padding-right: 34.1333333333vw;
}
.verification-code {
  display: flex;
  position: absolute;
  top: 8.8vw;
  right: 12vw;
  justify-content: flex-end;
  height: 6.6666666667vw;
}
.verification-code img {
  height: 100%;
}
.checkbox-agree label,
.pop-checkbox-agree label {
  display: flex;
  position: relative;
  padding: 0 2.1333333333vw;
  transition: 0.3s;
  color: var(--form-uncheck-color);
  font-size: 3.2vw;
  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: 4vw;
  height: 4vw;
  transform: translateY(-50%);
  transition: 0.3s;
  border-radius: 0.8vw;
  background: var(--form-uncheck-color);
}
.checkbox-agree label span,
.pop-checkbox-agree label span {
  padding: 0 0 0 5.3333333333vw;
}
.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: 4vw;
  height: 4vw;
  transform: translateY(-50%);
  transition: 0.3s;
  border-radius: 0.8vw;
  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.2666666667vw;
  font-size: 3.2vw;
  line-height: 1.5;
}
.check-group label {
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4vw;
}
.check-group ul {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100;
  width: 100%;
}
.check-group ul.col2 {
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(auto-fill, calc((100% - 2.1333333333vw) / 2));
}
.check-group ul.col3 {
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(auto-fill, calc((100% - 4.2666666667vw) / 3));
}
.check-group ul.col4 {
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(auto-fill, calc((100% - 6.4vw) / 4));
}
.check-group ul.col5 {
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(auto-fill, calc((100% - 8.5333333333vw) / 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.1333333333vw;
  transition: 0.3s;
  border-radius: 2.6666666667vw;
  line-height: 9.3333333333vw;
  background: var(--radio-bg);
  color: var(--radio-txt);
  font-size: 3.2vw;
  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: 0.2666666667vw;
  left: 0.2666666667vw;
  width: calc(100% - 0.5333333333vw);
  height: calc(100% - 0.5333333333vw);
  border-radius: 2.5333333333vw;
  background: var(--checkbox-bg-checked);
}
.check-group [type="checkbox"]:checked + label i {
  position: absolute;
  z-index: 2;
  right: -0.2666666667vw;
  bottom: -0.2666666667vw;
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  border-bottom-right-radius: 2.1333333333vw;
  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: 0.2666666667vw;
  left: 0.2666666667vw;
  width: calc(100% - 0.5333333333vw);
  height: calc(100% - 0.5333333333vw);
  border-radius: 2.5333333333vw;
  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.3333333333vw;
  height: 100%;
  margin: 0 2.1333333333vw 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 0.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 0.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.6666666667vw;
  border-top: 0.2666666667vw dashed var(--color-player-form-border);
}
.check-group.type li label {
  min-height: 10.6666666667vw;
  padding: 1.6vw 5.3333333333vw !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: 0.5333333333vw;
  overflow: hidden;
  color: var(--color-text);
  font-size: 2.6666666667vw;
  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.6666666667vw;
  height: 6.6666666667vw;
  transform: translateY(-50%);
}
.check-group.type li label .instant {
  animation: fly 1.8s linear infinite;
}
.check-group.type li label .super-fast {
  animation: fly 0.8s linear infinite;
}
.check-group.type li label .express {
  animation: fly 0.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.2vw;
  color: #ffffff80;
}
.overflow {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: bg-gradient 2s ease alternate infinite;
  border-radius: 2.5333333333vw;
  background: transparent;
}
.overflow:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.2666666667vw;
  left: 0.2666666667vw;
  width: calc(100% - 0.5333333333vw);
  height: calc(100% - 0.5333333333vw);
  border-radius: 2.2666666667vw;
  background: var(--radio-bg);
}
.overflow .slow {
  position: absolute;
  z-index: 3;
  top: 20%;
  left: 100%;
  width: 3.2vw;
  height: 0.5333333333vw;
  animation: shoot-slow 1.5s infinite linear;
  opacity: 0.3;
  background: var(--primary);
}
.overflow .slow:before {
  content: "";
  position: absolute;
  top: 2.6666666667vw;
  right: -2.6666666667vw;
  width: 2.6666666667vw;
  height: 0.5333333333vw;
  background: var(--primary);
}
.overflow .slow:after {
  content: "";
  position: absolute;
  top: 3.2vw;
  right: 16vw;
  width: 2.6666666667vw;
  height: 0.5333333333vw;
  background: var(--primary);
}
.overflow .medium {
  position: absolute;
  top: 80%;
  left: 100%;
  width: 4vw;
  height: 0.5333333333vw;
  animation: shoot-medium 1s linear infinite;
  opacity: 0.3;
  background: var(--primary);
}
.overflow .medium:before {
  content: "";
  position: absolute;
  top: -2.6666666667vw;
  right: 10.6666666667vw;
  width: 4vw;
  height: 0.5333333333vw;
  background: var(--primary);
}
.overflow .medium:after {
  content: "";
  position: absolute;
  top: 0;
  right: 16vw;
  width: 4vw;
  height: 0.5333333333vw;
  background: var(--primary);
}
.overflow .fast {
  position: absolute;
  top: 20%;
  left: 100%;
  width: 4.8vw;
  height: 0.5333333333vw;
  animation: shoot-fast 0.8s linear infinite;
  opacity: 0.3;
  background: var(--primary);
}
.overflow .fast:before {
  content: "";
  position: absolute;
  top: 2.6666666667vw;
  right: -2.6666666667vw;
  width: 4.8vw;
  height: 0.5333333333vw;
  background: var(--primary);
}
.overflow .fast:after {
  content: "";
  position: absolute;
  top: 3.2vw;
  right: 16vw;
  width: 4.8vw;
  height: 0.5333333333vw;
  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.3333333333vw;
}
.payment-img {
  z-index: 2;
  margin: 2.1333333333vw 0 0.8vw;
}
.payment-img img {
  display: block;
  width: auto;
  height: 6.4vw;
}
.select-group {
  display: flex;
  position: relative;
  flex-direction: column;
  padding-bottom: 3.2vw;
  font-size: 3.2vw;
  line-height: 1.5;
}
.select-group label {
  display: block;
  position: relative;
  height: 6.4vw;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4vw;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 3.7333333333vw;
}
.select-group select {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333vw;
  padding: 0 11.7333333333vw 0 4.2666666667vw;
  transition: background 0.3s;
  border: 0;
  border-radius: 2.6666666667vw;
  background: var(--form-input-bg);
  color: var(--form-input-txt);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.8vw;
}
.select-group:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 11.7333333333vw;
  right: 4.2666666667vw;
  border-width: 1.0666666667vw;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent;
}
.select-group .error-message {
  margin: 2.1333333333vw 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.6666666667vw;
  border-radius: 0.8vw;
  background-color: var(--form-box-bg);
  color: var(--form-txt);
  font-size: 3.2vw;
  line-height: 9.3333333333vw;
  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: 0.2666666667vw solid var(--radio-border-checked);
  background-color: var(--radio-bg-checked);
  color: var(--radio-txt);
}
.style-bank {
  position: relative;
  padding: 2.6666666667vw 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 0.3s;
  border: 0.4vw solid transparent;
  border-radius: 2.6666666667vw;
  background: var(--wallet-bankcard-bg);
}
.style-bank li input[type="checkbox"].active + label,
.style-bank li input[type="radio"].active + label {
  border: 0.4vw 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: -0.2666666667vw;
  bottom: -0.2666666667vw;
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  border-bottom-right-radius: 1.0666666667vw;
  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: 0.2666666667vw solid
    color-mix(in srgb, var(--content-bg), transparent 80%);
  border-radius: 2.1333333333vw;
  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.1333333333vw;
  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.3333333333vw 3.2vw;
}
.frost-card .frost-mask .frost-tag .text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bank-card-frost-txt);
  font-size: 3.2vw;
  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.1333333333vw 0 0;
}
.frost-card .frost-mask .frost-tag .lock {
  position: relative;
  width: 3.7333333333vw;
  height: 2.6666666667vw;
  margin-top: 1.6vw;
  border-radius: 0.5333333333vw;
  background-color: var(--bank-card-frost-icon);
}
.frost-card .frost-mask .frost-tag .lock:before {
  content: "";
  position: absolute;
  top: -1.6vw;
  left: 0.5333333333vw;
  width: 1.6vw;
  height: 1.6vw;
  border-top: 0.5333333333vw solid var(--bank-card-frost-icon);
  border-right: 0.5333333333vw solid var(--bank-card-frost-icon);
  border-left: 0.5333333333vw solid var(--bank-card-frost-icon);
  border-radius: 2.6666666667vw 2.6666666667vw 0 0;
}
.frost-card .frost-mask .frost-btn {
  display: inline-flex;
  justify-content: center;
  margin-top: 2.1333333333vw;
}
.frost-card .frost-mask .frost-btn .btn {
  height: 8.5333333333vw;
  margin: 0 1.0666666667vw;
  padding: 0 2.6666666667vw;
  border-radius: 2.1333333333vw;
  font-size: 3.2vw;
  line-height: 8.5333333333vw;
}
.frost-card .frost-mask .frost-btn .btn.add-card {
  box-sizing: border-box;
  border: 0.4vw 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.6666666667vw 2.6666666667vw 2.6666666667vw 4.2666666667vw;
  overflow: hidden;
  border-radius: 2.1333333333vw;
  box-shadow: 0 0.5333333333vw 0.8vw var(--slick-slide-shadow);
  font-size: 3.2vw;
}
.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.2666666667vw;
  line-height: 1.3;
  white-space: break-spaces;
}
.select-card .select-card-inner .username {
  padding: 1.3333333333vw 0;
  opacity: 0.7;
  font-size: 3.2vw;
  line-height: 1.3;
}
.select-card .select-card-inner .username img,
.select-card .select-card-inner .username span {
  display: inline;
  height: 3.2vw;
  margin-right: 1.3333333333vw;
  font-size: 3.2vw;
  vertical-align: middle;
}
.select-card .select-card-inner .username img {
  transform: translateY(-1px);
}
.select-card .select-card-inner .cardnumber {
  font-size: 4.2666666667vw;
  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.1333333333vw;
  color: var(--color-title);
  pointer-events: none;
}
.file-name {
  flex: 3;
  padding: 0 2.6666666667vw;
  pointer-events: inherit;
}
.file-name.tip {
  color: var(--form-input-txt-placeholder);
  font-size: 3.2vw;
  font-weight: 400;
}
.upload-btn {
  display: flex;
  flex: 1;
  flex-basis: 8vw;
  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.8666666667vw;
  overflow: hidden;
  transition: 0.3s;
  border: 0;
  text-align: center;
}
.upload-group.active {
  height: 40vw;
  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: 0.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.0666666667vw;
  background: var(--form-upload-mask-bg);
}
.area-mask .m-icon {
  width: 7.4666666667vw;
  height: 7.4666666667vw;
  margin: 2.6666666667vw;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  box-shadow: 0 0 1.0666666667vw var(--upload-icon-shadow);
}
.area-mask .m-text {
  font-size: 3.7333333333vw;
  text-shadow: 0 0 4px var(--upload-icon-shadow);
}
.area-mask .m-btn {
  margin-top: 1.8666666667vw;
  padding: 1.3333333333vw 4.5333333333vw;
  border-radius: 1.0666666667vw;
  background: var(--form-upload-retry-btn-bg);
  color: var(--form-upload-retry-btn-txt);
  font-size: 3.2vw;
}
.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.3333333333vw;
  height: 13.3333333333vw;
  background: var(--form-upload-camera-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%;
}
.u-text {
  color: var(--form-upload-txt);
  font-size: 3.7333333333vw;
}
.upload-wrap .upload-group {
  flex-direction: column;
  height: 35.2vw;
  border: 1px dashed var(--form-upload-border);
  border-radius: 2.6666666667vw;
  background: var(--form-upload-bg);
}
.upload-wrap .upload-group.active {
  height: 35.2vw;
}
.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.1333333333vw 0;
  background-color: var(--form-box-bg);
  font-size: 3.2vw;
  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.6666666667vw;
}
.area-group .text {
  color: var(--profile-name);
  word-break: break-all;
}
.qrcode {
  position: absolute;
  z-index: 131;
  top: -6.4vw;
  right: 0;
  width: 12vw;
  margin-right: 2.6666666667vw;
  transform: translateY(-50%);
}
.qrcode img {
  width: 100%;
}
.tag-recommond {
  position: absolute;
  z-index: 1;
  top: 1.3333333333vw;
  left: -1.0666666667vw;
  width: 5.3333333333vw;
  height: 4vw;
  border-top-left-radius: 0.5333333333vw;
  border-top-right-radius: 0.8vw;
  border-bottom-right-radius: 0.8vw;
  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.4vw;
  transform: translate(0);
  transition: bottom 0.3s;
  border-radius: 5.3333333333vw 5.3333333333vw 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: 12vw;
  height: 12vw;
  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.8666666667vw;
}
.pop-get-vcode .phone-code-list,
.pop-confirm-password .phone-code-list {
  max-height: 28.5333333333vw;
}
.pop-get-vcode .input-group label,
.pop-confirm-password .input-group label {
  height: auto;
  white-space: normal;
  margin-bottom: 1.0666666667vw;
}
.acc-copy {
  background: var(--wallet-account-info-copy-icon-color);
  cursor: pointer;
  height: 5.3333333333vw;
  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.3333333333vw;
}
.icon-copy {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  padding: 1.3333333333vw 2.6666666667vw;
  transform: translateY(-100%);
  border-radius: 0.8vw;
  opacity: 0;
  background: var(--wallet-account-info-copy-tooltips-bg);
  box-shadow: 0 0 0.5333333333vw
    var(--wallet-account-info-copy-tooltips-txt-shadow);
  color: var(--wallet-account-info-copy-tooltips-txt);
  font-size: 3.2vw;
  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 0.3s linear forwards;
}
.icon-copy.hide {
  display: block;
  animation: icon-copy-hide 0.2s linear forwards;
}
.pop-get-vcode {
  z-index: 2147483999;
}
.resend-btn {
  display: none;
  margin-bottom: -15px;
  text-align: end;
}
.resend-btn span {
  padding: 1.8666666667vw;
  color: var(--pop-getvcode-resend-txt);
  font-size: 2.6666666667vw;
  text-decoration: underline;
}
.resend-btn.show {
  display: inline-block;
}
.resend-btn.enable {
  opacity: 1;
  pointer-events: auto;
}
@keyframes icon-copy-show {
  0% {
    top: -8vw;
    opacity: 0;
  }
  to {
    top: -1.3333333333vw;
    opacity: 1;
  }
}
@keyframes icon-copy-hide {
  0% {
    top: -1.3333333333vw;
    opacity: 1;
  }
  to {
    top: -8vw;
    opacity: 0;
  }
}
.vip-area-group {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 14.4vw;
  padding: 0 4.2666666667vw;
  background: var(--third-party-personal-membername-wrap-bg);
  border-radius: 1.3333333333vw;
}
.vip-area-group .left-box {
  position: relative;
  border: 0;
  width: 60%;
  height: 6.6666666667vw;
}
.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.6vw;
  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.7333333333vw;
  border-radius: 2.6666666667vw;
  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.7333333333vw;
}
.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.7333333333vw;
  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.2vw;
  height: 3.2vw;
  margin: 0 0 0 1.3333333333vw;
  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.2vw;
}
.crypto-group-2 .crypto-input {
  position: relative;
  width: 100%;
  margin: 2.6666666667vw 0 1.3333333333vw;
}
.crypto-group-2 .crypto-input .currency {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  height: 11.7333333333vw;
  padding: 0 4.2666666667vw;
  color: var(--form-input-txt);
}
.crypto-group-2 .crypto-input .currency .icon {
  width: 6.4vw;
  height: 6.4vw;
}
.crypto-group-2 .crypto-input .currency .icon img {
  width: 100%;
  height: 100%;
}
.crypto-group-2 .crypto-input .currency .unit {
  width: 6.4vw;
  height: 6.4vw;
  border-radius: 50%;
  background: var(--form-input-crypto-unit);
  color: var(--form-input-crypto-unit-txt);
  font-size: 4.2666666667vw;
  line-height: 6.4vw;
  text-align: center;
}
.crypto-group-2 .crypto-input input,
.crypto-group-2 .crypto-input textarea {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333vw;
  padding: 0 2.6666666667vw 0 11.7333333333vw;
  transition: border 0.3s;
  border: 0.2666666667vw solid var(--form-input-bg);
  border-radius: 2.6666666667vw;
  background-color: var(--form-input-bg);
  color: var(--form-input-txt);
  font-size: 3.7333333333vw;
  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.5333333333vw;
  border: 0.2666666667vw solid var(--form-input-border-focus);
  outline: none;
}
.crypto-group-2 .crypto-input .delete-btn {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 8vw;
  height: 10.6666666667vw;
  transform: translateY(-50%);
  transition: all 0.3s;
  opacity: 0;
  mask-repeat: no-repeat;
  mask-position: 40% center;
  mask-size: 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 40% center;
  -webkit-mask-size: 40%;
}
.crypto-group-2 .switch-btn {
  display: inline-block;
  position: relative;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin-right: 2.1333333333vw;
  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.2vw;
}
.crypto-group-2 .input-text i {
  margin: 0 2.1333333333vw;
  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.8666666667vw;
  overflow: hidden;
  transition: all 0.3s;
  border: 0;
  text-align: center;
  cursor: pointer;
}
.upload-box.active {
  height: 40vw;
  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 0.3s;
  opacity: 0;
}
.upload-box img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: 0;
  transition: all 0.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: 12vw;
  height: 6.6666666667vw;
  margin-left: 1.3333333333vw;
}
.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: 12vw;
  height: 6.6666666667vw;
  padding: 0.8vw;
  background: var(--switch-target-race-track-bg);
  border-radius: 8vw;
  cursor: pointer;
}
.toggle-box__disc {
  width: 4.8vw;
  height: 4.8vw;
  padding: 1.0666666667vw;
  background-color: var(--switch-target-knob);
  border-radius: 50%;
  box-shadow: 0 1px 1px #0003;
  transition: left 0.5s, transform 0.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.3333333333vw);
  margin: 0 auto;
  padding: 2.1333333333vw 0;
}
.content-title h2 {
  color: var(--color-title);
  font-size: 4vw;
  font-weight: 700;
}
.content-title h2:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4vw;
  margin-right: 1.3333333333vw;
  background-color: var(--primary);
  vertical-align: middle;
}
.content-title h2 span {
  display: inline-block;
  vertical-align: middle;
}
.content-title .layout-btn {
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  border-radius: 6.6666666667vw;
  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.3333333333vw;
}
.is-mobile .float-banner {
  bottom: 17.3333333333vw;
}
.is-mobile .isLogin .wrap:not(.isCricketReady) {
  padding-bottom: 13.3333333333vw;
}
.is-mobile .isLogin .float-banner {
  bottom: 17.3333333333vw;
}
.toolbar {
  position: fixed;
  z-index: 112;
  bottom: 0;
  width: 100%;
  height: 13.3333333333vw;
  background: var(--toolbar-bg);
  box-shadow: 0 0 4.2666666667vw var(--toolbar-shadow);
  border-radius: 2.6666666667vw 2.6666666667vw 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.6666666667vw 2.6666666667vw 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) + 0.5px)
  );
  mask: radial-gradient(
    circle at var(--cx) var(--cy),
    transparent var(--r),
    #000 calc(var(--r) + 0.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.0666666667vw;
  color: var(--toolbar-txt);
  font-size: 3.2vw;
  text-align: center;
}
.toolbar ul li .item-icon {
  display: block;
  width: 6.4vw;
  height: 6.4vw;
  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 .notice {
  position: absolute;
  top: -1.0666666667vw;
  right: 2.6666666667vw;
  min-width: 4.2666666667vw;
  height: 4.2666666667vw;
  padding: 0 1.0666666667vw;
  border-radius: 2.1333333333vw;
  background: var(--toolbar-notice-bg, var(--color-danger));
  color: var(--toolbar-notice-txt, #fff);
  font-size: 2.6666666667vw;
  line-height: 4.2666666667vw;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}
.toolbar ul li.active p {
  color: var(--toolbar-txt-active);
}
.toolbar ul li.active .icon-wrap {
  top: -1.6vw;
}
.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 0.4s ease-in-out;
  animation-fill-mode: forwards;
}
.toolbar ul li.active .icon-wrap:before {
  width: 10.1333333333vw;
  height: 10.1333333333vw;
  background: var(--toolbar-icon-bg-back);
  z-index: -1;
  opacity: 0.4;
}
.toolbar ul li.active .icon-wrap:after {
  width: 7.4666666667vw;
  height: 7.4666666667vw;
  background: var(--toolbar-icon-bg-front);
  z-index: -1;
}
.toolbar ul li.active .item-icon {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  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.8666666667vw;
  height: 13.3333333333vw;
  will-change: transform;
  transition: transform 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.toolbar-border:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3.2vw;
  width: 13.8666666667vw;
  height: 13.8666666667vw;
  border-radius: 50%;
  background: var(--toolbar-border-bg);
  filter: drop-shadow(0 0 4.2666666667vw var(--toolbar-border-shadow));
  -webkit-filter: drop-shadow(0 0 4.2666666667vw var(--toolbar-border-shadow));
}
.banner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  margin: -0.2666666667vw 0 0;
  overflow: hidden;
}
.banner:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 13.3333333333vw;
  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.3333333333vw;
  height: 0.5333333333vw;
  margin: 0 0.5333333333vw;
  overflow: hidden;
  border-radius: 0.5333333333vw;
  background-color: color-mix(in srgb, var(--event-slick-dot), transparent 50%);
  text-indent: -2666.4vw;
}
.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 0.2666666667vw 1.6vw
      color-mix(in srgb, var(--popup-page-main-shadow), transparent 95%),
    inset 0 0.2666666667vw 0.5333333333vw
      color-mix(in srgb, var(--popup-page-main-shadow), transparent 95%);
  background-color: var(--popup-page-main-bg);
  transform: translate(-50%);
  transition: transform 0.5s, opacity 0.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.3333333333vw;
  padding-bottom: 0;
  background: var(--popup-page-main-header-bg);
}
.popup-page-main__back {
  cursor: pointer;
  opacity: 1;
  position: absolute;
  left: 2.6666666667vw;
  width: 5vw;
  height: 5vw;
  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: 0.7;
}
.popup-page-main__title {
  color: var(--header-title);
  font-size: 4.8vw;
  text-align: center;
}
.popup-page-main__close {
  cursor: pointer;
  opacity: 1;
  position: relative;
  width: 5vw;
  height: 5vw;
  position: absolute;
  right: 2.6666666667vw;
  z-index: 2;
}
.popup-page-main__close:hover {
  opacity: 0.7;
}
.popup-page-main__close:after,
.popup-page-main__close:before {
  content: "";
  display: block;
  height: 80%;
  width: 0.5vw;
  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: 10vw;
}
.popup-page-main__container {
  display: flex;
  flex: 1;
  position: absolute;
  top: 13.3333333333vw;
  width: 100%;
  height: calc(100% - 13.3333333333vw);
  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.6666666667vw;
  width: 100%;
  border-bottom: unset;
  background: var(--referral-partner-tab-bg, var(--tab-header-bg));
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(
      in srgb,
      var(--referral-partner-tab-shadow, var(--offset-shadow)),
      transparent 95%
    );
}
.referral-partner-tab .tab-btn-page .btn {
  padding: 2.6666666667vw 0;
  border-radius: 1.3333333333vw;
  background: var(
    --referral-partner-tab-btn-disabled,
    var(--btn-main-bg-disabled)
  );
}
.referral-partner-tab .tab-btn-page .btn + .btn {
  margin-left: 1.6vw;
}
.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.3333333333vw;
}
.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.3333333333vw;
}
.referral-partner .menu-box .title,
.referral-partner .menu-box .title-group {
  margin-bottom: 1.3333333333vw;
}
.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.1333333333vw;
  padding: 2.1333333333vw;
}
.referral-partner .recommend-friends-list .date-title .date .item-icon {
  display: inline-block;
  width: 4.2666666667vw;
  height: 4vw;
  margin-right: 2.1333333333vw;
  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.1333333333vw 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.2vw;
  font-weight: 500;
  margin: 2.1333333333vw 2.1333333333vw 0;
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
  align-content: center;
}
.referral-partner .recommend-friends-list .form-title div {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 1.0666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.2666666667vw 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: 0.2666666667vw dotted
    var(--referral-partner-details-list-content-td-border, #ffffff);
  padding: 2.1333333333vw 1.3333333333vw;
  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.1333333333vw;
}
.referral-partner .recommend-friends-list .list-content li .status:before {
  content: "";
  display: block;
  position: absolute;
  top: 1.8666666667vw;
  left: 2.1333333333vw;
  height: calc(100% - 8.5333333333vw);
  width: calc(100% - 6.9333333333vw);
  padding: 2.1333333333vw 1.3333333333vw;
  border-radius: 0.8vw;
  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.7333333333vw);
}
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.7333333333vw);
  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.7333333333vw);
  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.7333333333vw);
  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.1333333333vw 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.1333333333vw 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.3333333333vw;
}
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.0666666667vw;
  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.3333333333vw;
}
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.8vw;
}
mcd-commission-info ol li + li,
mcd-commission-info ul li + li {
  margin-top: 2.1333333333vw;
}
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 4vw;
  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.3333333333vw;
}
mcd-invitation-link .code-box:after {
  display: none;
}
mcd-invitation-link .code-box .btn-share {
  width: 100%;
  height: 10.6666666667vw;
  margin: auto auto 4.2666666667vw 0;
  font-size: 4vw;
  background: var(--referral-partner-code-box-share-btn, var(--secondary));
}
mcd-invitation-link .code-box .code {
  flex: unset;
  width: 100%;
  height: 10.6666666667vw;
  font-size: 3.4666666667vw;
  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.3333333333vw);
  color: var(--referral-partner-code-input-txt, var(--color-text));
}
mcd-invitation-link .code-box .code .btn {
  width: 13.3333333333vw;
  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.3333333333vw 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.1333333333vw 1.3333333333vw;
  border-radius: 0.8vw;
  background: var(--referral-partner-invite-cont-center-btn-bg, var(--primary));
  padding: 1.6vw 8.5333333333vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 4.2666666667vw;
  height: 10.6666666667vw;
  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.6666666667vw;
}
mcd-invitation-link .invite-cont {
  display: inline-flex;
  width: 100%;
  margin: 2.6666666667vw 0;
  color: var(--referral-partner-invite-cont-txt, var(--color-text));
}
mcd-invitation-link .bonus-title {
  line-height: 1.1;
  margin-bottom: 1.0666666667vw;
}
mcd-invitation-link .left {
  flex: 0 0 30.6666666667vw;
}
mcd-invitation-link .invite-qr-code {
  position: relative;
  width: 100%;
  height: auto;
  padding: 1.3333333333vw;
  border-radius: 1.3333333333vw;
  border: 0.5333333333vw 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.7333333333vw;
  padding-left: 4.2666666667vw;
}
mcd-invitation-link .right:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5333333333vw;
  height: 100%;
  border-radius: 13.3333333333vw;
  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.3333333333vw 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.2vw;
  color: var(--referral-partner-invite-box-title-txt, var(--color-text));
}
mcd-received-bonus-record .invite-box .text {
  margin-top: 2.1333333333vw;
  font-size: 4.8vw;
  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.0666666667vw);
  margin-bottom: 2.1333333333vw;
  align-items: center;
  text-align: center;
  background: var(--referral-partner-dashboard-item-bg, var(--form-input-bg));
  border-radius: 1.3333333333vw;
  padding: 4vw 4vw 2.6666666667vw;
}
mcd-dashboard .recommend-friends-box .status.accept:after {
  display: none;
}
mcd-dashboard .recommend-friends-box .status .number {
  font-size: 8vw;
  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.2vw;
  margin-bottom: 1.3333333333vw;
  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.1333333333vw;
}
mcd-dashboard .recommend-friends-box .status .condition:before {
  display: none;
}
mcd-can-receive-bonus .receive-box .day-text {
  margin-top: 2.6666666667vw;
  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.6666666667vw 0;
  text-align: center;
  background-color: var(--referral-partner-receive-date-bg, var(--content-bg));
  font-size: 3.2vw;
  border-radius: 1.3333333333vw;
}
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.1333333333vw 0;
}
mcd-can-receive-bonus .receive-box .text {
  font-size: 6.4vw;
}
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.6666666667vw;
  padding: 0 4.8vw;
  font-size: 4vw;
  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.1333333333vw;
  flex: 0 0 18.1333333333vw;
  margin-right: 3.2vw;
}
mcd-period-revenue-goals .goals-box .goals-item + .goals-box-tips {
  margin-top: 2.1333333333vw;
}
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: 4vw;
}
mcd-period-revenue-goals .goals-number i {
  font-size: 6.4vw;
}
mcd-period-revenue-goals .progress-bar .bar {
  height: 2.6666666667vw;
  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.2666666667vw;
}
mcd-commission-info img {
  margin: 2.6666666667vw 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.1333333333vw 0;
}
mcd-commission-info .commission-bets-box .sec + .sec {
  border-top: 0.2666666667vw solid
    var(--referral-partner-commission-bets-border, rgba(153, 153, 153, 0.3));
}
mcd-commission-info .commission-bets-box .referral-tips h2 {
  width: 100%;
  margin-bottom: 2.1333333333vw;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--referral-partner-commission-bets-sub-title, var(--primary));
  font-size: 4.8vw;
}
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.1333333333vw 0;
  font-size: 4.2666666667vw;
}
mcd-income-calculator .income-calculator h1 {
  font-size: 6.4vw;
  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.1333333333vw;
  padding: 2.1333333333vw;
  border: 0;
  border-radius: 0.8vw;
  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.2666666667vw 0 2.1333333333vw;
  border-radius: 8vw;
  padding: 1.3333333333vw 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.3333333333vw;
  height: 5.3333333333vw;
  background: var(
    --referral-partner-income-calculator-range-slider-thumb-bg,
    #222222
  );
  box-shadow: inset 0 0 0.8vw
    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.6666666667vw;
}
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: 0.8vw;
  margin-top: 2.6666666667vw;
  padding: 3.2vw;
}
mcd-total-issued-bonuses .bonuses-box .bonuses-type-img {
  display: inline-flex;
  width: 18.1333333333vw;
  height: 18.1333333333vw;
  margin: 0 4.8vw 0 4vw;
}
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.0666666667vw;
}
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.8666666667vw;
}
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: 0.8vw;
  padding: 5.3333333333vw 2.6666666667vw;
  margin-top: 2.6666666667vw;
}
mcd-leaderboard .leaderboard-box li {
  display: flex;
  align-items: center;
  font-weight: 700;
}
mcd-leaderboard .leaderboard-box li + li {
  padding-top: 5.8666666667vw;
}
mcd-leaderboard .leaderboard-box li div {
  display: inline-flex;
  justify-content: center;
  flex-basis: 14.9333333333vw;
}
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.3333333333vw;
  height: auto;
}
mcd-leaderboard .leaderboard-box .leaderboard-top-img p {
  margin-top: 0.8vw;
}
mcd-leaderboard .leaderboard-box .leaderboard-icon-img {
  margin: 0 5.3333333333vw;
}
mcd-leaderboard .leaderboard-box .leaderboard-icon-img img {
  width: 100%;
  height: auto;
}
mcd-leaderboard .leaderboard-box .user-id {
  width: 13.6vw;
  margin: 0 2.6666666667vw 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.3333333333vw 3.2vw;
  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: 0.8vw;
  margin-top: 2.6666666667vw;
}
mcd-bonus-received-billboard .who-received-bonus-box li div {
  margin: 0 1.3333333333vw;
}
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.3333333333vw 5% 4vw;
}
mcd-requirement .menu-box .title {
  padding: 0;
  font-size: 3.2vw;
  color: var(--referral-partner-condition-title-txt, var(--color-title));
}
mcd-requirement .referral-cont {
  flex-direction: column;
}
mcd-requirement .referral-cont .title {
  margin: 2.6666666667vw 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.6666666667vw;
  color: var(--referral-partner-code-box-tips-txt, var(--color-text));
  line-height: 3.7333333333vw;
}
mcd-requirement .code-box-tips p i {
  font-size: 3.7333333333vw;
  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.0666666667vw);
  margin-bottom: 2.1333333333vw;
  align-items: center;
  text-align: center;
  background: var(--referral-partner-condition-item-bg, var(--content-bg));
  border-radius: 1.3333333333vw;
  padding: 4vw;
}
mcd-requirement .condition-list .item .condition {
  font-size: 3.2vw;
  color: var(--referral-partner-condition-txt, var(--color-text));
  padding: 0;
  margin-bottom: 1.3333333333vw;
}
mcd-requirement .condition-list .item .text {
  display: flex;
  width: 100%;
  height: 100%;
  background: none;
  font-size: 4.8vw;
  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.1333333333vw;
}
mcd-requirement .condition-list .item .condition:before {
  display: none;
}
mcd-referral-bonus-period-info .challenge-bonus-box {
  display: flex;
  border-radius: 0.8vw;
  box-shadow: inset 0 0 0.8vw
    var(--referral-partner-challenge-bonus-box-shadow-inset, transparent);
  padding: 2.6666666667vw;
  background: var(--referral-partner-challenge-bonus-bg, var(--content-bg));
  align-items: center;
  margin: 0;
}
mcd-referral-bonus-period-info .coin-banner {
  width: 40vw;
  margin: 2.6666666667vw 2.6666666667vw 0 0;
  flex: 0 0 40vw;
}
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.2666666667vw;
}
mcd-referral-bonus-goals .tab-btn-block {
  width: 100%;
  overflow: auto;
  margin: 2.6666666667vw 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.6666666667vw 0;
  border-radius: 0.8vw;
  background: var(
    --referral-partner-achievement-tab-btn-bg,
    var(--btn-main-bg-disabled)
  );
  box-shadow: 0 1.3333333333vw 2.6666666667vw 0
      var(--referral-partner-achievement-tab-btn-shadow, rgba(6, 8, 15, 0)),
    inset 0 0 1.3333333333vw 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.6vw;
}
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: -0.8vw;
  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.6666666667vw;
  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: 0.2666666667vw;
  background-color: var(
    --referral-partner-bonus-goals-sub-title-border,
    rgba(153, 153, 153, 0.3)
  );
  flex: 1;
}
mcd-referral-bonus-goals .achievement-bonus-box li {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 1.3333333333vw;
  margin: 2.1333333333vw 0;
  padding: 2.1333333333vw;
  background: var(
    --referral-partner-achievement-list-bg,
    linear-gradient(to bottom, #ffdb83 0, #ffbb15 100%)
  );
  border: 0.2666666667vw solid
    var(--referral-partner-achievement-list-border, 0);
  box-shadow: 0 0.5333333333vw 1.0666666667vw
      var(--referral-partner-achievement-list-shadow, rgba(0, 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.6666666667vw;
  height: 18.6666666667vw;
  flex: 0 0 18.6666666667vw;
  margin-right: 2.1333333333vw;
}
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.1333333333vw;
}
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.3333333333vw;
  border: 0.5333333333vw 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: 8vw;
  height: 8vw;
  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: 0.8vw;
}
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, 0.7));
}
mcd-referral-bonus-goals .achievement-bonus-box .lock-mask:before {
  background: var(--referral-partner-mask-bg-lock, rgba(0, 0, 0, 0.55));
}
mcd-referral-bonus-goals .achievement-icon {
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  flex: 0 0 18.6666666667vw;
}
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.1333333333vw;
}
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.8666666667vw 0 1.3333333333vw;
  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.3333333333vw;
  background: var(--referral-partner-detail-btn-bg, var(--secondary));
  padding: 2.1333333333vw 2.6666666667vw;
  width: auto;
  max-width: 40%;
  height: 9.3333333333vw;
}
mcd-referral-bonus-goals .menu-box .detail-btn img {
  width: 4vw;
  height: 4vw;
}
mcd-referral-bonus-goals .menu-box .detail-btn span {
  display: inline-block;
  font-size: 3.2vw;
  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.3333333333vw;
}
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.6666666667vw;
  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: 5vw;
  height: 5vw;
  position: absolute;
  z-index: 2;
  margin: 2.6666666667vw;
  background: transparent;
}
mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:hover {
  opacity: 0.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: 0.5vw;
  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: 10vw;
}
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.3333333333vw;
  margin: 4.2666666667vw 4.2666666667vw 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.1333333333vw;
  font-size: 3.4666666667vw;
  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.2vw 2.1333333333vw;
  margin: 2.6666666667vw 0;
}
mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line p {
  display: inline-flex;
  padding: 0 2.6666666667vw;
  width: auto;
  justify-content: center;
  font-size: 3.4666666667vw;
  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: 0.2666666667vw;
  background-color: var(
    --referral-partner-bonus-goals-detail-sub-title-border,
    rgba(153, 153, 153, 0.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.2666666667vw;
  padding: 0 4.2666666667vw;
}
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.1333333333vw;
}
mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 3.2vw 2.1333333333vw;
  color: var(--referral-partner-reward-pop-list-txt, var(--color-text));
  font-size: 3.7333333333vw;
  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.3333333333vw 0 0 1.3333333333vw;
}
mcd-referral-bonus-goals-detail
  .referral-reward-bonus
  .reward-bonus-list
  span:last-child {
  border-radius: 0 1.3333333333vw 1.3333333333vw 0;
}
mcd-referral-bonus-goals-detail
  .referral-reward-bonus
  .reward-bonus-list
  span
  + span {
  margin-left: 2.1333333333vw;
}
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.6666666667vw;
  height: 42.6666666667vw;
  border-radius: 2.1333333333vw;
  background-color: var(--referral-partner-pop-bg, var(--form-box-bg));
}
mcd-referral-success-pop .show .success-checkmark {
  width: 16.2666666667vw;
  height: 21.3333333333vw;
}
mcd-referral-success-pop .show .success-checkmark .check-icon {
  width: 14.1333333333vw;
  height: 14.1333333333vw;
  border: 1.0666666667vw solid
    var(--referral-partner-success-check-icon-border, var(--color-success));
}
mcd-referral-success-pop .show .success-checkmark .check-icon:after {
  top: 0;
  left: 8vw;
  width: 16vw;
  animation: rotate-circle 4s ease-in;
  border-radius: 0 26.6666666667vw 26.6666666667vw 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.3333333333vw;
  border-radius: 0.5333333333vw;
  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: 8vw;
  left: 2.1333333333vw;
  width: 4.8vw;
  transform: rotate(46deg);
  animation: invite-partner-icon-line-tip 0.7s;
}
mcd-referral-success-pop
  .show
  .success-checkmark
  .check-icon
  .icon-line.line-long {
  top: 6.6666666667vw;
  right: 1.6vw;
  width: 8.5333333333vw;
  transform: rotate(-50deg);
  animation: invite-partner-icon-line-long 0.7s;
}
mcd-referral-success-pop .show .success-checkmark .check-icon .icon-circle {
  top: -0.5997001499vmax;
  left: -0.5997001499vmax;
  width: 14.1333333333vw;
  height: 14.1333333333vw;
  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.2vw;
  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.8vw;
}
.referral-reward-bonus-popup .pop-wrap.ani {
  display: flex;
  flex-direction: column;
}
.pwa-download {
  position: fixed;
  bottom: 13.3333333333vw;
  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.6666666667vw;
  border-radius: 1.0666666667vw 1.0666666667vw 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.4vw;
  height: 6.4vw;
  background-color: var(--pwa-close-icon-bg);
  margin-left: 2.1333333333vw;
}
.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: 0.8vw;
  left: 8.5333333333vw;
  z-index: 2;
}
.pwa-download .pwa-icon {
  position: relative;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  top: 0.5333333333vw;
  left: 0.5333333333vw;
}
.pwa-download .pwa-icon img {
  width: 100%;
}
.pwa-download .pwa-icon-frame {
  position: relative;
  width: 12.8vw;
  height: 12.8vw;
}
.pwa-download .pwa-icon-frame:before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: var(--pwa-icon-frame);
  border-radius: 0.5333333333vw;
}
.pwa-download .pwa-content {
  width: 37.8666666667vw;
  height: auto;
  font-size: 3.7333333333vw;
}
.pwa-download .pwa-content .pwa-name {
  color: var(--pwa-name-text);
  margin-bottom: 1.0666666667vw;
  max-width: 40vw;
  word-wrap: break-word;
  line-height: 1.2;
}
.pwa-download .pwa-content .start {
  width: 3.7333333333vw;
  height: 3.7333333333vw;
}
.pwa-download .download-btn {
  width: 33.0666666667vw;
  height: 9.8666666667vw;
  margin-right: 2.1333333333vw;
  background: var(--pwa-download-btn-bg, var(--primary));
  cursor: pointer;
  font-size: 3.7333333333vw;
}
.pwa-download .download-btn p {
  text-align: center;
  line-height: 9.8666666667vw;
  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.2vw 3.2vw 0 0;
}
.pwa-download .ios-pwa-pop p {
  color: var(--ios-title-text-color);
}
.pwa-download .ios-pwa-pop.active {
  animation: popIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.pwa-download .ios-pwa-pop.closing {
  animation: popOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.pwa-download .ios-pwa-pop .pwa-close-btn {
  position: absolute;
  right: 2%;
  top: 2%;
  width: 9.3333333333vw;
  height: 9.3333333333vw;
}
.pwa-download .ios-pwa-pop .header {
  width: 100%;
  height: 26.6666666667vw;
  background: var(--ios-pop-header-bg);
  border-radius: 3.2vw 3.2vw 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-download .ios-pwa-pop .title {
  margin-left: 2.1333333333vw;
}
.pwa-download .ios-pwa-pop ul {
  margin: 2.4vw 7.4666666667vw 6.6666666667vw;
  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: 0.5333333333vw;
  color: var(--ios-title-text-color);
  font-family: "Source Sans 3", sans-serif;
  font-size: 4.2666666667vw;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.pwa-download .ios-pwa-pop li + li {
  margin-top: 14.9333333333vw;
}
.pwa-download .ios-pwa-pop li:after {
  content: "";
  position: absolute;
  left: 2%;
  right: 1%;
  bottom: -32%;
  height: 0.2666666667vw;
  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.6vw;
  height: 9.6vw;
  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: -0.5333333333vw;
  left: -0.5333333333vw;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  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.9333333333vw;
  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.3333333333vw;
  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.2666666667vw;
  flex-grow: 1;
  font-size: 4vw;
  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.1333333333vw 2.6666666667vw;
  background: var(--ios-strong-text-bg, var(--primary));
  box-shadow: 0 0 0.5333333333vw #ffffffb3 inset;
  border-radius: 1.3333333333vw;
  margin: 0 1.3333333333vw;
  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: 0.5333333333vw;
}
.pwa-download .ios-pwa-pop .item-txt strong:after {
  content: "\201d";
  float: right;
  margin-left: 0.5333333333vw;
}
.pwa-download .ios-pwa-pop .item-img {
  margin-top: 2.6666666667vw;
  position: relative;
}
.pwa-download .ios-pwa-pop .item-img .focus {
  position: absolute;
  display: flex;
  top: 2.4vw;
  width: 8.5333333333vw;
  height: 8.5333333333vw;
  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(0.4);
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: none;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.pwa-download .ios-pwa-pop .step-img {
  width: 84.8vw;
  height: 12.8vw;
}
.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: 8vw;
  height: 8vw;
  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: 100vw;
  right: 1%;
  bottom: 30px;
}
.is-desktop .pwa-download-bg {
  border-radius: 1.0666666667vw;
}
.is-desktop .ios-pwa-pop {
  max-width: 104vw;
  max-height: 90vh;
  height: -moz-fit-content;
  height: fit-content;
  transform: translate(-50%, -50%) translateY(100%);
  top: 50%;
  left: 50%;
  border-radius: 3.2vw;
  will-change: transform, opacity;
}
.is-desktop .ios-pwa-pop .header {
  border-radius: 3.2vw;
}
.is-desktop .ios-pwa-pop.active {
  animation: desktopPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.is-desktop .ios-pwa-pop.closing {
  animation: desktopPopOut 0.3s cubic-bezier(0.4, 0, 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.3333333333vw;
  background-color: var(--content-bg);
}
.cricket .announcement-row {
  width: auto;
  border-radius: 1.3333333333vw;
}
.player-content {
  padding: 13.3333333333vw 0 0;
}
.menu-box {
  position: relative;
  height: auto;
  margin: 4.2666666667vw;
  padding: 4.2666666667vw;
  border-radius: 2.6666666667vw;
  background: var(--form-box-bg);
}
.menu-box .title {
  width: 100%;
  line-height: 8vw;
}
.menu-box .title h2 {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-left: 3.2vw;
  color: var(--pop-transfer-title);
  font-size: 4vw;
  font-weight: 500;
}
.menu-box .title h2:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 0.5333333333vw;
  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.1333333333vw 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.2vw;
  font-weight: 500;
  white-space: nowrap;
}
.menu-box .title + .input-group {
  padding: 2.6666666667vw 0;
}
.menu-box .title + .input-group .clear {
  top: 9.0666666667vw;
}
.fixed-tab {
  padding-top: 26.6666666667vw;
}
.fixed-tab .tab-btn-section:not(.no-fix) {
  position: fixed;
  z-index: 4;
  top: 13.3333333333vw;
}
.fixed-tab .tab-btn-wrap {
  box-shadow: none;
}
.fixed-tab .search-tab {
  top: 0;
}
.fixed-tab .promotion .promotion-main {
  padding: 0 4.2666666667vw;
}
.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.8vw;
  border-radius: 1.3333333333vw;
  color: var(--btn-main-txt);
  font-size: 5.3333333333vw;
  font-weight: 500;
  line-height: 12.8vw;
  text-align: center;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
  text-shadow: none;
}
.button a {
  display: block;
  padding: 0 4.2666666667vw;
  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: 0.2666666667vw;
  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 0.2666666667vw 0.8vw
    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.3333333333vw;
}
.prompt {
  display: block;
  width: 100%;
  color: var(--form-input-txt-placeholder);
  font-size: 3.4666666667vw;
  text-align: center;
  padding: 4.2666666667vw 0;
}
.top-banner {
  display: block;
  position: relative;
  height: 24vw;
}
.top-banner .top-banner_img {
  width: calc(100% - 3.7333333333vw);
  height: 19.7333333333vw;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 1.8666666667vw;
}
.top-banner .btn-voucher {
  left: -1.3333333333vw;
  bottom: 8.5333333333vw;
}
.top-banner .btn-voucher .voucher-content {
  max-width: 94.9333333333vw;
}
.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.6666666667vw;
}
.banner .carousel-wrap.siblings .item {
  padding: 1.3333333333vw 1.3333333333vw 3.4666666667vw;
}
header {
  display: flex;
  position: fixed;
  top: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.3333333333vw;
  overflow: hidden;
  transition: all 0.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.3333333333vw;
  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.8vw;
  text-align: center;
}
header.member .back-btn {
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  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.3333333333vw;
}
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.2666666667vw;
  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.3333333333vw;
  height: 13.3333333333vw;
}
header.slot .header-right-btn-group .layout-icon g {
  stroke: var(--header-slot-title);
}
header.slot .header-right-btn-group .filter span {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  background-color: var(--header-slot-title);
  margin-bottom: 0.5333333333vw;
  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.0666666667vw;
  right: 0;
  align-items: center;
  justify-content: center;
  width: 5.8666666667vw;
  height: 5.8666666667vw;
  border-radius: 50%;
  background: var(--header-badge-bg);
  color: var(--header-badge-txt);
  font-size: 3.4666666667vw;
  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.3333333333vw;
  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.3333333333vw;
  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.0666666667vw 2.1333333333vw;
  border: 0;
  font-size: 3.2vw;
}
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.3333333333vw;
}
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.0666666667vw;
  -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.0666666667vw;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1333333333vw;
  font-weight: 700;
}
header.cricket .cricket-money,
header.normal-logo-left .cricket-money {
  max-width: 32vw;
  background: var(--header-login-btn-bg);
  border-radius: 1.3333333333vw 0 0 1.3333333333vw;
  color: var(--header-login-btn-txt);
}
header.cricket .exp,
header.normal-logo-left .exp {
  max-width: 26.6666666667vw;
  background: var(--header-exp-btn-bg);
  border-radius: 0 1.3333333333vw 1.3333333333vw 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.2666666667vw;
  height: 4.2666666667vw;
  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.0666666667vw;
}
header.cricket .icon-refresh.active {
  animation: rotate 1s forwards;
}
header.active {
  transition: all 0.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: 12vw;
  max-width: 13.3333333333vw;
  background: none;
}
header .header-right-btn-group .language-select img {
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 100%;
  box-shadow: 0 0 0.4vw #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.2vw;
  height: 3.2vw;
  margin-left: 2.1333333333vw;
  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 0.5s forwards;
}
header .header-right-btn-group .main-wallet .item-icon {
  position: relative;
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  border-radius: 0.8vw;
  background: var(--primary);
  margin-left: 2.1333333333vw;
}
header .header-right-btn-group .main-wallet .item-icon:after {
  content: "+";
  position: absolute;
  left: 18%;
  line-height: 4.2666666667vw;
  color: var(--header-bg);
  font-size: 5.8666666667vw;
}
header .logo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 26.6666666667vw;
  height: 100%;
  transform: translate(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  text-indent: -2666.4vw;
}
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.8vw;
  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.3333333333vw;
  height: 13.3333333333vw;
  padding: 0 4.2666666667vw;
}
.menu-btn ul li {
  width: 5.3333333333vw;
  height: 0.5333333333vw;
  margin: 1.0666666667vw 0;
  border-radius: 0.5333333333vw;
  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: 12vw;
  max-width: 18.6666666667vw;
  height: 13.3333333333vw;
}
.service-btn .item-icon {
  width: 6.6666666667vw;
  height: 5.3333333333vw;
  margin-bottom: 0.5333333333vw;
  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.2vw;
  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: 12vw;
  max-width: 17.3333333333vw;
  height: 13.3333333333vw;
}
.forum-btn p {
  color: var(--header-service-icon-color);
  font-size: 3.2vw;
  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: 12vw;
  max-width: 17.3333333333vw;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background: none;
}
.login-btn p {
  color: var(--header-service-icon-color);
  font-size: 3.2vw;
  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.3333333333vw;
  height: 13.3333333333vw;
}
.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: 12vw;
  max-width: 17.3333333333vw;
  height: 13.3333333333vw;
}
.app-download p {
  color: var(--header-service-icon-color);
  font-size: 3.2vw;
  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.3333333333vw;
}
.nav-category:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 1.3333333333vw;
  background: var(--content-bg);
}
.nav-category:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0.4vw;
  background: var(--nav-underline);
}
.nav-category .btn {
  position: relative;
  width: 100%;
  margin-top: 2.6666666667vw;
  transition: all 0.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.6666666667vw;
  height: 10.6666666667vw;
  margin: 0 auto 3.7333333333vw;
  padding-top: 0.5333333333vw;
  border-radius: 100%;
  background: var(--nav-category-bg);
  box-shadow: 0.2666666667vw 0.2666666667vw 0.2666666667vw 0
      var(--nav-category-shadow),
    inset 0 1.3333333333vw 1.3333333333vw 0 var(--nav-category-inset-shadow);
}
.nav-category .btn .icon-list img {
  display: none;
}
.nav-category .btn .icon-list video {
  display: block;
  width: 8vw;
  height: 8vw;
}
.nav-category .btn p {
  margin-bottom: 3.2vw;
  color: var(--nav-category-txt);
  font-size: 3.2vw;
  font-weight: 600;
  text-align: center;
  overflow-wrap: break-word;
}
.nav-category.active {
  position: fixed;
  z-index: 3;
  top: 12.8vw;
  animation: slide-out-top 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.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 0.5s ease;
  background: var(--nav-category-bg-active);
  box-shadow: inset -0.2666666667vw -0.2666666667vw 0.5333333333vw #ffffff40,
    inset 0.2666666667vw 0.5333333333vw 0.5333333333vw #ffffff40;
}
.nav-category .slick-current .icon-list img {
  display: block;
  width: 8vw;
  height: 8vw;
}
.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 0.5333333333vw 1.3333333333vw #0000004d;
}
.nav-category .slick-current:after {
  display: block;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 0 2.1333333333vw;
  background-color: var(--footer-bg);
}
.footer-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 4.2666666667vw 0;
  text-align: left;
  color: var(--footer-txt);
}
.footer-top .pay {
  width: 100%;
  height: auto;
}
.footer-top div {
  margin-bottom: 2.1333333333vw;
}
.footer-top div li {
  display: inline-block;
  margin: 1.0666666667vw 0;
}
.footer-top div li + li {
  margin-right: 2.1333333333vw;
}
.footer-top div li:first-child {
  margin-right: 2.1333333333vw;
}
.footer-top div h2 {
  margin: 0 0 1.0666666667vw;
  color: var(--footer-title);
  font-size: 3.2vw;
}
.footer-top div img {
  height: 4.8vw;
  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.1333333333vw;
  border-radius: 1.3333333333vw;
  background: var(--footer-area-bg);
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    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.4vw;
}
.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.4666666667vw;
}
.footer-top .license,
.footer-top .partner {
  flex: 0 0 50%;
  margin-right: 2.1333333333vw;
}
.footer-top .footer-social {
  flex: 1 0 100%;
}
.footer-top .footer-social ul {
  display: grid;
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(7, 1fr);
}
.footer-top .footer-social ul li {
  margin: 0;
  text-align: center;
}
.footer-top .footer-social img {
  height: 8vw;
  width: auto;
}
.footer-top .about-us {
  width: 100%;
  flex: 1 0 50%;
}
.footer-top .about-us ul {
  display: grid;
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(3, 1fr);
}
.footer-top .about-us ul li {
  display: inline-grid;
  position: relative;
  margin: 1.0666666667vw 0;
  padding: 0 1.0666666667vw;
}
.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.0666666667vw);
  width: 0.2666666667vw;
  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.6vw 1.6vw;
}
.footer-top .about-us a {
  color: var(--footer-link);
  font-size: 3.4666666667vw;
  text-align: center;
  text-decoration: underline;
  line-height: 120%;
}
.footer-column div:nth-child(2n-1) {
  margin-right: 0;
}
.footer-column .pay {
  flex: 1 0 100%;
  margin: 0 0 2.6666666667vw;
}
.footer-column .safe,
.footer-column .footer-social {
  flex: 1 0 40%;
}
.float-banner {
  position: fixed;
  bottom: 13.3333333333vw;
  left: 2.6666666667vw;
  filter: drop-shadow(0 0 1.6vw var(--offset-shadow));
}
.float-banner .close {
  position: absolute;
  z-index: 2;
  top: -4vw;
  right: -4vw;
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  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.9333333333vw;
  left: 1.3333333333vw;
  width: 4vw;
  height: 0.5333333333vw;
  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.3333333333vw;
  min-height: 13.3333333333vw;
  max-width: 32vw;
  max-height: 32vw;
}
.toolbar.beforelogin {
  display: flex;
  position: fixed;
  z-index: 112;
  inset-block-end: 0;
  width: 100%;
  height: 13.3333333333vw;
  box-shadow: 0 -0.2666666667vw 1.0666666667vw var(--toolbar-shadow);
  gap: 1.0666666667vw;
  padding: 1.8666666667vw 2.1333333333vw;
  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: 4vw;
  font-weight: 600;
  text-align: center;
  border-radius: 1.0666666667vw;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 2.6666666667vw;
}
.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.4666666667vw;
  line-height: normal;
  margin: 0;
}
.toolbar.beforelogin .login-button {
  background: var(--index-login-btn-bg);
  box-shadow: 0 1.0666666667vw 2.1333333333vw 0 var(--index-login-btn-shadow),
    inset 0 0 1.0666666667vw 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.0666666667vw 2.1333333333vw 0 var(--index-register-btn-shadow),
    inset 0 0 1.0666666667vw 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.3333333333vw 2.1333333333vw;
  background: var(--language-bg);
  text-align: center;
  width: 25.3333333333vw;
  flex: 0 0 25.3333333333vw;
  border-radius: 1.0666666667vw;
  box-sizing: border-box;
  gap: 2.1333333333vw;
  box-shadow: inset 0 0 1.0666666667vw var(--language-shadow);
}
.language-select p {
  color: var(--language-txt);
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.language-select img {
  width: 6.6666666667vw;
  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.3333333333vw #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.3333333333vw #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 0.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 0.3s;
  animation: hide 0s 1s 1 forwards;
  border-radius: 1.3333333333vw;
  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 0.3s 0.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: 160vw;
}
.pop-wrap.promotion-pop.scroll-enabled {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pop-wrap.promotion-pop .pop-title {
  padding: 2.1333333333vw;
  border-radius: 0;
  background: var(--pop-promotion-title-bg);
}
.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: 12vw;
  height: 12vw;
  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.1333333333vw 3.2vw 2.1333333333vw 2.1333333333vw;
  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.2666666667vw;
  word-break: break-word;
}
.pop-wrap.pop-prompt.show {
  transform: scale(1);
  opacity: 1;
}
.pop-wrap.pop-prompt .item-icon {
  display: block;
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  margin: 0 1.0666666667vw 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.3333333333vw 1.3333333333vw 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.3333333333vw;
  height: 13.3333333333vw;
  transition: 0.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.3333333333vw;
  padding: 2.1333333333vw;
  border-radius: 2.6666666667vw 2.6666666667vw 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.2666666667vw;
  font-weight: 500;
  line-height: 1.2;
}
.pop-wrap .pop-inner {
  position: relative;
  padding: 2.1333333333vw 2.1333333333vw 4.2666666667vw;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}
.pop-wrap.form-verification {
  border-radius: 1.3333333333vw;
  padding: 10.6666666667vw 5.3333333333vw;
  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.4vw;
  text-align: center;
}
.pop-wrap.form-verification .icon {
  width: 24vw;
  height: 24vw;
}
.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.2vw;
}
.pop-wrap.form-verification .info p {
  line-height: 1.2;
}
.pop-wrap.form-verification .info p + p {
  display: block;
  margin-top: 3.2vw;
}
.pop-wrap.form-verification .info-title {
  font-size: 4.2666666667vw;
}
.pop-wrap.form-verification .info-subtitle {
  color: var(--pop-verification-subtitle-color, var(--pop-promotion-txt));
  font-size: 3.2vw;
}
.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.6666666667vw;
  font-size: 4vw;
  line-height: 10.6666666667vw;
  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.3333333333vw);
  max-height: calc(100vh - 13.3333333333vw);
  overflow-x: auto;
  overflow-y: auto;
  background: var(--pop-language-content-bg);
}
.pop-language .pop-inner .language-list {
  display: grid;
  grid-gap: 2.1333333333vw;
  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.3333333333vw;
  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: 4vw auto 1.3333333333vw;
}
.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.1333333333vw;
  font-size: 3.7333333333vw;
  vertical-align: top;
}
.pop-language .pop-inner .language-list .right-language-area .radio-box li {
  z-index: 0;
  flex: auto;
  width: calc(50% - 1.0666666667vw);
  height: 9.0666666667vw;
  margin-bottom: 2.1333333333vw;
  padding: 0 2.1333333333vw;
  overflow: hidden;
  border-radius: 1.3333333333vw;
  background: var(--pop-language-btn);
  box-shadow: inset 0 0.2666666667vw 0.2666666667vw
      color-mix(in srgb, var(--inset-shadow), transparent 90%),
    inset 0 -0.2666666667vw 0.2666666667vw color-mix(in srgb, var(--inset-shadow), transparent
          90%);
  color: var(--pop-language-txt);
  font-size: 3.2vw;
  line-height: 9.0666666667vw;
  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.1333333333vw;
}
.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: 0.2666666667vw;
  left: 0.3333333333vw;
  width: calc(100% - 0.6666666667vw);
  height: calc(100% - 0.5333333333vw);
  border-radius: 1.3333333333vw;
  background: var(--pop-language-btn-bg-active);
}
.btn-box {
  display: flex;
  width: 100%;
  margin: 4.2666666667vw 0 0;
  text-align: right;
}
.btn-box .button {
  display: inline-block;
  width: 100%;
  padding: 0 2.6666666667vw;
}
.btn-box .button + .button {
  margin-left: 4.2666666667vw;
}
.btn-box.other-choice {
  margin-top: 0;
}
.pop-inner {
  max-height: 60vh;
}
.pop-inner h4 {
  font-size: 4.2666666667vw;
  line-height: 1.5;
}
.pop-inner .times {
  font-size: 3.7333333333vw;
  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.1333333333vw;
  padding: 0 5.3333333333vw;
  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: 4vw;
  height: 4vw;
  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 0.3s ease-out 0.1s, opacity 0.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.7333333333vw;
  line-height: 9.3333333333vw;
}
.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: 8vw;
  height: 8vw;
  margin-right: 2.6666666667vw;
  border-radius: 100%;
  box-shadow: 0 0 0.5333333333vw #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.2vw;
  line-height: 3;
  vertical-align: middle;
}
.language-list .left-language-area span {
  display: inline-block;
  min-width: 2.6666666667vw;
}
.language-list .right-language-area {
  display: inline-flex;
  flex-flow: row wrap;
  width: 65%;
}
.pop-setwallet {
  padding: 3.2vw;
}
.pop-setwallet .btn-closed {
  position: absolute;
  top: 0;
  right: 0;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  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.5333333333vw 2.1333333333vw 0;
  color: var(--pop-promotion-bonuswallet-title);
  font-size: 4.2666666667vw;
}
.pop-setwallet .wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4.2666666667vw 0;
  padding: 6.4vw 4.2666666667vw;
  border-radius: 1.3333333333vw;
  background: var(--pop-promotion-bonuswallet-wallet-bg);
  color: var(--pop-promotion-bonuswallet-wallet-txt);
  font-size: 3.2vw;
}
.pop-setwallet label {
  position: relative;
  height: 6.4vw;
  overflow: hidden;
  color: var(--form-txt);
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 6.4vw;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pop-setwallet .input-currency {
  top: 2.6666666667vw;
}
.pop-setwallet .number {
  margin: 2.1333333333vw 0;
  color: var(--pop-promotion-bonuswallet-wallet-number);
  font-size: 6.4vw;
}
.pop-setwallet .number span {
  margin-right: 1.0666666667vw;
  font-size: 5.3333333333vw;
}
.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.2vw;
}
.pop-setwallet .btn-box {
  margin-top: 4.2666666667vw;
}
.pop-setwallet .button {
  height: 9.6vw;
  font-size: 3.7333333333vw;
  line-height: 9.6vw;
}
.pop-setwallet .deposit-now {
  margin-top: 4.2666666667vw;
  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.2666666667vw 0;
  font-size: 3.7333333333vw;
  text-align: center;
}
.pop-setwallet .tips:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 100%;
  border: 0.2666666667vw solid
    var(--pop-promotion-bonuswallet-deposit-now-border);
}
.pop-setwallet .tips span {
  display: inline;
  padding: 0 2.1333333333vw;
  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.3333333333vw;
  overflow: hidden;
  transition: all 0.3s;
  font-size: 3.7333333333vw;
  line-height: 14.6666666667vw;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pop-wrap.pop-editor ul li:active {
  filter: brightness(0.95);
}
.pop-wrap.pop-editor ul.editor-menu {
  display: none;
  border-radius: 5.3333333333vw 5.3333333333vw 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.6666666667vw 5.3333333333vw 5.3333333333vw;
  border-radius: 5.3333333333vw;
  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: 48vw;
  height: 48vw;
  margin: 0 auto 10.6666666667vw;
}
.pop-go-to-biometrics .box-loading video {
  position: absolute;
  z-index: 10;
  width: 32vw;
  height: 32vw;
}
.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.3333333333vw;
  right: 1.3333333333vw;
  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.3333333333vw;
  animation: circle-spin 4s infinite linear;
  opacity: 0.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.3333333333vw;
  left: 2.6666666667vw;
  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.6666666667vw;
  animation: circle-spin 8s infinite linear;
  opacity: 0.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.6666666667vw;
  bottom: 1.3333333333vw;
  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: 52vw;
  animation: circle-spin 12s infinite linear;
  opacity: 0.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.6666666667vw;
  left: 1.3333333333vw;
  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.3333333333vw;
  animation: circle-spin 18s infinite linear;
  opacity: 0.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.3333333333vw;
  bottom: 2.6666666667vw;
  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.6666666667vw;
  color: var(--biometric-title);
  font-size: 7.4666666667vw;
  font-weight: 600;
  text-align: center;
}
.pop-go-to-biometrics .sub-title {
  margin-bottom: 10.6666666667vw;
  color: var(--biometric-content);
  font-size: 4.2666666667vw;
  line-height: 1.4;
  text-align: center;
}
.pop-go-to-biometrics .button {
  height: 14.9333333333vw;
  font-size: 5.3333333333vw;
  line-height: 14.9333333333vw;
}
.pop-checkbox-agree {
  display: flex;
  justify-content: center;
  margin-top: 2.6666666667vw;
  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.2666666667vw;
  transform: translate(0);
  transition: bottom 0.3s;
  border-radius: 5.3333333333vw 5.3333333333vw 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: 12vw;
  height: 12vw;
  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 0.3s;
  border-radius: 2.6666666667vw 2.6666666667vw 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.9333333333vw;
  left: 50%;
  max-width: 100%;
  padding: 2.1333333333vw 4.2666666667vw;
  transform: translate(-50%);
  border-radius: 2.1333333333vw;
  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.4vw;
  margin-right: 4.2666666667vw;
  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.3333333333vw;
  height: 13.3333333333vw;
  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.3333333333vw;
  border-radius: 2.6666666667vw 2.6666666667vw 0 0;
  background: var(--pop-transaction-details-header-bg);
  color: var(--pop-transaction-details-header-txt);
  font-size: 4.2666666667vw;
  font-weight: 500;
  line-height: 13.3333333333vw;
  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: 4vw 0;
  color: var(--pop-transaction-details-tips-txt);
}
.pop-transaction-records-details .member-content .button {
  margin: 4.2666666667vw;
  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: 12vw;
  border-radius: 0.8vw;
  background-color: var(--btn-main-bg-disabled);
  color: var(--btn-main-txt-disabled);
  font-size: 4vw;
  line-height: 8vw;
  text-align: center;
}
.pop-transaction-records-details .member-content .button .countdown.fade-in {
  animation: button-push 0.5s ease;
}
.pop-transaction-records-details
  .member-content
  .button
  .countdown.fade-in:before {
  content: "";
  display: block;
  position: absolute;
  top: -5.3333333333vw;
  width: 100%;
  height: 5.3333333333vw;
  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 0.5s ease;
}
.pop-transaction-records-details
  .member-content
  .button
  .countdown.fade-out:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 5.3333333333vw;
  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.6666666667vw;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  box-shadow: 0 0 0 0.4vw 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: 0.4vw;
  transform-origin: 0 50%;
  animation: spinClockwise 2s linear infinite;
  border-radius: 1.3333333333vw;
  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: 0.4vw;
  transform-origin: 0 50%;
  animation: spinClockwise 12s linear infinite;
  border-radius: 1.3333333333vw;
  background-color: var(--pop-transaction-details-timer);
}
.transaction-details-wrap {
  height: 100%;
  margin: 0;
  padding: 4.2666666667vw;
  overflow-x: hidden;
  overflow-y: auto;
}
.transaction-details-wrap .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.6666666667vw 0;
}
.transaction-details-wrap .title h3 {
  width: 70%;
  color: var(--pop-transaction-details-title);
  font-size: 4.5333333333vw;
  font-weight: 500;
}
.transaction-details-wrap .title .tags {
  min-width: 21.8666666667vw;
  padding: 1.3333333333vw;
  overflow: hidden;
  transform: scale(0.9);
  border-radius: 1.0666666667vw;
  color: var(--transaction-record-status-txt);
  font-size: 3.2vw;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.timeline-box {
  position: relative;
  margin-top: 2.6666666667vw;
  padding-bottom: 2.6666666667vw;
}
.timeline-box .date {
  margin-bottom: 2.6666666667vw;
  margin-left: 13.3333333333vw;
  color: var(--pop-transaction-details-date);
  font-size: 3.4666666667vw;
}
.timeline-block {
  position: relative;
  margin-bottom: 2.9333333333vw;
}
.timeline-block:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 4.5333333333vw;
  width: 0.5333333333vw;
  height: calc(100% + 9.3333333333vw);
  border-radius: 2.6666666667vw;
}
.timeline-block:last-child:before {
  top: -9.3333333333vw;
  height: 14.6666666667vw;
}
.timeline-block .point {
  position: absolute;
  top: -5.3333333333vw;
  left: 3.4666666667vw;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  border-radius: 50%;
  outline: 1.3333333333vw solid var(--content-bg);
  box-shadow: 0.2666666667vw 0.2666666667vw #0000001a;
}
.timeline-block .bounce {
  animation: bounce-point 0.5s 0.8s;
}
.timeline-block .content {
  display: inline-flex;
  width: calc(100% - 12.8vw);
  min-height: 14.6666666667vw;
  margin-left: 12.8vw;
  padding: 4.2666666667vw;
  border-radius: 2.6666666667vw;
  background: var(--pop-transaction-details-message-bg);
  box-shadow: 0.5333333333vw 0.5333333333vw
      color-mix(in srgb, var(--offset-shadow), transparent 90%),
    inset 0 0.2666666667vw 0.2666666667vw
      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.7333333333vw;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-line;
}
.timeline-block .content .text + .time {
  margin-top: 1.3333333333vw;
}
.timeline-block .content .time {
  width: 24%;
  color: var(--pop-transaction-details-message-txt);
  font-size: 2.9333333333vw;
  text-align: right;
}
.timeline-block.current:before {
  height: 110%;
}
.timeline-block.current .point {
  display: flex;
  z-index: 1;
  top: -6.4vw;
  left: 1.8666666667vw;
  align-items: center;
  justify-content: center;
  width: 5.8666666667vw;
  height: 5.8666666667vw;
  border: 0.8vw solid var(--content-bg);
  box-shadow: 0.2666666667vw 0.2666666667vw #0000001a,
    inset 0.2666666667vw 0.2666666667vw #0000001a;
}
.timeline-block.current .point span {
  position: relative;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  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.6666666667vw 0;
  overflow: hidden;
  border-radius: 2.6666666667vw;
}
.details-box .info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  padding: 4.2666666667vw;
  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.4666666667vw;
  font-weight: 500;
}
.details-box .info .value {
  font-size: 3.4666666667vw;
  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: 0.5333333333vw 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: 0.5333333333vw 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 0.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: 0.5333333333vw 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: 0.5333333333vw 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(0.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: -12vw;
  }
  to {
    bottom: 0;
  }
}
@keyframes button-pull {
  0% {
    bottom: 0;
  }
  to {
    bottom: -12vw;
  }
}
.pop-login-fail {
  position: absolute;
  width: calc(100% - 8.5333333333vw);
  height: auto;
  padding: 2.1333333333vw 4.2666666667vw;
  transition: top 0.3s;
  animation: errorTipsShow 0.5s alternate linear forwards;
  border: 0.2666666667vw solid var(--alert-login-fail-tips-border);
  border-radius: 2.6666666667vw;
  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.6666666667vw;
  height: 10.6666666667vw;
  margin-right: 2.1333333333vw;
}
.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.2vw;
  font-weight: 700;
  letter-spacing: 0.2666666667vw;
  line-height: 4vw;
}
.pop-login-fail.active {
  display: inline;
  opacity: 1;
}
.pop-login-fail.hide {
  animation: errorTipsHIde 0.5s alternate linear forwards;
}
@keyframes errorTipsShow {
  0% {
    top: -13.8666666667vw;
  }
  to {
    top: 13.8666666667vw;
  }
}
@keyframes errorTipsHIde {
  0% {
    top: 13.8666666667vw;
  }
  to {
    top: -13.8666666667vw;
  }
}
.pop-reset-password,
.pop-account-lock {
  position: fixed;
  z-index: 9000;
  bottom: -100%;
  width: 100%;
  max-height: 90vh;
  padding: 4.2666666667vw;
  transform: translate(0);
  transition: bottom 0.5s;
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: var(--pop-login-fail-bg);
  box-shadow: 0 -0.5333333333vw 4vw #0003;
}
.pop-reset-password .title,
.pop-account-lock .title {
  margin-bottom: 8.5333333333vw;
  color: var(--pop-login-fail-title);
  font-weight: 600;
  letter-spacing: 0.2666666667vw;
  text-align: center;
  line-height: 6.4vw;
}
.pop-reset-password p,
.pop-account-lock p {
  margin-bottom: 8vw;
  color: var(--pop-login-fail-txt);
  font-size: 3.4666666667vw;
  letter-spacing: 0.2666666667vw;
  line-height: 5.3333333333vw;
  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: 12vw;
  margin: 0 auto 2.6666666667vw;
  font-size: 4vw;
  line-height: 12vw;
}
.pop-reset-password .pop-btn-box .button + .button,
.pop-account-lock .pop-btn-box .button + .button {
  margin-left: 4.2666666667vw;
}
.pop-reset-password.active,
.pop-account-lock.active {
  bottom: 0;
}
.pop-reset-password.active img,
.pop-account-lock.active img {
  animation: fallin 0.6s 0.2s forwards;
}
.icon-check,
.icon-close,
.icon-lock {
  position: relative;
  z-index: 10;
  left: 50%;
  width: 32vw;
  height: 32vw;
  margin: 4.2666666667vw 0;
  transform: translate(-50%);
}
.icon-check video,
.icon-close video,
.icon-lock video {
  width: 100%;
}
.pop-notification .content-style .table {
  margin-bottom: 17.3333333333vw;
}
.pop-notification .content-style p {
  margin: 2.6666666667vw 0;
}
.pop-notification .btn-box {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
  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 0.5s 0.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.6666666667vw;
  height: 26.6666666667vw;
}
.phone-rotating-tips {
  position: relative;
  bottom: 10%;
  width: 90%;
  color: #fff;
  font-size: 2.4vw;
  text-align: center;
}
.phone-rotating-tips span {
  display: inline-block;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin-right: 1.0666666667vw;
  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.5333333333vw);
  height: 16vw;
  margin: 4.2666666667vw;
  box-shadow: 0 2.1333333333vw 2.1333333333vw var(--board-before-shadow);
}
.beforelogin a,
.afterlogin a {
  text-align: left;
  padding: 1.0666666667vw 4.2666666667vw;
  border-radius: 5.3333333333vw;
  box-shadow: 0 0.5333333333vw 1.0666666667vw var(--board-btn-shadow),
    inset -0.5333333333vw 0.2666666667vw 0.8vw color-mix(in srgb, var(--inset-shadow), transparent
          50%);
  font-size: 3.2vw;
  line-height: 1.2;
  text-decoration: none;
}
.beforelogin .main-wallet,
.afterlogin .main-wallet {
  width: 33%;
  border-radius: 2.6666666667vw 0 0 2.6666666667vw;
  box-shadow: inset 0.2666666667vw 0.2666666667vw
    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.4666666667vw;
  height: 20.8vw;
}
.beforelogin .login-button,
.afterlogin .login-button {
  width: 34%;
  height: 100%;
  background: var(--board-login-bg);
  box-shadow: inset 0 0.2666666667vw
    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.1333333333vw;
  background: var(--board-login-btn-bg);
  color: var(--board-login-btn-txt);
  text-shadow: 0 0 0.8vw 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 0.8vw 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 0.8vw 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.6666666667vw 2.6666666667vw 0;
  background: var(--board-register-bg);
  box-shadow: inset 0 0.2666666667vw
    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.6666666667vw 4.8vw;
}
.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.2vw;
  line-height: 4.8vw;
}
.afterlogin .main-wallet .amount,
.afterlogin .main-wallet .bonus,
.afterlogin .balance .amount,
.afterlogin .balance .bonus {
  color: var(--board-wallet-amount);
  font-size: 4.2666666667vw;
  font-weight: 500;
  line-height: 6.9333333333vw;
}
.afterlogin .main-wallet .icon,
.afterlogin .balance .icon {
  display: inline-block;
  width: 3.2vw;
  height: 3.2vw;
}
.afterlogin .icon-refresh {
  display: inline-block;
  width: 3.2vw;
  height: 3.2vw;
  margin-left: 2.1333333333vw;
  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.4666666667vw 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.2vw;
}
.third-party-login.forgot-password .input-group label {
  padding: 0;
}
.third-party-login.forgot-password .button {
  margin: 2.6666666667vw 2.1333333333vw;
  width: calc(100% - 4.2666666667vw);
  height: 12vw;
  font-size: 4vw;
  line-height: 12vw;
  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.4vw;
}
.third-party-login.forgot-password .contact-wrap .icon {
  margin-top: 3.2vw;
  width: 32vw;
  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.1333333333vw;
}
.third-party-login.forgot-password .contact-wrap .info {
  color: var(--forgot-password-contact-txt-color, var(--color-title));
  font-size: 4.2666666667vw;
  line-height: 1.3;
  text-align: center;
}
.third-party-login.forgot-password .contact-wrap .btn-group {
  margin: 2.1333333333vw;
}
.third-party-login.forgot-password .contact-wrap .button {
  width: 100%;
  margin: 3.2vw 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: 80vw;
  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.1333333333vw 2.1333333333vw 2.1333333333vw 4.2666666667vw;
}
.third-party-login.forgot-password .reset-wrap .accordion-wrap .a-list li {
  margin: 1.0666666667vw 4.2666666667vw;
}
.third-party-login.forgot-password .reset-wrap .error-message:before {
  flex: 0 0 4.2666666667vw;
}
.third-party-login.forgot-password .reset-wrap .button {
  width: calc(100% - 4.2666666667vw);
  margin: 2.6666666667vw 2.1333333333vw;
}
.announcement-row {
  display: flex;
  position: relative;
  width: 100%;
  height: 8vw;
  margin: 1.0666666667vw 0;
  background-color: var(--announvement-bg);
  color: var(--announvement-txt);
  font-size: 3.2vw;
  line-height: 8vw;
}
.announcement-row .marquee {
  width: 100%;
  margin: 0 2.1333333333vw 0 8vw;
  overflow: hidden;
}
.announcement-row .marquee .item-icon-wrap {
  position: absolute;
  left: 0;
  display: block;
  width: 8vw;
  height: 8vw;
  background: var(--announvement-bg);
  z-index: 1;
}
.announcement-row .marquee .item-icon {
  position: absolute;
  left: 0;
  display: block;
  width: 8vw;
  height: 8vw;
  background: var(--announvement-icon-color);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: 50%;
  z-index: 1;
}
.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.3333333333vw;
}
.member-menu-content {
  padding: 3.2vw;
  background: var(--sidenav-bg);
}
.member-menu-box {
  width: 100%;
  height: auto;
  margin: 0 0 3.2vw;
  padding-top: 1.0666666667vw;
  border-radius: 2.6666666667vw;
  background: var(--sidenav-category-area-bg);
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw
    color-mix(in srgb, var(--inset-shadow), transparent 90%);
  font-size: 3.2vw;
}
.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.2666666667vw;
}
.member-menu-box .title h2 {
  color: var(--sidenav-shortcut-txt);
  line-height: 8vw;
}
.member-menu-box ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 0 2.1333333333vw;
}
.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.1333333333vw;
  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 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.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.7333333333vw;
  text-align: center;
}
.member-menu-box ul li a h6 {
  display: block;
  color: var(--color-text);
  font-size: 2.6666666667vw;
  line-height: 3.7333333333vw;
}
.member-menu-box ul li a span {
  display: block;
  position: relative;
  left: 50%;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  -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.1333333333vw;
}
.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.4vw;
  height: 6.4vw;
  display: block;
  overflow: hidden;
  border-radius: 1.3333333333vw;
}
.member-menu-box ul li a:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: var(--sidenav-category-icon-bg);
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  transform: translate(52%);
}
.member-menu-box ul li .notice {
  display: none;
  position: absolute;
  top: 30%;
  right: 45%;
  width: 4vw;
  height: 4vw;
  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.6666666667vw;
  height: 0.5333333333vw;
  transform: translate(-50%, -50%);
  border-radius: 1.3333333333vw;
  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: 0.5333333333vw;
  height: 2.6666666667vw;
  transform: translate(-50%, -50%);
  border-radius: 1.3333333333vw;
  background: var(--sidenav-set-shortcut-add-icon-color);
}
.member-menu-box ul li .notice.inbox {
  display: block;
  font-size: 3.2vw;
  font-weight: 700;
  line-height: 4vw;
  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: 4vw;
  height: 4vw;
  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: 4vw;
  height: 4vw;
  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.7333333333vw;
  font-weight: 700;
  line-height: 3.7333333333vw;
  text-align: center;
}
.member-menu-box .member-menu-shortcut li .notice:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  width: 2.6666666667vw;
  height: 0.5333333333vw;
  border-radius: 1.3333333333vw;
  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.8666666667vw;
}
.member-menu-box .button-set .icon-set,
.member-menu-box .button-setup .icon-set {
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  margin: 0 auto 2.6666666667vw;
  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.6666666667vw;
  height: 10.6666666667vw;
  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.7333333333vw;
  text-align: center;
}
.member-menu-box .button-setup {
  display: none;
  animation: button-center 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.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(0.6);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.member-menu-box .member-menu-service {
  padding: 2.1333333333vw 5.3333333333vw;
}
.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.2vw;
  text-decoration: none;
}
.member-menu-box .member-menu-service a p {
  margin-bottom: 1.3333333333vw;
  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.1333333333vw 2.1333333333vw;
  text-align: center;
  padding: 2.6666666667vw 4.2666666667vw;
}
.member-menu-point i {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 8.5333333333vw;
  height: 8.5333333333vw;
  margin-right: 2.1333333333vw;
}
.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.2vw;
  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.2666666667vw 0;
  border-radius: 2.6666666667vw;
  background: var(--secondary);
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw
    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.2666666667vw;
  text-decoration: none;
}
.member-menu-logout a p {
  display: inline-block;
  color: var(--color-title);
  font-size: 5.3333333333vw;
  line-height: 4.2666666667vw;
  text-align: center;
  text-shadow: 0 0.2666666667vw 0.8vw
    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.5333333333vw);
  margin: 4.2666666667vw auto;
}
.login-info-box {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0 0.5333333333vw;
}
.forgetpassword-buttn {
  font-size: 3.4666666667vw;
}
.forgetpassword-buttn a {
  display: block;
  padding: 1.0666666667vw;
  border: 0.2666666667vw solid var(--login-forgetpassword-btn-border);
  border-radius: 1.3333333333vw;
  color: var(--login-forgetpassword-btn-txt);
  text-decoration: none;
}
.member-content p,
.login-biometric-content p {
  padding: 0 4.2666666667vw;
  color: var(--login-txt);
  font-size: 3.4666666667vw;
  line-height: 1.2;
  text-align: center;
}
.member-content p a,
.login-biometric-content p a {
  color: var(--login-link);
  margin-left: 2.1333333333vw;
}
.member-content .signup a,
.login-biometric-content .signup a {
  margin-left: 2.1333333333vw;
  text-decoration: underline;
}
.member-box {
  position: relative;
  margin: 4.2666666667vw 4.2666666667vw 0;
}
.member-box:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0.2666666667vw;
  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.2666666667vw;
}
.biometric-group {
  display: inline-block;
  margin-top: 8.5333333333vw;
  text-decoration: none;
}
.biometric-group .btn-biometric {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 26.6666666667vw;
  height: 26.6666666667vw;
  margin: 0 auto 2.1333333333vw;
  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.3333333333vw;
  height: 21.3333333333vw;
}
.biometric-group .btn-biometric .ripple {
  position: absolute;
  z-index: -1;
  width: 26.6666666667vw;
  height: 26.6666666667vw;
  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: 4vw;
  text-align: center;
}
.biometric-group.identify {
  position: relative;
  padding: 2.6666666667vw;
}
.biometric-group.identify:before,
.biometric-group.identify:after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 32vw;
  height: 32vw;
  transform: translate(-50%);
  border: 2.1333333333vw 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.1333333333vw solid
    color-mix(in srgb, var(--biometric-btn), transparent 80%);
}
.biometric-group.identify .ripple {
  display: none;
}
.biometric-group.identify .btn-biometric {
  margin-bottom: 8.5333333333vw;
}
@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: 0.3;
  }
  to {
    width: 37.3333333333vw;
    height: 37.3333333333vw;
    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.6vw;
}
.layout-list {
  display: none;
}
.layout-list.active {
  display: block;
}
.card1,
.card2 {
  width: 100%;
  height: auto;
  margin-bottom: 2.6666666667vw;
  border-radius: 0.8vw;
}
.card1 ul,
.card2 ul {
  display: grid;
  grid-gap: 1.0666666667vw;
  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.2666666667vw;
  background: var(--nav-item-bg);
  box-shadow: 0 1.6vw 1.3333333333vw
      color-mix(in srgb, var(--nav-item-bg-shadow), transparent 90%),
    inset 0 0.2666666667vw 0.5333333333vw
      color-mix(in srgb, var(--inset-shadow), transparent 90%);
}
.card1 li span,
.card2 li span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 8vw;
  height: 5.3333333333vw;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 70%;
}
.card1 li span.icon-new,
.card2 li span.icon-new {
  width: 7.2vw;
  height: 7.2vw;
  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.0666666667vw auto;
  height: auto;
}
.card1 li p,
.card2 li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5333333333vw 1.3333333333vw 2.6666666667vw;
  color: var(--color-title);
  font-size: 3.2vw;
  text-align: center;
}
.card1 li .nav-icon-color,
.card2 li .nav-icon-color {
  position: relative;
  width: 11.2vw;
  height: 11.2vw;
  margin: 1.0666666667vw 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.0666666667vw auto;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  -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.7333333333vw;
  height: 11.7333333333vw;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 1.0666666667vw 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);
}
mcd-next-event .nextevent .title {
  padding: 0;
  margin: 2.1333333333vw 0;
}
mcd-next-event .content-title h2 {
  font-size: 3.7333333333vw;
  font-weight: 500;
  letter-spacing: 0.2666666667vw;
}
mcd-next-event .content-title h2:before {
  margin-right: 3.2vw;
}
.progress-bar .bar {
  position: relative;
  width: 100%;
  height: 1.3333333333vw;
  margin-bottom: 1.3333333333vw;
  border-radius: 1.3333333333vw;
  background: var(--bonuswallet-progress-bar-bg);
  box-shadow: inset 0 0 0.2666666667vw 0
    var(--bonuswallet-progress-bar-bg-shadow);
}
.progress-bar .bar-inner {
  position: absolute;
  left: 0;
  width: 60%;
  height: 100%;
  border-radius: 1.3333333333vw;
  background: var(--bonuswallet-progress-bar-bg-mine);
  box-shadow: 0 0.2666666667vw 0.8vw 0.2666666667vw
      color-mix(
        in srgb,
        var(--bonuswallet-progress-bar-bg-shadow-mine),
        transparent 60%
      ),
    0 0 0.8vw
      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: 0.8vw;
  height: 0.8vw;
  transform: translate(-50%, -50%);
  border-radius: 0.8vw;
  background-color: #fff;
  box-shadow: 0 0 0.5333333333vw 0.2666666667vw
    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.6666666667vw;
}
.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 0.2666666667vw 0.8vw 0.2666666667vw
      color-mix(
        in srgb,
        var(--bonuswallet-progress-bar-bg-active-shadow),
        transparent 60%
      ),
    0 0 0.8vw
      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 0.5333333333vw 0.2666666667vw
    var(--bonuswallet-progress-bar-bg-active-shadow);
}
.searchpage {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 17.0666666667vw;
  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 0.3s, opacity 0s 0.3s;
}
.searchpage .search-top-info {
  opacity: 0;
}
.searchpage.active {
  right: 0;
  opacity: 1;
  transition: right 0.3s, opacity 0s 0s;
}
.searchpage.active .search-top-info {
  opacity: 1;
}
.searchpage.game-page-filter {
  transition: right 0s 0.3s, opacity 0.3s;
}
.searchpage.active-fide-in {
  right: 0;
  opacity: 1;
  transition: opacity 0.3s 0.3s;
}
.searchpage.active-fide-in .search-top-info {
  opacity: 1;
}
.searchpage.active-fide-in .search-top-info input {
  width: calc(100% - 16vw);
}
.searchpage .button {
  border: 0;
  outline: none;
  font-size: 5.3333333333vw;
  line-height: 13.3333333333vw;
}
@keyframes accordion-move-up {
  0% {
    top: 0;
  }
  75% {
    top: 13.3333333333vw;
  }
  to {
    top: 0;
  }
}
.search-top-block {
  z-index: 0;
  display: block;
  position: relative;
  top: 0;
  opacity: 1;
  transition: top 0.3s, z-index 0s 0.3s;
}
.search-top-block:after {
  content: "";
  z-index: -1;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 13.3333333333vw;
  background: var(--pop-search-header-bg);
}
.search-top-block.active-move-up {
  pointer-events: none;
  z-index: 99999;
  top: -13.3333333333vw;
  opacity: 0;
  transition: top 0.3s, opacity 0.3s 0.5s;
}
.search-top-block.active-move-up:after {
  animation: accordion-move-up 0.4s;
}
.search-top-block.active-move-up input {
  margin-left: 13.3333333333vw;
  width: calc(100% - 16vw);
}
.search-top-info {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 13.3333333333vw;
  background: var(--pop-search-header-bg);
}
.search-top-info .back {
  display: block;
  width: 13.3333333333vw;
  height: 100%;
  text-indent: -2666.4vw;
  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.2vw);
  height: 10.6666666667vw;
  padding: 0;
  border: 0;
  border-radius: 2.6666666667vw;
  outline: none;
  background: var(--pop-search-input-bg);
  color: var(--pop-search-input-txt);
  font-size: 3.7333333333vw;
  text-indent: 5.3333333333vw;
  margin-left: 0;
  transition: margin-left 0.3s, width 0.3s;
}
.search-top-info input::placeholder {
  color: var(--pop-search-input-placeholder);
}
.search-top-info input:has(+ div.icon-search) {
  width: calc(100% - 26.6666666667vw);
}
.search-top-info .icon-search {
  display: block;
  width: 13.3333333333vw;
  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.3333333333vw;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 4.8vw;
}
.search-top-info h6 ~ .back {
  position: absolute;
  left: 0;
}
.searchpage-main {
  position: relative;
  padding: 4.2666666667vw 2.1333333333vw;
}
.searchpage-main .clear-result {
  position: absolute;
  top: 4.2666666667vw;
  right: 2.1333333333vw;
  color: var(--pop-search-clear-txt);
  font-size: 3.2vw;
  text-decoration: underline;
}
.searchpage-main h2 {
  margin-bottom: 1.0666666667vw;
  color: var(--pop-search-title);
  font-size: 4.2666666667vw;
  font-weight: 500;
}
.searchpage-main .check-group {
  padding: 2.1333333333vw;
  background: var(--pop-search-inner-bg);
}
.searchpage-main ul {
  margin-bottom: 0;
}
.search-checkbox-group ul {
  display: grid;
  grid-gap: 1.0666666667vw;
  grid-template-columns: repeat(3, 1fr);
  justify-content: flex-start;
  margin-bottom: 4.2666666667vw;
  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.2vw;
  overflow: hidden;
  background: var(--radio-bg);
  color: var(--radio-txt);
  line-height: 10.6666666667vw;
}
.searchpage-bar {
  position: fixed;
  z-index: 10;
  right: -50%;
  bottom: 0;
  width: 100%;
  padding: 2.1333333333vw;
  transform: translate(50%);
  transition: all 0.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.3333333333vw;
  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: 80vw;
  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: 0.3;
  filter: brightness(2);
}
.no-result video {
  position: relative;
  left: 50%;
  width: 42.6666666667vw;
  height: 42.6666666667vw;
  transform: translate(-50%);
  opacity: 0.7;
}
.no-result .img-no-data {
  position: relative;
  left: 50%;
  width: 42.6666666667vw;
  height: 42.6666666667vw;
  transform: translate(-50%);
  opacity: 0.7;
  filter: brightness(1);
  margin: 0;
}
.no-result .text {
  margin-top: 2.6666666667vw;
  color: var(--form-input-txt-placeholder);
  font-size: 3.4666666667vw;
  line-height: 1.5;
  text-align: center;
}
.switch-mode {
  display: grid;
  grid-gap: 4.2666666667vw;
  grid-template-columns: repeat(2, 1fr);
  margin: 4.2666666667vw;
}
.switch-mode li {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 4.2666666667vw;
  border-radius: 2.6666666667vw;
  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.6666666667vw;
  height: 6.6666666667vw;
  border-bottom-right-radius: 2.1333333333vw;
  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: 0.2666666667vw;
  left: 0.2666666667vw;
  width: calc(100% - 0.5333333333vw);
  height: calc(100% - 0.5333333333vw);
  border-radius: 2.5333333333vw;
  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.1333333333vw;
}
.switch-mode li h4 {
  margin: 2.1333333333vw 0;
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.switch-mode li p {
  font-size: 3.2vw;
}
.mode-tips {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 4.2666666667vw;
  transform: translate(-50%);
  border-radius: 1.3333333333vw;
  background: var(--mode-tips-bg);
  color: var(--mode-tips-txt);
  font-weight: 500;
}
.inner-block {
  margin: 5.3333333333vw;
}
.inner-block li {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background: var(--switch-bg);
  padding: 4.2666666667vw;
  border-radius: 2.6666666667vw;
  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.1333333333vw;
}
.recommend .recommend-title {
  display: flex;
  align-items: center;
  margin: 4.2666666667vw 0 1.6vw;
  color: var(--event-title);
  font-size: 3.7333333333vw;
  font-weight: 500;
  letter-spacing: 0.2666666667vw;
  vertical-align: middle;
}
.recommend .recommend-title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 3.2vw;
  border-radius: 0.5333333333vw;
  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: 72vw;
  height: 41.3333333333vw;
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    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: 48vw;
  margin: 0 2.1333333333vw 2.1333333333vw 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.2666666667vw;
  margin: 4.2666666667vw;
  background: var(--pop-register-success-bg);
  border-radius: 1.3333333333vw;
  text-align: center;
  z-index: 129;
}
.verified-success-close {
  position: absolute;
  right: 2.6666666667vw;
  top: 2.6666666667vw;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  cursor: pointer;
}
.verified-success-close:before,
.verified-success-close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0.5333333333vw;
  background-color: var(--pop-verify-add-success-close-icon);
  border-radius: 10vw;
}
.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.2666666667vw;
}
.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.2666666667vw 0 0;
}
.verified-success-cont .top-inner h4 {
  color: var(--third-party-register-success-subtitle);
  font-size: 3.7333333333vw;
}
.verified-success-cont .top-inner p {
  margin-top: 4.2666666667vw;
  color: var(--third-party-register-success-txt);
  font-size: 3.2vw;
}
.third-party-login .verified-success-wrap .button {
  width: 100%;
  margin: 3.2vw 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: 24vw;
  margin: 2.1333333333vw auto;
  background-position: center;
  background-size: cover;
  width: calc(100% - 4.2666666667vw);
  border-radius: 1.3333333333vw;
}
.games .jackpot .text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  text-align: center;
}
.games .jackpot h2 {
  margin-bottom: 1.3333333333vw;
  color: var(--slot-jackpot-total);
  font-size: 4vw;
  text-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.5);
}
.games .jackpot span {
  display: block;
  color: var(--slot-jackpot-amount);
  font-size: 7.4666666667vw;
  font-weight: 700;
  text-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.5);
}
.games .games-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2.1333333333vw;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 1.0666666667vw;
}
.games .games-box {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 0.8vw;
}
.games .games-box .text {
  position: relative;
  width: 100%;
  height: auto;
  padding: 1.3333333333vw 2.6666666667vw;
  background-color: var(--slot-card-bg);
}
.games .games-box .text h3 {
  width: 83%;
  margin-bottom: 1.3333333333vw;
  overflow: hidden;
  color: var(--slot-card-title);
  font-size: 4vw;
  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.4666666667vw;
}
.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.6666666667vw;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  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.6666666667vw;
  left: 2.6666666667vw;
  padding: 0 1.0666666667vw;
  border-radius: 0.5333333333vw;
  background-color: var(--slot-tag-new-bg);
  color: var(--slot-tag-new-txt);
  font-size: 2.6666666667vw;
  line-height: 4.8vw;
  text-align: center;
  text-shadow: 0 0.2666666667vw 0.2666666667vw
    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: 32vw;
}
.games .prompt {
  width: 100%;
  padding: 4.2666666667vw 0 8vw;
  font-size: 3.4666666667vw;
  text-align: center;
}
.games .jackpot-banner-wrapper {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  transform: translateY(56px);
  padding: 1.6vw 2.1333333333vw 0;
}
.games .jackpot-banner-wrapper .jackpot-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.0666666667vw;
}
.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.2vw;
}
.games .game-jackpot-number-group p.center-peak-major {
  top: 80%;
  left: 80%;
  font-size: 3.2vw;
}
.games .game-jackpot-number-group p.center-peak-mini {
  top: 80%;
  left: 20%;
  font-size: 3.2vw;
}
.games .game-jackpot-number-group p.twin-base-grand {
  top: 45%;
  left: 37%;
  color: #ffe77d;
  font-size: 5.8666666667vw;
}
.games .game-jackpot-number-group p.twin-base-major {
  top: 81%;
  left: 51%;
  font-size: 3.2vw;
}
.games .game-jackpot-number-group p.twin-base-mini {
  top: 81%;
  left: 22%;
  font-size: 3.2vw;
}
.games .game-jackpot-number-group p.wide-to-narrow-grand {
  top: 27%;
  left: 34%;
  color: #ffe77d;
  font-size: 3.7333333333vw;
}
.games .game-jackpot-number-group p.wide-to-narrow-major {
  top: 55%;
  left: 34%;
  font-size: 3.2vw;
}
.games .game-jackpot-number-group p.wide-to-narrow-mini {
  top: 81%;
  left: 34%;
  font-size: 3.2vw;
}
.games .game-jackpot-number-group p.left-aligned-grand {
  top: 60%;
  left: 34%;
  font-size: 5.3333333333vw;
}
.games .game-jackpot-number-group p.center-aligned-grand {
  top: 69%;
  left: 50%;
  font-size: 6.9333333333vw;
}
.games .game-jackpot-number-group p.right-aligned-grand {
  top: 58%;
  left: 66%;
  font-size: 5.3333333333vw;
}
.games-main.main-vertical {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(29.3333333333vw, 1fr));
  grid-gap: 1.3333333333vw;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 2.4vw;
}
.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.8666666667vw;
  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.3333333333vw;
  height: 13.3333333333vw;
}
.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: 8vw;
  height: 8vw;
  transform: translateY(0) rotate(0);
  transition: all 0.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.3333333333vw;
  opacity: 0;
  animation: fadeIn 0.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.6vw;
  margin: 0 auto;
  text-align: center;
  padding: 0 2.6666666667vw;
  font-size: 3.4666666667vw;
  z-index: 2;
  line-height: 3.7333333333vw;
  letter-spacing: 0.2666666667vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.games-main.main-vertical .default-image .game-group,
.games-main.main-vertical .image .game-group {
  position: absolute;
  bottom: 4.2666666667vw;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.8666666667vw;
  line-height: 1.8666666667vw;
  letter-spacing: 0.8vw;
  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%;
}
.iplimit-card-wrap {
  display: block;
  height: auto;
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.8vw 1.3333333333vw
    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.2666666667vw;
  line-height: 1.5;
}
.iplimit-card-wrap .top-inner h3 {
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 12.8vw;
  font-weight: 700;
  line-height: normal;
}
.iplimit-card-wrap .top-inner h4 {
  margin-bottom: 8vw;
  font-size: 4.8vw;
}
.games-empty-container {
  display: inline-block;
  position: relative;
  width: calc(100% - 4.2666666667vw);
  margin: 0 2.1333333333vw 12.8vw;
  padding: 4.2666666667vw;
  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.1333333333vw;
  vertical-align: middle;
}
.games-empty-container .top-inner h4 {
  margin-bottom: 15px;
  opacity: 0.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.3333333333vw 2.6666666667vw;
  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.2666666667vw;
  transform: translate(-50%, -50%);
  border-radius: 2.6666666667vw;
  background: var(--pop-register-success-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0.5333333333vw 0.5333333333vw 0.2666666667vw #0000001a,
    0 1.0666666667vw 1.0666666667vw 0.2666666667vw #0000001a,
    0 2.1333333333vw 2.1333333333vw 0.2666666667vw #0000001a,
    0 4.2666666667vw 4.2666666667vw 0.2666666667vw #0000001a,
    0 8.5333333333vw 8.5333333333vw 0.2666666667vw #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.4666666667vw;
  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.1333333333vw;
  color: var(--pop-register-success-subtitle);
  font-size: 4.8vw;
  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.6666666667vw;
  margin-bottom: 4.2666666667vw;
  padding: 1.0666666667vw 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--pop-register-success-txt);
  font-size: 4vw;
  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: 12vw;
  padding: 0 2.6666666667vw;
  line-height: 12vw;
  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.6666666667vw;
}
.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.0666666667vw 2.1333333333vw;
  border: 0;
}
.success-checkmark {
  width: 24vw;
  height: 25.3333333333vw;
  margin: 0 auto;
  overflow: hidden;
}
.success-checkmark .check-icon {
  position: relative;
  box-sizing: content-box;
  width: 21.3333333333vw;
  height: 21.3333333333vw;
  border: 1.0666666667vw solid var(--register-success-check-icon);
  border-radius: 50%;
}
.success-checkmark .check-icon:before {
  top: 0.8vw;
  left: -0.5333333333vw;
  width: 8vw;
  transform-origin: 100% 50%;
  border-radius: 26.6666666667vw 0 0 26.6666666667vw;
}
.success-checkmark .check-icon:after {
  top: 0;
  left: 8vw;
  width: 16vw;
  transform-origin: 0 50%;
  animation: rotate-circle 4s ease-in;
  border-radius: 0 26.6666666667vw 26.6666666667vw x 0;
}
.success-checkmark .check-icon:before,
.success-checkmark .check-icon:after {
  content: "";
  position: absolute;
  height: 26.6666666667vw;
  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.3333333333vw;
  border-radius: 0.5333333333vw;
  background-color: var(--register-success-check-icon);
}
.success-checkmark .check-icon .icon-line.line-tip {
  top: 12.2666666667vw;
  left: 3.7333333333vw;
  width: 6.6666666667vw;
  transform: rotate(45deg);
  animation: icon-line-tip 0.7s;
}
.success-checkmark .check-icon .icon-line.line-long {
  top: 10.1333333333vw;
  right: 2.1333333333vw;
  width: 12.5333333333vw;
  transform: rotate(-45deg);
  animation: icon-line-long 0.7s;
}
.success-checkmark .check-icon .icon-circle {
  position: absolute;
  z-index: 10;
  top: -1.0666666667vw;
  left: -1.0666666667vw;
  box-sizing: content-box;
  width: 21.3333333333vw;
  height: 21.3333333333vw;
  border: 1.0666666667vw 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.1333333333vw;
  left: 6.9333333333vw;
  width: 1.3333333333vw;
  height: 22.6666666667vw;
  transform: rotate(-45deg);
  background-color: var(--register-success-check-icon-clip);
}
.fail-checkmark {
  width: 24vw;
  height: 25.3333333333vw;
  margin: 0 auto;
  overflow: hidden;
}
.fail-checkmark .check-icon {
  position: relative;
  box-sizing: content-box;
  width: 21.3333333333vw;
  height: 21.3333333333vw;
  border: 1.0666666667vw solid var(--register-fail-check-icon);
  border-radius: 50%;
}
.fail-checkmark .check-icon:before {
  top: 0.8vw;
  left: -0.5333333333vw;
  width: 8vw;
  transform-origin: 100% 50%;
  border-radius: 26.6666666667vw 0 0 26.6666666667vw;
}
.fail-checkmark .check-icon:after {
  top: 0;
  left: 8vw;
  width: 16vw;
  transform-origin: 0 50%;
  animation: rotate-circle 4s ease-in;
  border-radius: 0 26.6666666667vw 26.6666666667vw x 0;
}
.fail-checkmark .check-icon:before,
.fail-checkmark .check-icon:after {
  content: "";
  position: absolute;
  height: 26.6666666667vw;
  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.3333333333vw;
  transform-origin: left;
  border-radius: 0.5333333333vw;
  background-color: var(--register-fail-check-icon);
}
.fail-checkmark .check-icon .icon-line.line-tip {
  transform: rotate(45deg) translate(-50%);
  animation: icon-line 0.4s 0.5s forwards;
}
.fail-checkmark .check-icon .icon-line.line-long {
  transform: rotate(-45deg) translate(-50%);
  animation: icon-line 0.4s 0.5s forwards;
}
.fail-checkmark .check-icon .icon-circle {
  position: absolute;
  z-index: 10;
  top: -1.0666666667vw;
  left: -1.0666666667vw;
  box-sizing: content-box;
  width: 21.3333333333vw;
  height: 21.3333333333vw;
  border: 1.0666666667vw 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.1333333333vw;
  left: 6.9333333333vw;
  width: 1.3333333333vw;
  height: 22.6666666667vw;
  transform: rotate(-45deg);
  background-color: var(--register-fail-check-icon-clip);
}
@keyframes icon-line {
  0% {
    width: 0;
  }
  to {
    width: 13.3333333333vw;
  }
}
@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.0666666667vw;
    left: 0.2666666667vw;
    width: 0;
  }
  54% {
    top: 5.0666666667vw;
    left: 0.2666666667vw;
    width: 0;
  }
  70% {
    top: 9.8666666667vw;
    left: -2.1333333333vw;
    width: 13.3333333333vw;
  }
  84% {
    top: 12.8vw;
    left: 5.6vw;
    width: 4.5333333333vw;
  }
  to {
    top: 12vw;
    left: 3.7333333333vw;
    width: 6.6666666667vw;
  }
}
@keyframes icon-line-long {
  0% {
    top: 14.4vw;
    right: 12.2666666667vw;
    width: 0;
  }
  65% {
    top: 14.4vw;
    right: 12.2666666667vw;
    width: 0;
  }
  84% {
    top: 9.3333333333vw;
    right: 0;
    width: 14.6666666667vw;
  }
  to {
    top: 10.1333333333vw;
    right: 2.1333333333vw;
    width: 12.5333333333vw;
  }
}
.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: 5vw;
  height: 5vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2.6666666667vw;
  z-index: 2;
}
.header-inner-promotion .page-main-close:hover {
  opacity: 0.7;
}
.header-inner-promotion .page-main-close:after,
.header-inner-promotion .page-main-close:before {
  content: "";
  display: block;
  height: 80%;
  width: 0.5vw;
  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: 10vw;
  background: var(--page-main-close-color);
}
.promotion {
  width: 100%;
  height: auto;
}
.promotion .promotion-main {
  padding: 0 2.1333333333vw;
}
.promotion .prompt {
  margin: 4.2666666667vw 0 8vw;
  font-size: 3.4666666667vw;
  text-align: center;
}
.content-style h1 {
  font-size: 8.5333333333vw;
  font-weight: 700;
}
.content-style h2 {
  font-size: 6.4vw;
  font-weight: 700;
}
.content-style h3 {
  margin-bottom: 1.0666666667vw;
  overflow: hidden;
  color: var(--promotion-card-title);
  font-size: 4.2666666667vw;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-style h4 {
  margin-bottom: 2.1333333333vw;
  font-size: 3.7333333333vw;
  font-weight: 700;
}
.content-style p {
  min-height: 6.6666666667vw;
  margin: 1.0666666667vw 0;
  font-size: 3.7333333333vw;
  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.0666666667vw;
}
.content-style strong {
  font-weight: 700;
}
.content-style em {
  font-style: italic;
}
.content-style ol,
.content-style ul {
  margin: 2.6666666667vw 0;
}
.content-style ol li,
.content-style ul li {
  margin: 0 0 1.3333333333vw;
  font-size: 3.4666666667vw;
  line-height: 5.3333333333vw;
}
.content-style ol li {
  margin: 0 0 1.3333333333vw 4vw;
  list-style-type: decimal;
  text-indent: 0;
}
.content-style .table {
  width: 100%;
  margin-bottom: 4vw;
  overflow-x: scroll;
  overflow-y: hidden;
  border-radius: 2.6666666667vw;
  text-align: left;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.content-style table tbody {
  border-radius: 2.6666666667vw;
}
.content-style table th,
.content-style table td {
  width: 20%;
  padding: 2.1333333333vw 4.2666666667vw;
  border: 0.2666666667vw solid var(--pop-promotion-table-content-border);
  font-size: 3.4666666667vw;
  line-height: 4.2666666667vw;
  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.4666666667vw;
}
.content-style .times i {
  display: inline-block;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin-right: 1.3333333333vw;
  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.3333333333vw;
}
.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.6666666667vw;
  overflow-x: scroll;
  border-radius: 2.6666666667vw;
  background: var(--pop-turnover-table-bg);
  -webkit-overflow-scrolling: touch;
}
.content-style .form-wrap .arrow {
  position: absolute;
  top: 50%;
  right: 0.5333333333vw;
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  animation: table-arrow 0.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.6666666667vw 2.1333333333vw;
  color: var(--pop-turnover-table-txt);
  font-size: 3.2vw;
  white-space: nowrap;
}
.content-style .game-platform ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 2.6666666667vw;
}
.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.6vw;
  margin-top: 2.1333333333vw;
  font-size: 3.7333333333vw;
  line-height: 9.6vw;
}
.content-style .button .toggle {
  display: inline-block;
  position: relative;
  width: 4vw;
  height: 4vw;
  margin-right: 0.8vw;
  transition: all 0.3s;
  border-radius: 4vw;
  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.1333333333vw;
  height: 0.4vw;
  transform: translate(-50%, -50%);
  border-radius: 0.5333333333vw;
  background-color: var(--primary);
}
.content-style .button .toggle:after {
  width: 0.4vw;
  height: 2.1333333333vw;
}
.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.6666666667vw;
}
.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: 800vw;
}
.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.1333333333vw;
  overflow: hidden;
  border-radius: 1.3333333333vw;
  background: var(--promotion-bg);
  color: var(--promotion-card-txt);
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
.promotion-box__tag {
  display: block;
  position: absolute;
  z-index: 2;
  top: 2.6666666667vw;
  left: 0;
  border-radius: 0 1.3333333333vw 1.3333333333vw 0;
  padding: 0 2.1333333333vw;
  font-size: 2.6666666667vw;
  line-height: 4.8vw;
  text-align: center;
  text-shadow: 0 0.2666666667vw 0.2666666667vw
    color-mix(in srgb, var(--text-shadow), transparent 80%);
}
.promotion-box__tag:before,
.promotion-box__tag:after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.3333333333vw;
  height: 1.3333333333vw;
}
.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.4666666667vw;
  background-color: #ddd;
  animation: fadeIn 0.5s;
}
.promotion-box .pic img {
  display: block;
  width: 100%;
  height: 100%;
}
.promotion-box .cutoff {
  position: absolute;
  right: 2.1333333333vw;
  bottom: 2.1333333333vw;
  width: auto;
  height: 6.6666666667vw;
  padding: 0 2.1333333333vw;
  border-radius: 0.5333333333vw;
  background: var(--promotion-info-bg);
  color: var(--promotion-info-txt);
  font-size: 3.2vw;
  line-height: 6.6666666667vw;
  text-align: center;
}
.promotion-box .promotion-box-inner {
  display: block;
  width: 100%;
  height: auto;
  padding: 3.2vw;
}
.promotion-box .promotion-box-inner .text-main {
  display: block;
  width: 100%;
  max-height: 12.8vw;
  overflow: hidden;
  transition: all 0.6s;
}
.button-box {
  display: flex;
  overflow: hidden;
}
.promo-code-form {
  margin-bottom: 4.2666666667vw;
}
.promo-code-form .input-group {
  height: 8vw;
  padding-bottom: 0;
  border-radius: 1.3333333333vw;
}
.promo-code-form .input-group .promo-code-add-btn {
  position: absolute;
  text-align: center;
  line-height: 8vw;
  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: 12vw;
  height: 8vw;
}
.promo-code-form .input-group input {
  height: 8vw;
  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.7333333333vw;
}
.custom-promo-code-form .promo-code-title {
  cursor: pointer;
  opacity: 1;
  display: block;
  color: var(--form-inputgroup-input-title);
  margin-bottom: 2.6666666667vw;
  font-size: 3.7333333333vw;
  display: flex;
  align-items: center;
}
.custom-promo-code-form .promo-code-title .icon-arrow {
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  padding-top: 0.5333333333vw;
  margin-left: 2.6666666667vw;
  transition: transform 0.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: 0.7;
}
.custom-promo-code-form .input-group {
  height: 13.3333333333vw;
  padding-bottom: 0;
  border-radius: 1.3333333333vw;
  font-size: 3.7333333333vw;
  margin-bottom: 2.6666666667vw;
  transition: height 0.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.3333333333vw;
  opacity: 1;
  background-color: var(--form-inputgroup-btn-bg);
  color: var(--form-inputgroup-btn-txt);
  inset: 0 0 0 auto;
  min-width: 18.6666666667vw;
  max-width: 37.3333333333vw;
  height: 13.3333333333vw;
  transition: height 0.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: 0.7;
}
.custom-promo-code-form .input-group .icon-loader {
  width: 7.4666666667vw;
  height: 7.4666666667vw;
  background: var(--form-inputgroup-btn-txt);
  animation: spin 2s linear infinite;
}
.custom-promo-code-form .input-group input {
  height: 13.3333333333vw;
  padding: 0 3.2vw;
  transition: height 0.3s;
  font-size: 3.7333333333vw;
  background-color: var(--form-inputgroup-input-bg);
  color: var(--form-inputgroup-input-txt);
}
.custom-promo-code-form .input-group input:focus {
  padding: 0 2.9333333333vw;
  border: 0.2666666667vw solid var(--form-inputgroup-btn-bg);
}
.custom-promo-code-form .input-group input::placeholder {
  font-size: 3.7333333333vw;
}
.custom-promo-code-form .input-group.fold {
  height: 0vw;
}
.custom-promo-code-form .input-group.fold input {
  height: 0vw;
  border: 0;
}
.custom-promo-code-form .input-group.fold .promo-code-add-btn {
  height: 0vw;
}
.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.7333333333vw;
  display: flex;
  align-items: center;
}
.custom-promo-code-form .promo-code-msg .icon {
  flex-shrink: 0;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin-right: 1.6vw;
  padding: 0.5333333333vw;
  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.1333333333vw 2.1333333333vw 13.8666666667vw;
}
.article-content {
  width: auto;
  padding: 2.1333333333vw;
  background: var(--about-us-bg);
}
.article-content-title {
  margin-bottom: 4.2666666667vw;
  color: var(--about-us-table-title);
  font-size: 4.2666666667vw;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5;
}
.article-detail {
  margin-bottom: 6.4vw;
  line-height: 1.5;
}
.article-detail-tile {
  margin-bottom: 2.1333333333vw;
  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.4666666667vw;
  font-style: italic;
  font-weight: 700;
}
.article-detail-content .text {
  width: inherit;
  margin-bottom: 6.4vw;
  color: var(--about-us-table-title-txt);
  font-size: 3.4666666667vw;
  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.3333333333vw;
  margin-left: 5.3333333333vw;
  color: var(--about-us-table-title-txt);
  font-size: 3.4666666667vw;
  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.3333333333vw;
  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.3333333333vw;
}
.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.2666666667vw;
}
.article-detail-content .point:before {
  content: "\25b8";
  display: block;
  margin-right: 2.1333333333vw;
  margin-left: -4vw;
  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.3333333333vw;
  border-collapse: separate;
  border: 0.2666666667vw solid var(--about-us-table-title-border);
  border-radius: 2.6666666667vw;
  background-color: var(--about-us-table-bg);
  font-size: 3.2vw;
  line-height: 1.4;
}
.article-detail .table-title {
  padding: 0 2.6666666667vw;
  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.1333333333vw 0 0;
}
.article-detail .table-title:last-child {
  border-radius: 0 2.1333333333vw 0 0;
}
.article-detail .table td {
  padding: 1.6vw;
  border-top: 0.2666666667vw 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.1333333333vw;
}
.phone-area-code .btn-select span {
  max-width: 19.2vw;
  overflow: hidden;
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 4.8vw;
}
.phone-area-code .btn-select:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 5.3333333333vw;
  right: 2.1333333333vw;
  border-width: 1.0666666667vw;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent;
}
.lang-select {
  position: relative;
  font-size: 3.7333333333vw;
}
.phone-code-list,
.currency-code-list,
.social-code-list {
  position: absolute;
  z-index: 135;
  top: 12vw;
  left: 0;
  width: 100%;
  max-height: 58.6666666667vw;
  padding: 0 1.0666666667vw;
  overflow: scroll;
  border-radius: 1.0666666667vw;
  background: var(--form-input-bg);
  box-shadow: 0 0.5333333333vw 1.0666666667vw #345ece26;
}
.phone-code-list li,
.currency-code-list li,
.social-code-list li {
  display: flex;
  margin-bottom: 0;
  padding: 2.1333333333vw 0;
  list-style: none;
}
.phone-code-list img,
.currency-code-list img,
.social-code-list img {
  margin: 1.0666666667vw;
  border-radius: 50%;
}
.phone-code-list span,
.currency-code-list span,
.social-code-list span {
  color: var(--form-input-txt);
  font-size: 4.2666666667vw;
}
.phone-code-list img,
.social-code-list img,
.btn-select img {
  width: 8vw;
  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.0666666667vw;
}
.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.3333333333vw;
  box-shadow: 0 0.5333333333vw 1.0666666667vw #345ece26;
}
.open {
  display: show !important;
}
.logo-box {
  display: flex;
  position: relative;
  width: 53.3333333333vw;
  height: 12vw;
  margin: 8.5333333333vw auto;
  overflow: hidden;
  border: 0;
  background: no-repeat center center/contain;
}
.btn-select {
  position: relative;
  width: 100%;
  height: 11.7333333333vw;
  padding: 0 0 0 2.1333333333vw;
  border: 0;
  border-radius: 1.0666666667vw;
  background: var(--form-input-bg);
  color: var(--form-input-txt);
  font-size: 3.2vw;
}
.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: 0.2666666667vw solid var(--color-input-form-disabled);
  border-radius: 0;
  background: none;
}
.resend-set {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 4.2666666667vw;
  color: var(--wallet-otp-resend-txt);
  font-size: 3.2vw;
  line-height: 11.7333333333vw;
}
.resend-set.active {
  display: inline-block;
}
.btn-vcode {
  height: 11.7333333333vw;
  padding: 0 2.6666666667vw;
  transition: 0.3s;
  background: var(--wallet-otp-send-btn-bg);
  font-size: 3.4666666667vw;
  line-height: 11.7333333333vw;
  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.2666666667vw;
  line-height: 10.6666666667vw;
}
.btn-vcode p span {
  display: none;
  width: 0.8vw;
  height: 0.8vw;
  margin-left: 0.8vw;
  border-radius: 50%;
  background-color: #fff;
}
.btn-vcode.active {
  padding: 0;
  animation: btnmove 0.4s forwards ease-in;
}
.btn-vcode.active .line {
  animation: none;
  opacity: 0;
}
@keyframes btnmove {
  0% {
    right: 0%;
  }
  99% {
    right: -100%;
  }
  to {
    width: 0;
  }
}
.btn-vcode.resend {
  padding: 0 2.6666666667vw;
  animation: resend 0.3s forwards ease-in;
}
@keyframes resend {
  0% {
    right: -100%;
  }
  to {
    right: 0%;
  }
}
.inputbox-tip {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inputbox-tip__icon {
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  background: var(--form-txt);
  margin-left: 2.6666666667vw;
  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.6666666667vw;
  top: 8vw;
  left: 12vw;
  border-radius: 0.8vw;
  background: var(--register-question-tip-bg);
  text-wrap: wrap;
  transition: opacity 0.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: 8vw;
  top: -4.2666666667vw;
  border: 2.6666666667vw 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.6666666667vw;
}
.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.6666666667vw 2.1333333333vw;
}
.third-party-login .quick-login-wrapper .logo-box {
  margin: 7.4666666667vw auto;
}
.third-party-login .quick-login-wrapper .error-message {
  display: grid;
  grid-template-columns: 4.2666666667vw 1fr;
  gap: 2.1333333333vw;
  align-items: start;
}
.third-party-login .login-info-box {
  margin: 0 0.5333333333vw;
}
.third-party-login .input-group + .puzzle-verification-box {
  margin-top: 3.7333333333vw;
}
.third-party-login .input-group + .login-info-box {
  margin-top: 1.3333333333vw;
}
.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: 0.2666666667vw 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.4666666667vw;
}
.third-party-login .input-group.password .clear.hasbutton,
.third-party-login .input-group.new-password .clear.hasbutton {
  right: 29.3333333333vw;
}
.third-party-login .input-group.money label {
  position: absolute;
  z-index: 2;
  top: 6.4vw;
  left: 4.2666666667vw;
  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.4vw;
  left: 4.2666666667vw;
  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.6666666667vw;
  border-radius: 2.1333333333vw;
  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.2666666667vw;
}
.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.2666666667vw;
  transform: translateY(-50%);
  color: #40d0cb;
  font-size: 3.2vw;
  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: 0.5333333333vw;
  width: 3.4666666667vw;
  height: 3.4666666667vw;
  margin-right: 1.3333333333vw;
  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.4666666667vw;
  height: 3.4666666667vw;
  margin-right: 1.3333333333vw;
  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: 0.5333333333vw 1.6vw;
  border-radius: 8vw;
  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: 0.8vw 0 0;
  background: var(--third-party-login-content-bg);
}
.third-party-login .banner .banner-v1 {
  height: 44.8vw;
}
.third-party-login .banner .slider .slick-slide {
  height: 42.1333333333vw;
  margin-bottom: 0;
}
.third-party-login .banner .slick-dots {
  bottom: 2.6666666667vw;
}
.third-party-login .banner .slick-dots li {
  width: 1.6vw;
  height: 1.6vw;
  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.0666666667vw);
  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: 8vw;
}
.third-party-login .btn-primary {
  background: var(--third-party-register-btn-main-bg);
  box-shadow: inset 0 0 0.8vw
    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 0.8vw
    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 0.8vw
    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.3333333333vw;
  height: 5.3333333333vw;
  margin-right: 2.1333333333vw;
  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.6666666667vw 4vw;
  color: var(--third-party-register-tips-txt);
  font-size: 3.7333333333vw;
}
.third-party-login .signup-tips a,
.third-party-login .signup-tips i {
  margin-left: 1.3333333333vw;
  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.8666666667vw;
}
.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.2666666667vw;
  font-size: 3.4666666667vw;
  line-height: 1.2;
}
.third-party-login .player.button-tips + .button-tips {
  margin-top: 2.1333333333vw;
}
.third-party-login .player.button-tips a {
  color: var(--third-party-register-link);
  margin-left: 2.1333333333vw;
}
.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.2666666667vw;
  padding: 0 4vw;
}
.third-party-login .invitation-code p,
.third-party-login .invitation-code span {
  padding: 0;
  color: var(--third-party-register-affiliate);
  font-size: 3.7333333333vw;
  line-height: 1.2;
}
.third-party-login .invitation-code p {
  position: relative;
}
.third-party-login .invitation-code .item-icon {
  display: block;
  width: 4vw;
  height: 4vw;
  margin-right: 2.4vw;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
}
.third-party-login .number-code-captcha {
  position: absolute;
  right: 12vw;
  top: calc(12vw - 4%);
}
.third-party-login .input-status {
  position: absolute;
  z-index: 1;
  top: 9.0666666667vw;
  right: 0;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  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: 0.2666666667vw solid var(--form-input-border);
  border-radius: 1.3333333333vw;
  background: var(--form-input-bg);
}
.third-party-login .puzzle-verification-box .title {
  position: relative;
  padding: 4.5333333333vw;
  border-bottom: 0.2666666667vw 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.7333333333vw;
  line-height: 1.5;
  text-align: left;
}
.third-party-login .puzzle-verification {
  display: block;
  width: 100%;
  padding: 4.2666666667vw;
  overflow: hidden;
}
.third-party-login .puzzle-verification .captcha-pic {
  position: relative;
  width: 100%;
  height: 41.0666666667vw;
  background-position: center;
  background-size: cover;
}
.third-party-login .puzzle-verification .captcha-blank {
  position: absolute;
  top: 50%;
  left: 70%;
  width: 16.5333333333vw;
  height: 16.5333333333vw;
  transform: translateY(-50%);
  stroke: #fff;
  fill: #000;
  stroke-opacity: 0.3;
  fill-opacity: 0.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.2666666667vw;
  margin-top: 4.2666666667vw;
  border: 0.2666666667vw 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.2666666667vw;
}
.third-party-login .puzzle-verification .captcha-bar-btn {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 12.2666666667vw;
  height: 12.2666666667vw;
  background: var(--third-party-login-puzzle-box-slider-btn-bg);
  box-shadow: 0 0.2666666667vw 0.5333333333vw 0
      var(--third-party-shadow-default),
    inset 0 0 0.8vw 0
      var(--third-party-login-puzzle-box-slider-btn-inner-shadow);
  cursor: pointer;
}
.third-party-login .puzzle-verification .captcha-bar-icon {
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  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: 0.2666666667vw 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 0.2666666667vw 2.6666666667vw 0
      var(--third-party-shadow-default),
    inset 0 0 0.8vw 0
      var(--third-party-login-puzzle-box-slider-btn-inner-shadow-success);
}
.third-party-login .puzzle-verification.passed .captcha-bar-icon {
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  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: 0.2666666667vw 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 0.2666666667vw 2.6666666667vw 0
      var(--third-party-shadow-default),
    inset 0 0 0.8vw 0
      var(--third-party-login-puzzle-box-slider-btn-inner-shadow-error);
}
.third-party-login .puzzle-verification.error .captcha-bar-icon {
  width: 3.2vw;
  height: 3.2vw;
  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.2vw;
  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.2vw;
  min-height: 3.2vw;
  margin-right: 2.6666666667vw;
  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.6666666667vw 2.1333333333vw;
}
.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.4666666667vw;
  line-height: 10.6666666667vw;
}
.third-party-login .currency-wrap .currency-area-code {
  width: 100%;
}
.third-party-login .puzzle-refresh {
  display: inline-flex;
  position: absolute;
  right: 4.2666666667vw;
  bottom: calc(50% - 2.6666666667vw);
}
.third-party-login .puzzle-refresh.active {
  animation: rotate 1s forwards;
}
.third-party-login .puzzle-refresh .puzzle-refresh-icon {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  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.1333333333vw;
  transform: unset;
  width: auto;
  box-shadow: none;
  margin: 2.1333333333vw;
}
.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.2666666667vw;
}
.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.2666666667vw 0 0;
}
.third-party-login .register-success-cont .top-inner h4 {
  color: var(--third-party-register-success-subtitle);
  font-size: 3.7333333333vw;
}
.third-party-login .register-success-cont .top-inner p {
  margin-top: 4.2666666667vw;
  color: var(--third-party-register-success-txt);
  font-size: 3.2vw;
}
.third-party-login .register-success-btn {
  flex-wrap: nowrap;
}
.third-party-login .register-success-btn .button {
  margin: 0 0.5333333333vw;
  font-size: 4.8vw;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-wrap: wrap;
  word-break: break-word;
  line-height: 4.8vw;
}
.third-party-login .register-success-btn .button + .button {
  margin-left: 2.1333333333vw;
}
.third-party-login .register-success-btn {
  margin-top: 14.6666666667vw;
}
.third-party-login .user-password-info-box {
  margin: 4vw 0 0;
}
.third-party-login .user-password-info-box + .register-success-btn {
  margin-top: 6.4vw;
}
.third-party-login .user-password-info-box p {
  flex: 1;
  margin-right: 2.6666666667vw;
  color: var(--third-party-login-form-input-txt);
  word-break: break-word;
  font-size: 4.2666666667vw;
}
.third-party-login .back-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8vw;
}
.third-party-login .back-home a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  background: var(--third-party-login-form-input-bg);
  border-radius: 13.3333333333vw;
}
.third-party-login .back-home span {
  display: inline-flex;
  width: 8vw;
  height: 8vw;
  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: 32vw;
  overflow: auto;
  font-size: 3.7333333333vw;
  line-height: 1.5;
  text-align: left;
}
.third-party-login .user-password-info li + li {
  margin-top: 4.2666666667vw;
}
.third-party-login .user-password-info label {
  padding-right: 1.3333333333vw;
  font-size: 3.2vw;
  color: var(--third-party-login-form-txt);
}
.third-party-login .user-password-info label + .info {
  margin-top: 2.6666666667vw;
}
.third-party-login .user-password-info .info {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  height: 11.7333333333vw;
  padding: 0 0 0 4.2666666667vw;
  border-radius: 1.3333333333vw;
  border: 0.2666666667vw 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.2vw;
  border-radius: 0 1.0666666667vw 1.0666666667vw 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: 4vw;
  height: 4vw;
  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.2vw;
  text-align: left;
}
.third-party-login .verification-wrap input[type="number"] {
  border: 0.2666666667vw 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: 0.2666666667vw solid var(--color-danger);
}
.third-party-login .verification-wrap input[type="number"]:focus,
.third-party-login .verification-wrap input[type="number"].input-focus {
  border: 0.2666666667vw 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: 0.2666666667vw solid var(--color-danger);
}
.third-party-login .verification-txt,
.third-party-login .verification-tips {
  margin: 2.1333333333vw auto;
}
.third-party-login .verification-txt p,
.third-party-login .verification-tips p {
  color: var(--third-party-verification-code-txt);
  font-size: 3.7333333333vw;
  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: 0.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: 0.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.3333333333vw;
  border-radius: 1.3333333333vw;
  font-size: 8vw;
  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.1333333333vw;
}
.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.2666666667vw;
  transform: translate(-50%);
  border-radius: 1.3333333333vw;
  background: var(--mode-tips-bg);
  color: var(--mode-tips-txt);
  font-weight: 500;
  right: auto;
  box-shadow: 0 0 1.3333333333vw 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 0.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 0.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: 12vw;
  padding: 0;
  transition: background 0.3s;
  border: 0.2666666667vw solid var(--third-party-login-form-input-border);
  border-radius: 1.3333333333vw;
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 3.2vw;
}
.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.3333333333vw;
  color: var(--third-party-login-tab-txt);
  text-align: center;
}
.third-party-login .login-group label.active {
  transition: all 0.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.2666666667vw;
  height: 0.5333333333vw;
  border-radius: 0.8vw;
  margin: 0 auto;
  animation: scale-in-center 0.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: 12vw;
  height: 12vw;
  transition: all 0.3s;
  background: #ffd259;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 30%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 30%;
}
.third-party-login .another-login-block {
  margin-top: 5.3333333333vw;
  padding-bottom: 9.6vw;
  font-size: 3.7333333333vw;
  text-align: center;
}
.third-party-login .another-login-block .title {
  font-size: 3.7333333333vw;
  color: var(--third-party-login-txt);
  text-align: center;
  text-decoration: none;
  padding: 1.3333333333vw 2.6666666667vw 4vw;
}
.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: 8vw;
  height: 8vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.third-party-login .another-login-block .another-login-icon a + a {
  margin-left: 6.4vw;
}
.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: 8vw;
  height: 8vw;
  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: 40vw;
  height: 0.2666666667vw;
  font-size: 6.9333333333vw;
  color: #6f7784;
  border-top: 0.2666666667vw 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.2666666667vw);
  padding: 0 4.2666666667vw;
  bottom: 0;
  left: 0;
}
.third-party-login .another-login-block.verification a {
  display: block;
  color: var(--third-party-verification-code-link);
  margin-top: 4.2666666667vw;
  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.2vw;
  padding: 1.0666666667vw 2.6666666667vw;
}
.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.2vw;
  font-size: 3.7333333333vw;
  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.7333333333vw;
  height: 3.7333333333vw;
  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: 0.8vw 2.1333333333vw 0 0;
}
.third-party-login .verify-tips.tips-info-toggle h5 span {
  color: var(--third-party-personal-tips-info-txt);
  font-size: 4vw;
  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: 0.5s;
}
.third-party-login .verify-tips.tips-info-toggle .tips-info-block.active {
  display: block;
  transition: 0.5s;
}
.third-party-login .verify-tips.tips-info-toggle .title-box {
  padding: 1.0666666667vw 2.1333333333vw 3.2vw;
}
.third-party-login .verify-tips.tips-info-toggle .toggle-btn {
  width: 3.2vw;
  height: 3.2vw;
  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: 0.3s;
  transform: rotate(90deg);
  margin-left: 2.1333333333vw;
}
.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.2666666667vw;
  padding: 0 3.2vw;
}
.third-party-login .list-group + .list-group {
  margin-top: 3.2vw;
  padding-top: 3.2vw;
  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.1333333333vw;
}
.third-party-login .list-group .item-icon {
  display: table-cell;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin-right: 5.3333333333vw;
  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.3333333333vw;
}
.third-party-login .list-group .list {
  display: table-cell;
  width: calc(100% - 9.6vw);
}
.third-party-login .list-group .button {
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 3.7333333333vw;
  color: var(--third-party-login-btn-main-txt);
  width: 25.3333333333vw;
  height: 8vw;
  line-height: 1;
  background: var(--third-party-login-btn-main-bg);
  box-shadow: 0 0.2666666667vw 2px
      color-mix(
        in srgb,
        var(--third-party-login-btn-main-bg-shadow),
        transparent 70%
      ),
    inset 0 0 0.8vw 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: 8vw;
}
.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 0.2666666667vw 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.6666666667vw;
  transition: 0.5s;
  animation: zoomIn 0.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.2666666667vw;
}
.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: -0.5333333333vw;
  color: var(--third-party-personal-item-tag-txt);
  font-size: 2.6666666667vw;
  background-color: var(--third-party-personal-item-tag-bg);
  padding: 0.8vw 1.0666666667vw;
  border-radius: 1.0666666667vw;
  margin-left: 1.0666666667vw;
}
.third-party-login .list-info .left .tips {
  color: var(--third-party-personal-item-tag-tips);
  font-size: 3.7333333333vw;
}
.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: 0.32vw solid var(--third-party-personal-item-status-border);
  font-size: 3.7333333333vw;
  width: 25.3333333333vw;
  height: 8vw;
  border-radius: 1.0666666667vw;
  line-height: 1;
  margin: 0;
  padding: 0 2.1333333333vw;
  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: 0.2666666667vw 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.2vw;
  margin: 2.6666666667vw 0 0;
  padding-left: 8vw;
  color: var(--third-party-personal-add-phone-txt);
  border-radius: 2.1333333333vw;
  border: 0.32vw 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.8vw;
  height: 8.8vw;
  margin-right: 2.6666666667vw;
  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: 0.5333333333vw;
  height: 3.2vw;
  left: 48%;
  transform: translateY(-50%);
}
.third-party-login .add-phone-btn.show .icon-add-phone-btn:before {
  width: 3.2vw;
  height: 0.5333333333vw;
  transform: translate(-50%, -50%);
}
.third-party-login .currency-code-list {
  display: grid;
  grid-template-columns: 100%;
  justify-content: start;
  padding: 0 1.0666666667vw;
  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.3333333333vw;
}
.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.1333333333vw;
}
.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.3333333333vw;
  right: 2.6666666667vw;
  border-width: 1.0666666667vw;
  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.0666666667vw;
  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.2666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 50%;
  background-color: var(--third-party-login-color-danger);
  color: var(--third-party-bg-default);
  font-size: 3.7333333333vw;
  font-weight: 700;
  line-height: 4.2666666667vw;
  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.8vw;
}
.third-party-login .login-register-btn-wrap {
  background-color: var(--quick-register-entry-btn-wrap-bg);
  padding: 4.2666666667vw 3.2vw;
  display: flex;
  justify-content: space-between;
  gap: 1.3333333333vw;
}
.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: 0.2666666667vw solid var(--quick-register-entry-btn-border);
  padding: 4vw 0;
  width: 100%;
  border-radius: 1.3333333333vw;
}
.third-party-login .login-register-btn-wrap .login-register-icon {
  width: 8vw;
  height: 8vw;
  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.6666666667vw;
  color: var(--quick-register-entry-btn-name);
  font-size: 3.2vw;
  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 0.8vw 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.6666666667vw 0;
  padding: 1.8666666667vw 2.9333333333vw;
  border-radius: 0.8vw;
  border: 0.2666666667vw 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.2vw;
  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.8vw;
  right: 12vw;
  justify-content: flex-end;
  height: 6.6666666667vw;
}
.third-party-login .number-code-captcha canvas {
  height: 8vw !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.0666666667vw;
}
.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.2vw;
  margin-top: 3.2vw;
}
.password-message-block .password-message {
  display: grid;
  grid-template-columns: 4.2666666667vw 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.2666666667vw;
  width: 4.2666666667vw;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  margin: 0;
}
.password-message-block .password-message .message {
  font-size: 3.7333333333vw;
  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: 0.7;
}
.third-party-login .list-group .status.unconfirm-btn {
  cursor: pointer;
  opacity: 1;
}
.third-party-login .list-group .status.unconfirm-btn:hover {
  opacity: 0.7;
}
.third-party-login .input-group .clear,
.third-party-login .input-group .eyes {
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease-in;
}
.third-party-login .input-group .clear:hover,
.third-party-login .input-group .eyes:hover {
  opacity: 0.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.4vw 0 4.2666666667vw;
}
.info-top-type .player-info {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 32vw;
}
.info-top-type .player-info video,
.info-top-type .player-info img {
  height: 42.6666666667vw;
}
.info-top-type .player-info .vip-image {
  width: 40vw;
}
.membername-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 8.5333333333vw 0 0;
}
.membername-wrap .membername {
  width: auto;
  font-size: 4.2666666667vw;
  color: var(--third-party-personal-membername-wrap-txt);
  margin-right: 1.3333333333vw;
}
.membername-wrap .register-date {
  font-size: 3.2vw;
  color: var(--third-party-personal-membername-wrap-tips);
  margin-top: 2.1333333333vw;
}
.membername-wrap .level {
  width: 100%;
  text-align: center;
  font-size: 3.2vw;
  padding: 1.3333333333vw;
  margin-left: 1.3333333333vw;
  background: var(--third-party-personal-membername-wrap-level-bg);
  border-radius: 1.0666666667vw;
  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.3333333333vw;
  transform: translateY(-100%);
  z-index: -1;
  background-color: var(--primary);
  pointer-events: none;
}
.player-top .player-card {
  margin: 1.3333333333vw 2.6666666667vw 6.6666666667vw;
}
.player-top .credit-card {
  margin: 4.2666666667vw 4.2666666667vw 2.1333333333vw;
}
.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: 92vw;
  min-height: 51.2vw;
  margin: 0 auto 6.6666666667vw;
  padding: 6.4vw;
  border-radius: 4vw;
  background: var(--wallet-bank-card-bg);
  box-shadow: 0 0.5333333333vw 0.8vw var(--wallet-bank-card-shadow);
  font-size: 3.2vw;
  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.3333333333vw;
  height: auto;
}
.credit-card .bank-name p {
  font-size: 3.7333333333vw;
  margin-bottom: 0.8vw;
  line-height: 1.1;
}
.credit-card .bank-branch p {
  font-size: 3.2vw;
  line-height: 1.1;
}
.credit-card .card-number {
  margin-top: 2.1333333333vw;
  font-size: 6.9333333333vw;
  line-height: 1.2;
  word-break: break-all;
  font-size: 5.3333333333vw;
}
.credit-card .user-name {
  font-size: 3.2vw;
  line-height: 1.5;
}
.credit-card .bank-info-copy {
  margin-bottom: 2.1333333333vw;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: inherit;
  border-radius: 1.0666666667vw;
  transform: all 0.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.2vw;
  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 0.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 0.2s linear forwards;
}
.credit-card .tips-txt {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 2.6666666667vw;
  padding: 1.3333333333vw 2.6666666667vw;
  border-radius: 0.8vw;
  opacity: 0;
  background: var(--wallet-bank-card-copy-tooltips-bg);
  box-shadow: 0 0 0.5333333333vw #99999980;
  font-size: 3.2vw;
  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.6666666667vw;
  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.3333333333vw;
}
.credit-card .deposit-amount label,
.credit-card .deposit-amount p {
  display: inline-block;
}
.credit-card .deposit-amount label {
  margin-right: 2.6666666667vw;
  line-height: 1.8;
  text-align: left;
}
.credit-card .deposit-amount p {
  color: var(--wallet-bank-card-amount);
  font-size: 4.2666666667vw;
}
.credit-card .deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  margin: 4.2666666667vw;
}
.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.2666666667vw;
}
.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.3333333333vw;
  background: var(--wallet-kyc-verify-mask-bg);
  overflow: hidden;
}
.kyc-verify-mask .kyc-verify-mask-icon {
  display: block;
  width: 6.4vw;
  height: 6.4vw;
  margin: 0 auto;
}
.kyc-verify-mask .kyc-verify-mask-icon:before {
  content: "!";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.4vw;
  height: 6.4vw;
  border-radius: 50%;
  background: var(--wallet-kyc-verify-mask-txt);
  color: var(--wallet-kyc-verify-mask-bg);
  font-size: 6.4vw;
  font-weight: 700;
  line-height: 4.2666666667vw;
  text-align: center;
}
.kyc-verify-mask .kyc-verify-mask-message {
  display: block;
  color: var(--wallet-kyc-verify-mask-txt);
  text-shadow: 0 0 0.5333333333vw var(--wallet-kyc-verify-mask-txt-shadow);
  text-align: center;
  margin: 2.1333333333vw 2.1333333333vw 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.3333333333vw;
  transition: all 0.3s;
  background: var(--tab-header-bg);
}
.tab-btn-page-underline {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tab-btn-page .line {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  transition: all 0.3s;
}
.tab-btn-page .line:after {
  content: "";
  display: block;
  width: 4.2666666667vw;
  height: 0.5333333333vw;
  margin: 0 auto;
  border-radius: 0.8vw;
  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: 4vw 0;
  transition: all 0.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.2666666667vw;
  color: var(--tab-line-txt);
  font-size: 3.7333333333vw;
  text-align: center;
}
.tab-btn-page .btn .badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1.3333333333vw;
  transform: translate(90%, -100%);
  border-radius: 2.6666666667vw;
  background: var(--tab-line-badge-bg);
  color: var(--tab-line-badge-txt);
  font-size: 3.2vw;
}
.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.1333333333vw 4.2666666667vw 3.2vw;
  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.3333333333vw;
  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.5333333333vw;
  transition: all 0.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.1333333333vw;
  background: var(--tab-btn-bar-bg);
}
.tab-btn-bar .line {
  position: absolute;
  top: 3%;
  left: 0;
  padding: 0 1.3333333333vw;
  transition: all 0.3s;
}
.tab-btn-bar .line:after {
  content: "";
  display: block;
  width: 100%;
  height: 8vw;
  border-radius: 2.1333333333vw;
  background: var(--tab-btn-bg-active);
  box-shadow: 0 0 0.5333333333vw 0.2666666667vw
    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 0.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.3333333333vw;
}
.tab-btn-bar .btn .text {
  display: inline-block;
  position: relative;
  padding: 1.6vw 0;
  color: var(--tab-btn-txt);
  font-size: 3.4666666667vw;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 0.5333333333vw 1.0666666667vw
    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.3333333333vw;
  transform: translate(90%, -100%);
  border-radius: 2.6666666667vw;
  background-color: #ffea00;
  color: #e41a43;
  font-size: 2.6666666667vw;
}
.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 0.2666666667vw 0.8vw
    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 0.2666666667vw 0.8vw
    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.3333333333vw 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.7333333333vw;
  height: 3.7333333333vw;
  transition: all 0.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.2666666667vw;
  border-radius: 2.6666666667vw;
  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 0.2s, opacity 0.3s;
  opacity: 0;
  color: var(--accordion-txt);
}
.tips-info ol:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: calc(100% - 8.5333333333vw);
  height: 0.2666666667vw;
  margin: 0 4.2666666667vw;
  background-image: linear-gradient(
    to right,
    var(--accordion-dot) 0%,
    var(--accordion-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw;
}
.tips-info .title-box {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 4.2666666667vw;
}
.tips-info h5 {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 92%;
  margin-bottom: 2.6666666667vw;
  color: var(--tips-info-title);
  font-size: 3.7333333333vw;
}
.tips-info h5 i {
  display: inline-block;
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  margin-right: 3.2vw;
  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.2666666667vw;
  vertical-align: text-top;
}
.tips-info a {
  text-decoration: none;
}
.tips-info p,
.tips-info b {
  display: block;
  padding-bottom: 1.3333333333vw;
  color: var(--tips-info-title);
  font-size: 3.2vw;
  line-height: 1.2;
  text-align: left;
}
.tips-info i {
  padding: 0 0.8vw;
  color: var(--tips-info-i);
  font-weight: 500;
}
.tips-info ul,
.tips-info ol {
  display: block;
  color: var(--tips-info-title);
  font-size: 3.2vw;
  line-height: 1.5;
  text-align: left;
}
.tips-info li {
  display: list-item;
  margin: 4.2666666667vw;
}
.verify-tips a {
  display: block;
  width: 100%;
}
.verify-tips label {
  display: block;
  margin-bottom: 2.1333333333vw;
  font-size: 3.7333333333vw;
  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.0666666667vw 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.3333333333vw;
  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.0666666667vw 1.6vw 0;
  padding: 0.5333333333vw 2.1333333333vw;
  border-radius: 5.3333333333vw;
  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 0.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.6666666667vw;
  height: 80vw;
  margin: auto;
  transition: height 0.3s ease;
}
.list-loading:before,
.list-loading:after {
  content: "";
  display: block;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.list-loading:before {
  animation: slide-right-left 1s linear infinite;
  background: var(--loading-list-circle-main);
}
.list-loading:after {
  animation: slide-left-right 1s linear infinite;
  background: var(--loading-list-circle-secondary);
}
@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(0.75);
  }
  90%,
  to {
    transform: translate(0);
  }
}
@keyframes slide-left-right {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translate(-50%) scale(0.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.1333333333vw 2.1333333333vw 0;
  overflow: hidden;
  border-radius: 1.3333333333vw;
  background: var(--accordion-bg);
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    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.2666666667vw;
  background: var(--accordion-title-bg);
  color: var(--accordion-title);
  font-size: 4vw;
  text-align: left;
}
.accordion-wrap .a-title:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.2666666667vw;
  width: calc(100% - 8.5333333333vw);
  height: 0.2666666667vw;
  background-image: linear-gradient(
    to right,
    var(--accordion-dot) 0%,
    var(--accordion-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw 2.6666666667vw;
}
.accordion-wrap .a-title .a-text {
  flex-grow: 1;
  font-weight: 500;
}
.accordion-wrap .a-title .a-icon {
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  margin-right: 4.2666666667vw;
  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.7333333333vw;
  height: 3.7333333333vw;
  transition: all 0.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 0.3s, opacity 0.5s;
  opacity: 0;
  color: var(--accordion-txt);
  text-align: left;
}
.accordion-wrap .a-content ol.a-list {
  padding: 4.2666666667vw 4.2666666667vw 4.2666666667vw 8.5333333333vw;
}
.accordion-wrap .a-content .a-list {
  padding: 4.2666666667vw 0 0;
  list-style: auto;
}
.accordion-wrap .a-content .a-item {
  padding: 1.0666666667vw 0;
  font-size: 3.7333333333vw;
  line-height: 1.3;
}
.accordion-wrap .a-content p {
  padding: 5.3333333333vw;
  font-size: 3.7333333333vw;
  line-height: 1.3;
  white-space: pre-wrap;
}
.accordion-wrap.error {
  margin: 2.6666666667vw 0 0;
}
.accordion-wrap.error .a-title {
  padding: 4.2666666667vw 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.7333333333vw;
  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.1333333333vw;
  color: var(--turnover-card-title);
}
.ticket + .ticket {
  margin-top: 4.2666666667vw;
}
.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.3333333333vw;
}
.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: 0.2666666667vw 2.6666666667vw;
}
.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.3333333333vw;
  height: 5.3333333333vw;
  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: 0.2666666667vw;
  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.6666666667vw 2.6666666667vw;
}
.ticket .ticket-banner {
  display: none;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
  padding: 2.6666666667vw 4vw 0;
  border-radius: 1.0666666667vw 1.0666666667vw 0 0;
  background-color: var(--turnover-card-bg);
}
.ticket .ticket-banner img {
  display: block;
  width: 100%;
  margin: auto;
  border-radius: 1.0666666667vw;
}
.ticket .ticket-banner .deco {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0.5333333333vw;
  margin: 2.6666666667vw 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.6vw;
  height: 1.6vw;
  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.6666666667vw;
  background: var(--turnover-card-bg);
}
.ticket .ticket-inner-left {
  position: relative;
  width: 75%;
  padding: 4.2666666667vw;
  border-right-width: 0.2666666667vw;
}
.ticket .ticket-inner-left > div + div {
  margin-top: 1.3333333333vw;
}
.ticket .ticket-inner-right {
  display: flex;
  position: relative;
  align-content: center;
  justify-content: center;
  width: 25%;
  padding: 0 1.3333333333vw;
}
.ticket .ticket-inner-right .text {
  margin: auto;
  padding: 1.0666666667vw;
  color: var(--bonuswallet-detail-txt);
  font-size: 3.4666666667vw;
  line-height: 1.5;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all;
}
.ticket .title {
  position: relative;
  overflow: hidden;
  font-size: 3.7333333333vw;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 1.0666666667vw;
  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.6666666667vw;
}
.ticket .detail .detail-btn {
  display: flex;
  margin: auto 1.3333333333vw;
  padding: 0.5333333333vw 1.0666666667vw;
  border: 0.2666666667vw solid var(--turnover-card-detail);
  border-radius: 1.3333333333vw;
}
.ticket .detail .detail-btn a {
  color: var(--turnover-card-detail);
  font-size: 2.6666666667vw;
  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.6vw 1.3333333333vw 0 0;
  font-size: 3.7333333333vw;
}
.ticket .discount .amount {
  font-size: 5.8666666667vw;
  font-weight: 500;
}
.list-field {
  display: block;
  flex: 1;
  padding: 0 2.1333333333vw;
  text-align: center;
}
.list-field .tags {
  padding: 1.0666666667vw;
  overflow: hidden;
  transform: scale(0.9);
  border-radius: 1.0666666667vw;
  color: var(--transaction-record-status-txt);
  font-size: 3.2vw;
  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.1333333333vw;
  background-color: var(--vip-points-table-head-bg);
  color: var(--vip-points-table-head-txt);
  font-size: 3.2vw;
  font-weight: 500;
}
.list-title .list-field {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.2666666667vw 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.1333333333vw;
  background: var(--vip-points-table-body-bg);
}
.list-content li {
  position: relative;
  align-items: center;
  padding: 1.0666666667vw 0;
  background: var(--vip-points-table-body-record-bg);
  color: var(--vip-points-table-body-txt);
  font-size: 2.9333333333vw;
}
.list-content li + li {
  border-top: 0.2666666667vw 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.0666666667vw 2.1333333333vw;
  border-right: 0.2666666667vw dotted var(--vip-points-table-body-border);
}
.no-detail-info .list-arrow {
  opacity: 0;
}
.list-arrow {
  flex: 0 1 5.3333333333vw;
  width: 3.2vw;
  height: 3.2vw;
  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: 4vw 5.3333333333vw;
  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.2vw;
}
.date-title .date i {
  display: inline-block;
  width: 4.2666666667vw;
  height: 4vw;
  margin-right: 2.1333333333vw;
  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: 0.8vw 1.3333333333vw;
  border-radius: 1.3333333333vw;
  font-size: 2.6666666667vw;
}
.time-zone {
  margin-left: 2.1333333333vw;
  padding: 0 1.0666666667vw;
  border: 0.2666666667vw solid var(--vip-points-table-head-zone);
  border-radius: 1.3333333333vw;
  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: 0.2666666667vw 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.6666666667vw;
  margin-bottom: 6.4vw;
}
.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.3333333333vw;
  margin-bottom: 13.3333333333vw;
}
.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.6666666667vw;
  height: 10.6666666667vw;
  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.7333333333vw;
  height: 3.7333333333vw;
  margin-right: 2.6666666667vw;
  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 8vw;
  height: 8vw;
  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.1333333333vw;
  height: 2.1333333333vw;
  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.2666666667vw;
  padding: 4.2666666667vw 0;
  font-size: 3.7333333333vw;
  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.2666666667vw;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-list .content-wrap .title .msg-time {
  color: var(--mail-list-txt);
  font-size: 3.2vw;
}
.inbox-list .content-wrap .text {
  width: 100%;
  height: 5.0666666667vw;
  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.1333333333vw 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: 0.2666666667vw solid var(--mail-date-zone);
  color: var(--mail-date-zone);
}
.inbox-list .message-item {
  align-items: center;
  padding: 0 4.2666666667vw;
  border-bottom: 0.2666666667vw 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: 0.2666666667vw 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.1333333333vw 1.3333333333vw;
}
.content-betting-record .time-zone {
  border: 0.2666666667vw 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: 8vw;
  height: 8vw;
  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.3333333333vw;
  flex-direction: column;
  min-height: 0;
  max-height: 0;
  padding: 0 0.8vw;
  overflow: hidden;
  transition: all ease-in-out 0.3s;
  border-radius: 0.8vw;
  background: var(--betting-record-tooltips-bg);
  color: var(--betting-record-tooltips-txt);
  font-size: 2.6666666667vw;
}
.list-bar .tip-box.active {
  min-height: 5.3333333333vw;
  max-height: 53.3333333333vw;
  padding: 0.8vw;
  border: 0.2666666667vw solid var(--betting-record-tooltips-border);
}
.list-bar .tip-box span {
  display: flex;
  white-space: nowrap;
  padding: 1.3333333333vw 2.1333333333vw;
}
.list-bar .tip-box span:before {
  content: "";
  display: block;
  flex: 0 0 2.1333333333vw;
  width: 2.1333333333vw;
  height: 2.1333333333vw;
  margin: 0 1.3333333333vw 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.6666666667vw 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.2vw;
  line-height: 1.5;
}
.betting-record-sum .item + .item {
  border-left: 0.2666666667vw 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.6666666667vw;
}
.record-item.transaction-record-list .item {
  padding: 2.6666666667vw;
}
.record-item.transaction-record-list .status {
  padding: 2.6666666667vw 1.3333333333vw;
}
.record-item.revocation .list-field,
.record-item.void .list-field,
.record-item.refund .list-field {
  opacity: 0.3;
}
.item-status {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(100% - 4px);
  transform: translate(-50%, -50%);
  border-radius: 0.8vw;
}
.item-status .tags {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  padding: 0.8vw 1.3333333333vw;
  transform: translate(-50%, -50%);
  border-radius: 0.8vw;
  color: var(--color-record-item-text);
  font-size: 2.6666666667vw;
  font-weight: 500;
}
.deposit-acc-info-box {
  margin: 4vw 0 0;
  padding: 4vw;
  border-radius: 2.1333333333vw;
  background: var(--wallet-account-info-bg);
  font-size: 3.2vw;
}
.deposit-acc-info-box p {
  flex: 1;
  margin-right: 2.6666666667vw;
  opacity: 0.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.6666666667vw;
  padding-bottom: 1.3333333333vw;
  border-bottom: 0.2666666667vw 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 0.3s linear forwards;
}
.acc-info li.hide .icon-copy {
  display: block;
  animation: tips-txt-hide 0.2s linear forwards;
}
.acc-info label {
  flex: 0 0 45%;
  padding-right: 1.3333333333vw;
  font-weight: 500;
  color: var(--wallet-account-info-txt);
}
.icon-copy {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 2.6666666667vw;
  padding: 1.3333333333vw 2.6666666667vw;
  border-radius: 0.8vw;
  opacity: 0;
  background: var(--wallet-bank-card-copy-tooltips-bg);
  box-shadow: 0 0 0.5333333333vw #99999980;
  font-size: 3.2vw;
  color: var(--wallet-bank-card-copy-tooltips-txt);
  line-height: 1.5;
  transform: translateY(-100%);
}
.icon-copy:before {
  content: "";
  position: absolute;
  right: 2.6666666667vw;
  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: 0.2666666667vw dashed var(--wallet-maintain-border);
  border-radius: 2.6666666667vw;
  background: var(--wallet-maintain-bg);
}
.under-maintain .maintain-tag {
  padding: 0.8vw 1.3333333333vw;
  border-radius: 0.5333333333vw;
  line-height: 1;
}
.under-maintain .maintain-tag img {
  display: inline-block;
  margin-right: 0.8vw;
}
.under-maintain .maintain-tag .text {
  display: inline-block;
  color: var(--wallet-maintain-txt);
  font-size: 2.6666666667vw;
  line-height: 1.2;
}
.option-group {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: 2.6666666667vw;
}
.option-group label {
  position: relative;
  height: 6.4vw;
  overflow: hidden;
  color: var(--form-txt);
  font-weight: 500;
  line-height: 6.4vw;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 3.7333333333vw;
}
.option-group select {
  box-sizing: border-box;
  width: 100%;
  height: 11.7333333333vw;
  padding: 0 8.5333333333vw 0 4.2666666667vw;
  border: 0;
  border-radius: 2.6666666667vw;
  outline: none;
  background-color: var(--form-input-bg);
  color: var(--form-input-txt);
  font-family: var(--custom-font), var(--custom-serif);
  font-size: 3.2vw;
  appearance: none;
}
.option-group select option {
  font-size: 3.2vw;
}
.option-group select:disabled {
  border-bottom: 0.2666666667vw solid var(--form-input-border-disabled);
  border-radius: 0;
  background: none;
}
.option-group h2 {
  position: relative;
  width: 100%;
  padding-left: 4.2666666667vw;
  color: var(--color-title);
  font-size: 4vw;
  font-weight: 500;
  line-height: 2;
}
.option-group h2:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 20%;
  left: 0;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 0.5333333333vw;
  background: var(--wallet-title-border);
  vertical-align: middle;
}
.option-group.select-bar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 4.2666666667vw;
  padding: 2.1333333333vw 0 2.1333333333vw 4.2666666667vw;
  border-radius: 2.6666666667vw;
  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: 0.8vw;
}
.option-wrap:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 5.3333333333vw;
  right: 4.2666666667vw;
  border-width: 1.0666666667vw;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent;
}
.player-deposit-step2 .qrcode.noCreditCardTemplate {
  top: 0;
  right: 3.2vw;
}
.button.btn-primary.contact_cs {
  margin: 2.1333333333vw;
}
.bank-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bank-qrcode .deposit-qrcode {
  width: 80%;
  margin-bottom: 4.2666666667vw;
  border-radius: 1.0666666667vw;
}
.bank-qrcode .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80%;
}
.bank-qrcode .item-icon {
  display: block;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin-left: 4.2666666667vw;
  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.3333333333vw;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes tips-txt-hide {
  0% {
    top: 0;
    opacity: 1;
  }
  to {
    top: -13.3333333333vw;
    opacity: 0;
  }
}
.accordion-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 13.8666666667vw;
  margin: 4.2666666667vw;
  transition: all 0.4s ease-in-out;
  border-radius: 2.6666666667vw;
  opacity: 1;
  background: var(--wallet-pending-transactions-bg);
}
.accordion-card-wrap.remove {
  height: 0;
  min-height: 0;
  margin: 0 2.6666666667vw;
  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.8666666667vw;
  padding: 4.2666666667vw;
  color: var(--wallet-pending-transactions-title);
  font-size: 4vw;
  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.7333333333vw;
  height: 3.7333333333vw;
  margin-right: 4.2666666667vw;
  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.4666666667vw;
  height: 3.4666666667vw;
  transition: all 0.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.3333333333vw;
  height: 5.3333333333vw;
  transform: translate(15%, -35%);
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  opacity: 1;
  background: var(--color-danger);
  box-shadow: 0 0 0.8vw #00000080;
  color: #fff;
  line-height: 5.3333333333vw;
  text-align: center;
}
.accordion-card-wrap .ac-title .ac-notice.ani {
  animation: notice-jump 0.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 0.3s, opacity 0.5s;
  opacity: 0;
  color: var(--accordion-txt);
}
.accordion-card-wrap .ac-content:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: calc(100% - 8.5333333333vw);
  height: 0.2666666667vw;
  margin: 0 4.2666666667vw;
  background-image: linear-gradient(
    to right,
    var(--accordion-dot) 0%,
    var(--accordion-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw;
}
.ac-list {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  margin: 0 4.2666666667vw;
  padding: 1.0666666667vw 0;
  transition: all 0.4s ease-in-out;
  opacity: 1;
}
.ac-list + .ac-list:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 0.2666666667vw;
  background-image: linear-gradient(
    to right,
    var(--accordion-dot) 0%,
    var(--accordion-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw;
}
.ac-list > div {
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
.ac-list.removed {
  height: 0;
  min-height: 0;
  margin: 0 1.3333333333vw;
  padding: 0 4vw;
  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.7333333333vw;
  font-weight: 500;
  text-decoration: underline;
}
.ac-list .ac-item .date {
  color: var(--wallet-pending-transactions-date);
  font-size: 2.9333333333vw;
}
.ac-list .ac-item .amount {
  color: var(--wallet-pending-transactions-amount);
  font-size: 4vw;
  font-weight: 500;
}
.ac-list .btn-revert {
  position: relative;
  z-index: 0;
  padding: 2.4vw 5.3333333333vw;
  border-radius: 2.6666666667vw;
  background: var(--wallet-pending-transactions-btn-border);
  color: var(--wallet-pending-transactions-btn-txt);
  font-size: 3.2vw;
}
.ac-list .btn-revert:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.2666666667vw;
  left: 0.2666666667vw;
  width: calc(100% - 0.5333333333vw);
  height: calc(100% - 0.5333333333vw);
  border-radius: 2.5333333333vw;
  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.4vw;
  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.4vw;
}
.withdrawal-processing-pop .processing-cont,
.deposit-success-pop .processing-cont {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 4.2666666667vw 4.2666666667vw;
  margin-bottom: 4.2666666667vw;
  border-bottom: 0.2666666667vw solid
    var(--transaction-pop-processing-cont-border-color);
}
.withdrawal-processing-pop .state,
.deposit-success-pop .state {
  position: relative;
  width: 14.4vw;
  height: 14.4vw;
  margin: 0 auto;
  animation: fallin 0.7s forwards 0.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: -0.4vw;
  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.3333333333vw;
  margin: 2.6666666667vw 0 1.3333333333vw;
  font-weight: 700;
}
.withdrawal-processing-pop .processing span,
.deposit-success-pop .processing span {
  color: var(--transaction-pop-processing-txt);
  font-size: 3.2vw;
  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.8vw;
  color: var(--transaction-pop-amount-cont-txt);
  margin-bottom: 2.6666666667vw;
  line-height: 1;
}
.withdrawal-processing-pop .amount-cont .amount,
.deposit-success-pop .amount-cont .amount {
  font-size: 6.9333333333vw;
  color: var(--transaction-pop-amount-cont-txt-strong);
}
.withdrawal-processing-pop .info-list,
.deposit-success-pop .info-list {
  margin: 6.4vw 0 0;
  overflow: auto;
  font-size: 3.2vw;
  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.6666666667vw;
  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.3333333333vw;
  left: -1.0666666667vw;
  width: 4.8vw;
  height: 4vw;
  border-radius: 0.5333333333vw 0 0 0.5333333333vw;
  background: var(--wallet-free-tag-bg);
}
.tag-free i {
  position: absolute;
  top: 0;
  left: 0.4vw;
  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.8vw;
  border-top: 2vw solid transparent;
  border-bottom: 2vw solid transparent;
  border-left: 1.3333333333vw solid var(--wallet-free-tag-bg);
}
.main-wallet-info {
  width: 100%;
  padding: 4.2666666667vw;
  zoom: 1;
}
.main-wallet-info:after {
  content: "";
  display: block;
  clear: both;
}
.main-wallet-info h4 {
  display: inline-block;
  width: 95%;
  font-size: 9.3333333333vw;
  font-weight: 500;
  letter-spacing: 0.2666666667vw;
  text-align: right;
}
.main-wallet-info h5 {
  display: inline-block;
  width: 5%;
  font-size: 6.4vw;
  font-weight: 500;
}
.operating-wallet {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.operating-wallet button,
.operating-wallet .btn-renew {
  min-width: 21.3333333333vw;
  margin: 0 1.3333333333vw 0 0;
  padding: 0 4vw;
  border: 0;
  border-radius: 8vw;
  outline: none;
  box-shadow: inset 0 0.2666666667vw 0.2666666667vw #ffffff80,
    0 0 0.5333333333vw 0.2666666667vw #0003;
  color: var(--btn-main-txt);
  font-size: 3.2vw;
  line-height: 8vw;
  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.2vw;
  margin-right: 1.3333333333vw;
}
.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.2vw;
  font-weight: 500;
}
.renew-main-wallet .icon-refresh {
  display: inline-block;
  width: 3.2vw;
  height: 3.2vw;
  margin-left: 2.1333333333vw;
  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.6666666667vw;
}
.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.6666666667vw;
  bottom: 18%;
  transform: translateY(-25%);
  border-width: 1.0666666667vw;
  border-style: solid;
  border-color: var(--form-select-triangle) transparent transparent;
}
.select-box label {
  display: block;
  font-size: 3.7333333333vw;
  line-height: 2;
}
.select-box select {
  display: block;
  position: relative;
  width: 100%;
  height: 10.6666666667vw;
  padding: 0 2.6666666667vw;
  border: 0;
  border-radius: 0.8vw;
  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: 4vw 5%;
  overflow: hidden;
  transition: 0.4s;
  border-radius: 2.6666666667vw 2.6666666667vw 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: 12vw;
  line-height: 12vw;
}
.account-count {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: 72vh;
  margin-top: 2.6666666667vw;
  overflow-x: hidden;
  overflow-y: auto;
}
.account-box {
  flex: 0 0 32%;
  margin: 0 2% 1.6vw 0;
  padding: 1.8666666667vw;
  border: 0.2666666667vw solid var(--color-pop-btn-border);
  border-radius: 0.8vw;
  background: var(--color-pop-select-bg);
  font-size: 3.2vw;
  text-align: center;
}
.account-box:nth-child(3n) {
  margin-right: 0;
}
.account-box h6 {
  margin-bottom: 2.1333333333vw;
  color: var(--primary);
  font-weight: 700;
}
.account-box > p {
  color: var(--color-title);
}
.account-box div img {
  margin-right: 1.3333333333vw;
  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.1333333333vw;
  padding: 1.0666666667vw 4.2666666667vw;
  float: right;
  border: 0.2666666667vw solid var(--pop-transfer-bonus-border);
  border-radius: 8vw;
  background: var(--pop-transfer-bonus-bg);
  color: var(--pop-transfer-bonus-txt);
  font-size: 3.2vw;
  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.2666666667vw;
}
.recommend-friends-box {
  width: auto;
  height: auto;
  margin: 4.2666666667vw;
  padding: 4.2666666667vw;
  border-radius: 2.6666666667vw;
  background: var(--vip-detail-box-bg);
  box-shadow: 0 0 1.6vw var(--vip-detail-box-bg-shadow),
    inset 0 0.2666666667vw 0.5333333333vw
      color-mix(in srgb, var(--inset-shadow), transparent 80%);
}
.recommend-friends-box .deco-box {
  position: relative;
  height: 17.0666666667vw;
}
.recommend-friends-box .deco-box .deco-img {
  display: block;
  position: relative;
  width: 32vw;
  height: 32vw;
  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: 32vw;
  height: 32vw;
}
.recommend-friends-box .deco-box .deco-img .img-ios-gift {
  top: 45%;
  width: 32vw;
  height: 32vw;
}
.recommend-friends-box .title {
  width: 100%;
  line-height: 9.3333333333vw;
}
.recommend-friends-box .title h2 {
  color: var(--recommend-title);
  font-size: 3.7333333333vw;
  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.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 0.5333333333vw;
  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: 0.2666666667vw;
  margin: 4.2666666667vw 0;
  background-image: linear-gradient(
    to right,
    var(--recommend-dot) 0%,
    var(--recommend-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw;
}
.code-box p {
  width: 100%;
  padding-bottom: 2.6666666667vw;
  line-height: 1.3;
  font-size: 3.2vw;
  color: var(--recommend-txt);
}
.code-box .code {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex: 2;
  border: 0.2666666667vw solid var(--recommend-input-border);
  border-radius: 2.6666666667vw;
  overflow: hidden;
}
.code-box .code span {
  display: block;
  color: var(--vip-detail-txt);
  letter-spacing: 2px;
  padding: 1.3333333333vw 3.2vw;
  font-weight: 500;
  font-size: 4.8vw;
}
.code-box .code .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  padding: 1.3333333333vw 2.6666666667vw;
  transition: all 0.3s;
  background: var(--recommend-input-btn);
}
.code-box .code .btn:active {
  opacity: 0.7;
}
.code-box .btn-share {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0.8;
  background: var(--recommend-share-btn);
  border-radius: 2.6666666667vw;
  font-size: 3.7333333333vw;
  font-weight: 500;
  color: var(--recommend-share-txt);
  margin-left: 2.6666666667vw;
  padding: 0 2.6666666667vw;
}
.condition-box .title {
  display: flex;
  align-items: center;
  margin-bottom: 2.6666666667vw;
  color: var(--recommend-title);
  font-size: 3.7333333333vw;
  font-weight: 500;
  line-height: 1.2;
}
.condition-box .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.6666666667vw;
  border-radius: 2.1333333333vw;
  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.1333333333vw;
  font-size: 3.2vw;
  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.6vw;
  height: 1.6vw;
  margin: 0 2.6666666667vw 0 0;
  border-radius: 50%;
  background: var(--recommend-condition-dot);
}
.condition-box .item .text {
  width: 65%;
  height: 10.6666666667vw;
  line-height: 10.6666666667vw;
  color: var(--vip-detail-card-txt);
  border-radius: 2.6666666667vw;
  background-color: var(--recommend-condition-bg);
  padding: 0 4.2666666667vw;
}
.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.3333333333vw;
  text-align: center;
}
.status-box .status.accept {
  position: relative;
}
.status-box .status.accept:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 0.2666666667vw;
  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.6666666667vw 2.6666666667vw;
}
.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: 8vw;
  margin-bottom: 1.8666666667vw;
  font-weight: 600;
}
.status-box .status .text {
  color: var(--vip-detail-txt);
  font-size: 3.2vw;
  font-weight: 500;
}
.terms {
  text-align: center;
}
.terms .terms-link {
  display: inline-block;
  margin: auto;
  color: var(--recommend-terms-link);
  font-size: 2.9333333333vw;
  font-weight: 500;
  transition: all 0.3s;
  text-decoration: underline;
}
.date-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4.2666666667vw;
}
.date-bar .text {
  display: block;
  font-size: 3.2vw;
  padding: 0 0.8vw;
  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.3333333333vw;
  margin: 0;
  height: 8vw;
}
.date-bar .date-input input {
  width: 100%;
  padding: 0;
}
.btn-submit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 20%;
  border-radius: 1.3333333333vw;
  padding: 0 1.3333333333vw;
  margin-left: 1.3333333333vw;
  height: 8vw;
  line-height: 8vw;
  color: var(--btn-main-txt);
  text-shadow: 0 0.5333333333vw 1.0666666667vw
    color-mix(in srgb, var(--text-shadow), transparent 60%);
  background: var(--btn-main-bg);
  font-size: 3.7333333333vw;
  font-weight: 500;
  text-align: center;
}
.list-status {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4.2666666667vw;
}
.list-status .title {
  color: var(--vip-detail-card-txt);
  font-size: 3.2vw;
}
.list-status img {
  width: 4.2666666667vw;
  margin: 0 1.3333333333vw;
}
.list-status .text {
  font-size: 2.9333333333vw;
}
.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.6666666667vw;
}
.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: 0.375rem;
  height: 0.375rem;
  margin: -0.1875rem;
  box-shadow: 0.3247595264rem -6.1875rem 0 -0.1875rem #ff8080,
    -0.3247595264rem -5.8125rem 0 -0.1875rem #ffed80,
    5.0400665505rem -3.603935927rem 0 -0.1875rem #ffed80,
    4.3419112394rem -3.8779416952rem 0 -0.1875rem #a4ff80,
    5.9601006635rem 1.6934654059rem 0 -0.1875rem #a4ff80,
    5.739034332rem 0.9767858111rem 0 -0.1875rem #80ffc8,
    2.3920574129rem 5.7156527478rem 0 -0.1875rem #80ffc8,
    2.8145503072rem 5.0959743279rem 0 -0.1875rem #80c8ff,
    -2.9772538586rem 5.4338369925rem 0 -0.1875rem #80c8ff,
    -2.2292640758rem 5.3778130146rem 0 -0.1875rem #a480ff,
    -6.104632245rem 1.0602311526rem 0 -0.1875rem #a480ff,
    -5.5928411824rem 1.6105369557rem 0 -0.1875rem #ff80ed,
    -4.6350976008rem -4.1117502783rem 0 -0.1875rem #ff80ed,
    -4.7246417338rem -3.3623215902rem 0 -0.1875rem #ff8080;
}
.member-menu-shortcut .spread {
  z-index: 1;
  top: 35%;
}
.member-menu-shortcut .spread .bubble {
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  border: solid 4vw
    color-mix(
      in srgb,
      var(--sidenav-set-shortcut-set-icon-color),
      transparent 50%
    );
}
.member-menu-shortcut .spread .circle {
  width: 1.3333333333vw;
  height: 1.3333333333vw;
  margin: 0.5333333333vw;
  box-shadow: 0.3247595264rem -3.1875rem 0 -0.1875rem #ff8080,
    -0.3247595264rem -2.8125rem 0 -0.1875rem #ffed80,
    2.6945721031rem -1.7334665214rem 0 -0.1875rem #ffed80,
    1.996416792rem -2.0074722897rem 0 -0.1875rem #a4ff80,
    3.0353169269rem 1.025902604rem 0 -0.1875rem #a4ff80,
    2.8142505954rem 0.3092230092rem 0 -0.1875rem #80ffc8,
    1.0904061956rem 3.0127461441rem 0 -0.1875rem #80ffc8,
    1.5128990899rem 2.3930677242rem 0 -0.1875rem #80c8ff,
    -1.6756026413rem 2.7309303888rem 0 -0.1875rem #80c8ff,
    -0.9276128584rem 2.6749064109rem 0 -0.1875rem #a480ff,
    -3.1798485085rem 0.3926683507rem 0 -0.1875rem #a480ff,
    -2.6680574459rem 0.9429741538rem 0 -0.1875rem #ff80ed,
    -2.2896031695rem -2.2412808754rem 0 -0.1875rem #ff80ed,
    -2.3791473025rem -1.4918521873rem 0 -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: 0.3247595264rem -4.9875rem #ff8080,
      -0.3247595264rem -4.6125rem #ffed80,
      4.1018687716rem -2.8557481648rem #ffed80,
      3.4037134604rem -3.129753933rem #a4ff80,
      4.7901871689rem 1.4264402852rem #a4ff80,
      4.5691208374rem 0.7097606903rem #80ffc8,
      1.871396926rem 4.6344901063rem #80ffc8,
      2.2938898203rem 4.0148116864rem #80c8ff,
      -2.4565933717rem 4.352674351rem #80c8ff,
      -1.7086035888rem 4.2966503731rem #a480ff,
      -4.9347187504rem 0.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: 0.3247595264rem -2.7675rem 0 -0.05625rem #ff8080,
      -0.3247595264rem -2.3925rem 0 -0.05625rem #ffed80,
      2.3662028805rem -1.4716008047rem 0 -0.05625rem #ffed80,
      1.6680475694rem -1.7456065729rem 0 -0.05625rem #a4ff80,
      2.6258472038rem 0.9324438118rem 0 -0.05625rem #a4ff80,
      2.4047808723rem 0.2157642169rem 0 -0.05625rem #80ffc8,
      0.9081750251rem 2.6343392196rem 0 -0.05625rem #80ffc8,
      1.3306679195rem 2.0146607997rem 0 -0.05625rem #80c8ff,
      -1.4933714708rem 2.3525234643rem 0 -0.05625rem #80c8ff,
      -0.745381688rem 2.2964994864rem 0 -0.05625rem #a480ff,
      -2.7703787854rem 0.2992095585rem 0 -0.05625rem #a480ff,
      -2.2585877228rem 0.8495153615rem 0 -0.05625rem #ff80ed,
      -1.9612339491rem -1.979415159rem 0 -0.05625rem #ff80ed,
      -2.0507780821rem -1.2299864709rem 0 -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.8vw;
}
.complete-time .text {
  margin-left: 1.3333333333vw;
  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.2666666667vw);
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  background: var(--bonuswallet-card-bg);
  overflow: hidden;
  box-shadow: 0 0.5333333333vw 0.5333333333vw #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 0.3s ease-in;
}
.bonus-wallet {
  display: block;
  position: relative;
  padding: 4vw;
  box-shadow: 0 -0.5333333333vw 1.0666666667vw #0000061a,
    inset 0.2666666667vw 0.2666666667vw 0.5333333333vw
      color-mix(in srgb, var(--inset-shadow), transparent 90%);
}
.bonus-wallet .title {
  position: relative;
  overflow: hidden;
  color: var(--bonuswallet-title);
  font-size: 3.7333333333vw;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bonus-wallet .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.8vw;
  margin-right: 2.1333333333vw;
  border-radius: 1.0666666667vw;
  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.3333333333vw;
  height: 6.9333333333vw;
  padding: 0 1.0666666667vw 0 0.2666666667vw;
  border-radius: 8vw 0 0 8vw;
  background-color: var(--promotion-bonuswallet-label-normal);
  color: #fff;
  font-size: 2.9333333333vw;
}
.bonus-wallet .wallet-label span {
  display: inline-block;
  width: 6.9333333333vw;
  height: 6.9333333333vw;
  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.6666666667vw;
  border-radius: 1.0666666667vw;
}
.bonus-wallet .wallet-inner-left {
  width: 21.8666666667vw;
  height: 21.8666666667vw;
  margin-right: 4vw;
  overflow: hidden;
  border-radius: 1.0666666667vw;
  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.6666666667vw;
  color: var(--pop-bonuswallet-card-detail);
  font-size: 3.4666666667vw;
  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.6666666667vw;
}
.bonus-wallet .card-detail .card-date {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  margin: 0 1.3333333333vw 0 0;
  color: var(--pop-bonuswallet-card-date);
  font-size: 2.6666666667vw;
}
.bonus-wallet .card-detail .card-date div {
  line-height: 1.5;
}
.bonus-wallet .card-detail .time-zone {
  display: block;
  align-self: flex-start;
  margin: 0.8vw 1.3333333333vw 0.8vw 0;
  padding: 0.5333333333vw 1.0666666667vw;
  border: 1px solid var(--bonuswallet-zone);
  border-radius: 1.3333333333vw;
  color: var(--bonuswallet-zone);
  font-size: 2.6666666667vw;
}
.bonus-wallet .card-detail .detail-btn {
  display: flex;
  align-self: flex-start;
  margin: 0.8vw 0;
  padding: 0.5333333333vw 1.3333333333vw;
  border: 0.2666666667vw solid var(--pop-bonuswallet-card-detail);
  border-radius: 1.3333333333vw;
  font-weight: 500;
}
.bonus-wallet .card-detail .detail-btn a {
  color: var(--pop-bonuswallet-card-detail);
  font-size: 2.6666666667vw;
  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.6vw 1.3333333333vw 0 0;
  font-size: 3.7333333333vw;
}
.bonus-wallet .discount .amount {
  padding-bottom: 2.6666666667vw;
  font-size: 5.8666666667vw;
  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.6666666667vw;
  color: var(--bonuswallet-detail-txt);
  font-size: 3.2vw;
}
.bonus-wallet .discount02 .deposit {
  padding-right: 5.3333333333vw;
}
.dec-line-wrap {
  position: relative;
  height: 5.3333333333vw;
}
.dec-line-wrap .dec-line {
  display: block;
  position: relative;
  left: 5%;
  bottom: 0;
  width: 90%;
  height: 0.2666666667vw;
  margin: 4.2666666667vw 0;
  background-image: linear-gradient(
    to right,
    var(--recommend-dot) 0%,
    var(--recommend-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw;
}
.bonus-card-down {
  display: block;
  position: relative;
  padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
  border-radius: 0 0 2.6666666667vw 2.6666666667vw;
  box-shadow: 0 0.5333333333vw 1.0666666667vw #0000001a;
}
.bonus-card-down .card-down-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  border-radius: 1.0666666667vw;
}
.bonus-card-down .card-down-inner .turn-hide {
  display: none;
}
.bonus-card-down .card-down-inner-right {
  position: relative;
  min-width: 29.3333333333vw;
  margin-left: 2.6666666667vw;
}
.bonus-card-down .card-down-inner-right .btn {
  min-width: 29.3333333333vw;
  min-height: 7.4666666667vw;
  margin: auto;
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 1.0666666667vw #00000040;
  color: var(--color-walletcard-txt);
  font-size: 3.4666666667vw;
  line-height: 7.4666666667vw;
  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.7333333333vw;
  height: 11.4666666667vw;
}
.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(
      0.5333333333vw 0.5333333333vw 0.5333333333vw rgba(45, 45, 45, 0.1)
    )
    drop-shadow(
      1.0666666667vw 1.0666666667vw 1.0666666667vw rgba(49, 49, 49, 0.1)
    )
    drop-shadow(
      2.1333333333vw 2.1333333333vw 2.1333333333vw rgba(42, 42, 42, 0.1)
    )
    drop-shadow(
      4.2666666667vw 4.2666666667vw 4.2666666667vw rgba(32, 32, 32, 0.1)
    );
}
.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .front {
  z-index: 5;
  filter: drop-shadow(
    1.0666666667vw 1.0666666667vw 1.0666666667vw rgba(45, 45, 45, 0.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.3333333333vw;
  height: 5.3333333333vw;
  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: -4vw;
  left: 8.8vw;
}
.bonus-card-down
  .card-down-inner-right
  .withdraw-ani
  .wallet-img
  .coin-wallet
  li.coin-wallet-2 {
  top: -5.3333333333vw;
  left: 5.3333333333vw;
}
.bonus-card-down
  .card-down-inner-right
  .withdraw-ani
  .wallet-img
  .coin-wallet
  li.coin-wallet-3 {
  top: -4vw;
  left: 1.0666666667vw;
}
.bonus-card-down
  .card-down-inner-right
  .withdraw-ani
  .wallet-img
  .coin-wallet
  li.coin-wallet-4 {
  top: -3.2vw;
  left: 4.8vw;
}
.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: 8vw;
  height: 8vw;
  overflow: hidden;
}
.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li span {
  display: block;
  z-index: 2;
  width: 8vw;
  height: 8vw;
  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 0.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.2vw;
  padding: 1.3333333333vw 0;
}
.bonus-card-down .card-down-inner .bonus-left .currency {
  padding: 0 0.8vw 0 1.8666666667vw;
  font-size: 3.7333333333vw;
}
.bonus-card-down .card-down-inner .bonus-left .bonus-number {
  font-size: 4.8vw;
  font-weight: 500;
}
.bonus-card-down .card-down-inner .bonus-left .bonus-tips {
  transform: scale(0.9);
  transform-origin: left;
  padding: 0.8vw 0;
  color: var(--bonuswallet-detail-txt);
  font-size: 3.2vw;
}
.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: 0.5;
  }
  30% {
    transform: translate3d(0, -30%, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, -10%, 0);
    opacity: 0.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 0.3s;
  background: var(--pop-bg-content);
  color: var(--pop-bonuswallet-txt);
}
.pop-wrap3.active {
  bottom: 0;
  transition: bottom 0.3s;
}
.pop-wrap3 {
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  color: var(--color-title);
  line-height: 1.5;
}
.pop-wrap3 .btn-closed {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 12vw;
  height: 12vw;
  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.6666666667vw;
  height: 10.6666666667vw;
  -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.6666666667vw;
  height: 10.6666666667vw;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.4s 0s cubic-bezier(0.2, 0, 0, 1.6);
  border-radius: 50%;
}
.pop-wrap3 .title-wrap .btn-back:hover div {
  border: 0.5333333333vw solid #8d8d8d;
}
.pop-wrap3 .title-wrap .btn-back:hover div:after {
  transform: translate(-50%);
}
.pop-wrap3 .title-wrap .title {
  margin-bottom: 4.2666666667vw;
  color: var(--pop-bonuswallet-title);
  font-size: 4.2666666667vw;
  line-height: 1.5;
}
.pop-wrap3 .title-wrap .title .tips {
  color: color-mix(in srgb, var(--pop-bonuswallet-title), transparent 40%);
  font-size: 3.2vw;
}
.pop-wrap3 .inner-wrap {
  display: flex;
  flex-direction: row;
  width: auto;
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.3s;
  -webkit-overflow-scrolling: touch;
}
.pop-wrap3 .inner-wrap .inner-inner {
  display: flex;
  transition: all 0.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.2666666667vw;
}
.pop-wrap3 .inner-wrap .inner-left {
  transform: translate(0);
}
.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
  height: auto;
  padding: 4.2666666667vw;
}
.pop-wrap3 .inner-wrap .inner-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.pop-wrap3 .bottom-wrap .tips2 {
  margin-bottom: 4.2666666667vw;
  color: var(--pop-bonuswallet-tips);
  font-size: 3.2vw;
  text-align: center;
}
.reel-box {
  display: block;
  margin-bottom: 4.2666666667vw;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lvup-select-wrap {
  display: grid;
  grid-gap: 4.2666666667vw;
  grid-template-columns: repeat(2, 1fr);
}
.lvup-select-wrap .event {
  display: block;
  position: relative;
  width: 100%;
  height: 12vw;
  overflow: hidden;
  border-radius: 2.6666666667vw;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
.bonus-event {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
  height: 29.3333333333vw;
  margin-bottom: 2.6666666667vw;
  padding: 2.6666666667vw 4.8vw;
  border-radius: 1.3333333333vw;
  background: var(--pop-bonuswallet-card-bg);
  box-shadow: 0 0.8vw 1.3333333333vw #0000001f;
}
.bonus-event:last-child {
  margin-bottom: 0;
}
.bonus-event-left {
  width: 70%;
}
.bonus-event-left .title {
  position: relative;
  margin-top: 2.6666666667vw;
  overflow: hidden;
  color: var(--pop-bonuswallet-card-title);
  font-size: 3.7333333333vw;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bonus-event-left .title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin: 0 2.6666666667vw 0 0;
  border-radius: 1.0666666667vw;
  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.6666666667vw;
}
.bonus-event-left .card-detail .detail-btn {
  display: flex;
  margin-left: 1.0666666667vw;
  padding: 0 1.0666666667vw;
  border: 0.2666666667vw solid var(--pop-bonuswallet-card-detail);
  border-radius: 1.3333333333vw;
  font-weight: 500;
}
.bonus-event-left .card-detail .detail-btn a {
  color: var(--pop-bonuswallet-card-detail);
  font-size: 2.6666666667vw;
  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.1333333333vw 1.3333333333vw 0 0;
  font-size: 3.7333333333vw;
}
.bonus-event-left .discount .amount {
  padding-bottom: 2.6666666667vw;
  font-size: 5.8666666667vw;
  font-weight: 500;
}
.bonus-event-right {
  width: 30%;
}
.bonus-event-right .btn {
  min-width: 18.6666666667vw;
  min-height: 7.4666666667vw;
  margin: auto;
  border-radius: 1.3333333333vw;
  background: var(--pop-bonuswallet-card-start-btn);
  box-shadow: 0 0.5333333333vw 1.0666666667vw #00000040;
  color: var(--pop-bonuswallet-card-start-txt);
  font-size: 3.4666666667vw;
  line-height: 7.4666666667vw;
  text-align: center;
}
.bonus-event .notch-l {
  position: absolute;
  left: 0;
  width: 2.1333333333vw;
  height: 4vw;
  border-radius: 0 50% 50% 0;
  background: var(--pop-bg-content);
}
.bonus-event .notch-r {
  position: absolute;
  right: 0;
  width: 2.1333333333vw;
  height: 4vw;
  border-radius: 50% 0 0 50%;
  background: var(--pop-bg-content);
}
.player-vip-detailed-menu {
  padding: 4.2666666667vw 4.2666666667vw 0;
}
.player-vip-detailed-menu .btn {
  display: flex;
  position: relative;
  flex-flow: column-reverse nowrap;
  align-items: center;
  width: calc(23.8095238095% - 2.6666666667vw);
  height: 32vw;
  margin: 2.6666666667vw 2.6666666667vw 0 0;
  padding: 0 1.3333333333vw 2.6666666667vw;
  transform: translateY(-1.0666666667vw);
  transition: 0.3s;
  border-radius: 2.6666666667vw 50% 2.6666666667vw 2.6666666667vw;
  background: linear-gradient(
    180deg,
    var(--vip-detail-lv1-bg) 0%,
    var(--vip-detail-lv-bottom-bg) 100%
  );
  box-shadow: 0 0.5333333333vw 0.8vw #0003;
}
.player-vip-detailed-menu .btn.active {
  transform: translateY(-2.1333333333vw) scale(1);
  box-shadow: 0 1.0666666667vw 1.0666666667vw #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.4666666667vw;
  font-weight: 500;
}
.player-vip-detailed-menu .vip-level-icon {
  top: 0;
  right: -2.6666666667vw;
  width: 11.2vw;
  height: 11.2vw;
  transition: 0.3s;
}
.player-vip-detailed-menu .slick-dots {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 2.6666666667vw;
}
.player-vip-detailed-menu .slick-dots li {
  display: inline-block;
  position: relative;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin: 0 2.1333333333vw;
  overflow: hidden;
  text-indent: -2666.4vw;
}
.player-vip-detailed-menu .slick-dots li button {
  display: block;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  padding: 1.0666666667vw;
  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.6666666667vw;
  height: 2.6666666667vw;
  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 0.3s;
}
.player-vip-detailed-box .inner-wrap {
  display: flex;
  transition: all 0.2s;
}
.player-vip-detailed-box .inner-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 8.5333333333vw);
  height: auto;
  margin: 4.2666666667vw;
  overflow: hidden;
  border-radius: 2.6666666667vw;
  background: var(--vip-detail-box-bg);
  box-shadow: 0 0 1.6vw var(--vip-detail-box-bg-shadow);
}
.player-vip-detailed-box .title {
  margin: 4.2666666667vw 4.2666666667vw 0;
}
.player-vip-detailed-box .title h2 {
  color: var(--color-title);
  font-size: 4vw;
  font-weight: 500;
}
.player-vip-detailed-box .title h2:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 2.1333333333vw;
  background: var(--secondary);
  vertical-align: middle;
}
.player-vip-detailed-box .title span {
  display: inline-block;
  vertical-align: middle;
}
.head-lv-name {
  height: 8.5333333333vw;
  padding-left: 4.2666666667vw;
  border-radius: 2.6666666667vw 2.6666666667vw 0 0;
  background: linear-gradient(90deg, #bcb8a8, #80795a);
  color: #fff;
  font-weight: 500;
  line-height: 8.5333333333vw;
}
.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.2666666667vw;
  border-bottom: 0.2666666667vw solid var(--vip-detail-border);
}
.lv-info-wrap .status-box.status-box2 {
  flex-wrap: wrap;
}
.lv-info-wrap .status-box .number {
  font-size: 3.7333333333vw;
}
.lv-info-wrap .status-box .number.number2 {
  color: var(--vip-detail-highlight-txt);
  font-size: 4.2666666667vw;
}
.lv-info-wrap .status {
  width: 33%;
}
.lv-info-wrap .status.accept2 {
  position: relative;
  width: 48%;
  height: 17.3333333333vw;
  margin: 0 2.6666666667vw 2.6666666667vw 0;
  padding: 2.6666666667vw;
  border-radius: 2.6666666667vw;
  background: var(--vip-detail-card-bg);
  box-shadow: 0 0.8vw 1.3333333333vw var(--vip-detail-card-bg-shadow),
    inset 0.2666666667vw 0.2666666667vw
      color-mix(in srgb, var(--inset-shadow), transparent 80%);
}
.lv-info-wrap .status.accept2:nth-child(2n) {
  margin: 0 0 2.6666666667vw;
}
.lv-info-wrap .status.accept2 .text {
  color: var(--vip-detail-card-txt);
}
.terms {
  padding: 4.2666666667vw;
}
.terms .terms-link {
  margin-bottom: 2.6666666667vw;
  color: var(--vip-detail-link);
}
.terms p {
  color: var(--vip-detail-link);
  font-size: 3.2vw;
  line-height: 5.3333333333vw;
}
.vip-list {
  margin-top: 2.1333333333vw;
}
.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 4vw;
  text-align: center;
}
.biometric-info .biometric-animation {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 58.6666666667vw;
  height: 58.6666666667vw;
  margin: 21.3333333333vw auto;
}
.biometric-info .biometric-animation .graduations .graduation {
  top: 2.4074074074vw;
  transform-origin: 0 26.962962963vw;
  display: block;
  position: absolute;
  left: 50%;
  width: 0.8vw;
  height: 2.6666666667vw;
  transform: rotate(0) trargb(7, 8, 7) -50%;
  border-radius: 2.6666666667vw;
  background: var(--biometric-wave-line-cirle);
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(1) {
  transform: rotate(1deg) translate(-50%);
  animation: line-wave 6s 0.1s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(2) {
  transform: rotate(7deg) translate(-50%);
  animation: line-wave 6s 0.2s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(3) {
  transform: rotate(13deg) translate(-50%);
  animation: line-wave 6s 0.3s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(4) {
  transform: rotate(19deg) translate(-50%);
  animation: line-wave 6s 0.4s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(5) {
  transform: rotate(25deg) translate(-50%);
  animation: line-wave 6s 0.5s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(6) {
  transform: rotate(31deg) translate(-50%);
  animation: line-wave 6s 0.6s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(7) {
  transform: rotate(37deg) translate(-50%);
  animation: line-wave 6s 0.7s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(8) {
  transform: rotate(43deg) translate(-50%);
  animation: line-wave 6s 0.8s infinite ease-in-out;
}
.biometric-info .biometric-animation .graduations .graduation:nth-child(9) {
  transform: rotate(49deg) translate(-50%);
  animation: line-wave 6s 0.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: 32vw;
  height: 32vw;
}
.biometric-info h3 {
  margin-bottom: 1.3333333333vw;
  color: var(--biometric-txt);
  font-size: 4vw;
  font-weight: 700;
}
.biometric-info p {
  width: inherit;
  margin-bottom: 5.3333333333vw;
  color: color-mix(in srgb, var(--biometric-txt), transparent 50%);
  font-size: 3.4666666667vw;
  line-height: 1.6;
}
.biometric-switch {
  position: relative;
  width: 18.9333333333vw;
  height: 10.6666666667vw;
  margin: 0 auto;
  padding: 0 2.6666666667vw;
  transition: all 0.3s;
  border-radius: 10.6666666667vw;
  background: color-mix(in srgb, var(--biometric-switch-bg), transparent 50%);
  color: var(--sidenav-category-txt);
  font-size: 3.4666666667vw;
  line-height: 10.6666666667vw;
}
.biometric-switch span {
  position: absolute;
  top: 1.3333333333vw;
  left: 1.3333333333vw;
  width: 8vw;
  height: 8vw;
  transition: all 0.3s;
  border-radius: 50%;
  background-repeat: no-repeat;
}
.biometric-switch.active {
  background-color: var(--biometric-switch-bg);
  text-indent: 8vw;
}
.biometric-switch.active span {
  top: 1.3333333333vw;
  left: 9.6vw;
}
.pop-biometric-success {
  display: none;
}
.face-id-wrapper {
  position: relative;
  width: 32vw;
  height: 32vw;
  margin: 0 auto 2.1333333333vw;
}
.face-id-wrapper video {
  width: 100%;
}
@keyframes line-wave {
  0% {
    box-shadow: 0 -0.2666666667vw 0 var(--biometric-wave-line-ani);
  }
  1% {
    box-shadow: 0 -0.5333333333vw 0 var(--biometric-wave-line-ani);
  }
  2% {
    box-shadow: 0 -0.8vw 0 var(--biometric-wave-line-ani);
  }
  3% {
    box-shadow: 0 -1.0666666667vw 0 var(--biometric-wave-line-ani);
  }
  4% {
    box-shadow: 0 -1.3333333333vw 0 var(--biometric-wave-line-ani);
  }
  5% {
    box-shadow: 0 -1.6vw 0 var(--biometric-wave-line-ani);
  }
  6% {
    box-shadow: 0 -1.8666666667vw 0 var(--biometric-wave-line-ani);
  }
  7% {
    box-shadow: 0 -2.1333333333vw 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: 0.2;
}
.vip-content {
  font-family: var(--custom-font), var(--custom-serif);
  min-height: 100% !important;
  height: auto;
  padding-top: 13.3333333333vw;
}
.vip-content .button {
  width: auto;
  height: 14.9333333333vw;
  margin: 4vw;
  border-radius: 5.3333333333vw;
  font-size: 4.2666666667vw;
  line-height: 14.9333333333vw;
  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.6666666667vw 0.5333333333vw
      var(--vip-cash-point-allow-btn-bg-box-shadow),
    inset 0 0 1.3333333333vw -0.8vw var(--vip-card-shadow);
  text-shadow: 0 2px 1.0666666667vw
    var(--vip-cash-point-allow-btn-bg-txt-shadow);
}
.vip-content .button.allow:after {
  content: "";
  position: absolute;
  top: 0;
  width: 30%;
  height: 14.9333333333vw;
  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.3333333333vw -0.8vw var(--vip-card-shadow);
  color: var(--vip-cash-point-default-btn-txt);
  text-shadow: 0 0.5333333333vw 1.0666666667vw
    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.3333333333vw;
  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.2666666667vw;
}
.player-vip-box {
  position: relative;
  margin: 2.1333333333vw 4.2666666667vw;
  border-radius: 5.3333333333vw;
  box-shadow: none;
}
.player-vip-box.total {
  padding: 2.6666666667vw;
}
.player-vip-box .title {
  position: relative;
  color: var(--vip-total-ttile);
  font-size: 3.2vw;
}
.player-vip-box .title h2 {
  color: var(--vip-convert-title);
  font-size: 4.2666666667vw;
  font-weight: 500;
}
.player-vip-box .title h2:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  border-radius: 0.5333333333vw;
  background: var(--vip-convert-border);
  vertical-align: middle;
}
.player-vip-box .refresh {
  display: inline-flex;
  position: absolute;
  right: 0;
  bottom: 0.2666666667vw;
  align-items: center;
}
.player-vip-box .refresh .text {
  color: var(--vip-refresh-txt);
}
.player-vip-box .refresh-icon {
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin-left: 1.6vw;
  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.6666666667vw;
  margin-bottom: 0;
  color: var(--vip-total-num);
  font-size: 9.3333333333vw;
  font-weight: 500;
}
.player-vip-box .status:after {
  content: none;
}
.player-vip-box .status .text {
  width: auto;
  height: 5.3333333333vw;
  margin-top: 3.2vw;
  padding: 0 2.6666666667vw;
  border-radius: 13.3333333333vw;
  background: var(--vip-total-txt-bg);
  color: var(--vip-total-txt);
  font-size: 2.9333333333vw;
  line-height: 5.3333333333vw;
}
.cleader {
  position: absolute;
  right: 2.6666666667vw;
  bottom: 2.6666666667vw;
  display: flex;
  width: auto;
  height: auto;
  padding: 2.6666666667vw 3.2vw;
  border-radius: 5.3333333333vw;
  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.9333333333vw;
  height: 3.7333333333vw;
  background: var(--vip-total-record-icon-color, #ffffff);
  margin-left: 0.5333333333vw;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
}
.cleader p {
  display: inline-flex;
  margin-left: 1.3333333333vw;
  font-size: 3.2vw;
  color: var(--vip-total-record-btn-txt, var(--vip-total-record-icon-color));
  margin: 0 0 0 1.3333333333vw;
  line-height: 5.3333333333vw;
}
.cleader a {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16vw;
  height: 10.6666666667vw;
}
.card-top {
  height: auto;
  padding: 6.4vw 6.4vw 10.6666666667vw;
  border-radius: 5.3333333333vw;
  background: var(--vip-card-bg);
  box-shadow: inset 0 0 1.3333333333vw -0.8vw var(--vip-card-shadow);
  -webkit-backdrop-filter: blur(2.1333333333vw);
  backdrop-filter: blur(2.1333333333vw);
}
.card-top .bar {
  position: relative;
  width: 100%;
  height: 1.3333333333vw;
  margin-bottom: 0;
  border-radius: 1.3333333333vw;
  background: var(--vip-card-progress-bar-bg);
  box-shadow: inset 0 0 0.2666666667vw 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 0.2666666667vw 0.8vw 0.2666666667vw
      color-mix(
        in srgb,
        var(--vip-card-progress-bar-bg-active-shadow),
        transparent 60%
      ),
    0 0 0.8vw
      color-mix(
        in srgb,
        var(--vip-card-progress-bar-bg-active-shadow),
        transparent 60%
      );
}
.card-top .bar-inner:after {
  right: -0.5333333333vw;
  width: 1.6vw;
  height: 1.6vw;
  background-color: var(--vip-card-bar-dot);
  box-shadow: 0 0 2.6666666667vw 0.2666666667vw var(--vip-card-shadow);
}
.card-top p {
  margin: 3.2vw 0;
  transform-origin: left;
  color: var(--vip-card-tips);
  font-size: 3.4666666667vw;
  line-height: 5.3333333333vw;
  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.3333333333vw;
}
.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: 12vw;
  height: 12vw;
  margin-right: 4vw;
  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.3333333333vw;
  font-size: 2.6666666667vw;
  font-weight: 700;
}
.lv-text h2 {
  font-size: 4.8vw;
  font-weight: 700;
  text-transform: uppercase;
}
.lv-history {
  position: absolute;
  right: 0;
  display: flex;
  width: auto;
  height: auto;
  border-radius: 5.3333333333vw;
  padding: 2.6666666667vw 3.2vw;
  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.7333333333vw;
  height: 2.9333333333vw;
  background: var(--vip-card-history-icon-color, #ffffff);
  margin-left: 0.5333333333vw;
  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.3333333333vw;
  font-size: 3.2vw;
  color: var(--vip-card-history-btn-txt, var(--vip-card-history-icon-color));
  margin: 0 0 0 1.3333333333vw;
  line-height: 5.3333333333vw;
}
.next-lv-totem {
  width: 7.4666666667vw;
  height: 7.4666666667vw;
  margin-left: 4vw;
  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.6666666667vw;
  padding: 0 4vw;
  border-radius: 0 0 5.3333333333vw 5.3333333333vw;
  background: var(--vip-card-bottom-bg);
}
.card-bottom a {
  color: var(--vip-card-bottom-more-txt);
  font-size: 3.2vw;
  text-decoration: none;
}
.card-bottom a span {
  display: inline-block;
  width: 3.2vw;
  height: 2.6666666667vw;
  margin-left: 2.6666666667vw;
  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 4vw;
  padding-left: 2.6666666667vw;
}
.cash-points {
  display: inline-flex;
  width: 100%;
  padding: 2.6666666667vw;
  border-radius: 5.3333333333vw;
  background: var(--vip-cash-point-bg);
  box-shadow: inset 0 0 1.3333333333vw -0.8vw 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.3333333333vw 2.6666666667vw;
}
.cash-detail .detail-title {
  position: relative;
  margin: 2.6666666667vw 0;
  color: var(--vip-cash-point-requirement-txt);
  font-size: 3.4666666667vw;
}
.cash-detail .detail-title .text {
  float: right;
}
.cash-detail .detail-title .text span {
  margin-left: 1.3333333333vw;
}
.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.6666666667vw;
  border: 0;
  border-radius: 1.3333333333vw;
  outline: none;
  background: var(--vip-cash-point-input-bg);
  color: var(--vip-cash-point-input-txt);
  font-size: 5.3333333333vw;
  font-weight: 500;
  text-align: left;
  box-shadow: 0 0 0.8vw #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 0.5s cubic-bezier(0.455, 0.3, 0.515, 0.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.5333333333vw;
  margin-top: 5.3333333333vw;
  color: var(--vip-cash-point-tips);
  font-size: 3.2vw;
}
.cash-detail .conversion .ratio {
  display: inline-flex;
  height: 8.5333333333vw;
  font-weight: 500;
}
.cash-detail .conversion .ratio .text {
  margin-left: 2.6666666667vw;
  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.5333333333vw;
}
.cash-detail .conversion .error-tip:before {
  content: "!";
  display: inline-block;
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  border-radius: 5.3333333333vw;
  background-color: var(--vip-cash-point-input-error);
  color: var(--vip-cash-point-input-error-icon);
  line-height: 3.7333333333vw;
  text-align: center;
}
.cash-detail .conversion .error-tip .text {
  margin-left: 2.1333333333vw;
  color: var(--vip-cash-point-input-error);
}
.cash-detail .conversion .error-tip.hide {
  display: none;
}
.convert-icon {
  display: flex;
  position: absolute;
  top: 25.3333333333vw;
  justify-content: center;
  width: 100%;
}
.convert-icon .chevron {
  position: absolute;
  width: 5.3333333333vw;
  height: 0.8vw;
  transform: scale(0.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.6vw);
    opacity: 1;
  }
  66.6% {
    transform: translateY(3.2vw);
    opacity: 1;
  }
  to {
    transform: translateY(4.8vw) scale(0.5);
    opacity: 0;
  }
}
.acquired-content {
  padding: 0 4vw;
}
.vip-year {
  margin: 2.6666666667vw 0;
  color: var(--vip-history-year);
  font-size: 4.8vw;
  font-weight: 700;
}
.form-vip-history {
  position: relative;
  margin: 0 0 4.2666666667vw 16vw;
  padding: 5.3333333333vw;
  border-radius: 5.3333333333vw;
  background: var(--vip-cash-point-bg);
  box-shadow: inset 0 0 1.3333333333vw -0.8vw 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.1333333333vw;
  left: -4.2666666667vw;
  width: 0.5333333333vw;
  height: 29.3333333333vw;
  background: var(--vip-history-month);
}
.form-vip-history:after {
  content: "";
  display: block;
  position: absolute;
  top: 5.0666666667vw;
  left: -5.3333333333vw;
  width: 2.1333333333vw;
  height: 2.1333333333vw;
  border-radius: 50%;
  border: 2px solid var(--vip-history-month);
}
.form-vip-history:last-child:before {
  height: 21.3333333333vw;
}
.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.2vw;
  height: 26.6666666667vw;
}
.form-vip-history .vip-month {
  position: absolute;
  top: 4.2666666667vw;
  left: -16vw;
  color: var(--vip-history-year);
  font-weight: 500;
}
.form-vip-history .vip-month:lang(tl) {
  width: 16vw;
  text-align: right;
  font-size: 3.2vw;
  left: 0;
  top: 5.3333333333vw;
  transform: translate(-110%);
}
.form-vip-history .vip-level {
  margin-bottom: 2.6666666667vw;
  font-weight: 700;
}
.form-vip-history .vip-level .text {
  margin-bottom: 0.5333333333vw;
  font-size: 2.6666666667vw;
}
.form-vip-history .vip-level .level {
  font-size: 4.8vw;
  line-height: 5.3333333333vw;
  text-transform: uppercase;
}
.form-vip-history .vip-acquired {
  font-weight: 500;
}
.form-vip-history .vip-acquired .text {
  margin-bottom: 1.3333333333vw;
  font-size: 3.2vw;
}
.form-vip-history .vip-acquired .acquired {
  color: var(--vip-card-title);
  font-size: 3.7333333333vw;
}
.vip-level-icon {
  position: absolute;
  z-index: 1;
  top: 5.3333333333vw;
  right: 5.3333333333vw;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.is-vip-points-login {
  height: 100% !important;
}
.playerform-content .button {
  height: 12vw;
  margin: 4.2666666667vw;
  line-height: 12vw;
}
.playerform-content .verify-tips {
  margin-bottom: 4vw;
}
.drop-down-menu {
  margin-bottom: 2.6666666667vw;
  overflow: hidden;
  border: 0.2666666667vw solid var(--accordion-add-bank-card-title-bg);
  border-radius: 2.6666666667vw;
  background: var(--accordion-add-bank-card-title-bg);
}
.drop-down-menu:last-child {
  margin-bottom: 0;
}
.drop-down-menu.under-review {
  border: 0.2666666667vw solid var(--accordion-review);
  background: var(--accordion-review);
}
.drop-down-menu.success {
  border: 0.2666666667vw solid var(--accordion-success);
  background: var(--accordion-success);
}
.drop-down-menu.failed {
  border: 0.2666666667vw solid var(--accordion-failed);
  background: var(--accordion-failed);
}
.drop-down-menu.bankcard {
  border: 0.2666666667vw 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.1333333333vw;
}
.drop-down-menu .phone-area-code {
  flex: 0 0 34%;
}
.drop-down-menu .phone-code-list {
  top: 68vw;
  left: 8.8vw;
  width: 25.0666666667vw;
  max-height: 24vw;
}
.drop-down-menu-btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  height: 11.7333333333vw;
  padding: 0 8vw 0 2.6666666667vw;
  border-radius: 2.1333333333vw 2.1333333333vw 0 0;
  color: var(--accordion-color-bg-title);
}
.drop-down-menu-btn:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 4vw;
  transform: translateY(-25%);
  border-width: 1.0666666667vw;
  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.4vw;
  height: 6.4vw;
  margin: 0 4vw 0 1.3333333333vw;
}
.drop-down-menu-btn .icon img {
  display: block;
  width: 100%;
  margin: auto;
}
.drop-down-menu-btn .text {
  overflow: hidden;
  font-size: 3.2vw;
  line-height: 11.7333333333vw;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verification-wrap .verification-txt {
  margin-bottom: 2.6666666667vw;
  color: var(--verify-otp-txt);
  font-weight: 700;
  text-align: center;
}
.verification-wrap .verification-txt span {
  display: block;
  margin-top: 2.6666666667vw;
  color: var(--verify-otp-phone-txt);
  line-height: 1.5;
}
.verification-wrap .btn-primary .icon-mail {
  display: inline-flex;
  width: 5.3333333333vw;
  height: 4vw;
  -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.7333333333vw;
}
.voucher-card-wrap {
  display: block;
  width: calc(100% - 4.2666666667vw);
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  background: var(--voucher-card-bg);
  overflow: hidden;
}
.voucher-card-top {
  display: block;
  position: relative;
  padding: 4vw;
  box-shadow: 0 -0.5333333333vw 1.0666666667vw #0000061a,
    inset 0.2666666667vw 0.2666666667vw 0.5333333333vw
      color-mix(in srgb, var(--inset-shadow), transparent 90%);
}
.voucher-card-top__title {
  position: relative;
  overflow: hidden;
  color: var(--voucher-title);
  font-size: 3.7333333333vw;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voucher-card-top__title:before {
  content: "";
  display: inline-block;
  width: 1.0666666667vw;
  height: 4.8vw;
  margin-right: 2.1333333333vw;
  border-radius: 1.0666666667vw;
  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.3333333333vw;
  width: 8.5333333333vw;
  height: 9.6vw;
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
  background: var(--voucher-tag-bg);
  font-size: 2.9333333333vw;
}
.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.6666666667vw;
  border-radius: 1.0666666667vw;
}
.voucher-card-top .card-content__left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21.8666666667vw;
  height: 21.8666666667vw;
  margin-right: 4vw;
  overflow: hidden;
  border-radius: 1.0666666667vw;
}
.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.6666666667vw;
}
.voucher-card-top .card-detail .card-date {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  margin: 0 1.3333333333vw 0 0;
  color: var(--voucher-dealline);
  font-size: 2.6666666667vw;
}
.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: 0.8vw 1.3333333333vw 0.8vw 0;
  padding: 0.5333333333vw 1.0666666667vw;
  border: 1px solid var(--voucher-zone);
  border-radius: 1.3333333333vw;
  color: var(--voucher-zone);
  font-size: 2.6666666667vw;
}
.voucher-card-top .card-detail .detail-btn {
  display: flex;
  align-self: flex-start;
  margin: 0.8vw 0;
  padding: 0.5333333333vw 1.0666666667vw;
  border: 0.2666666667vw solid var(--voucher-detail);
  border-radius: 1.3333333333vw;
}
.voucher-card-top .card-detail .detail-btn a {
  color: var(--voucher-detail);
  font-size: 2.6666666667vw;
  text-decoration: none;
}
.voucher-card-deco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.2vw;
}
.voucher-card-deco:before,
.voucher-card-deco:after {
  content: "";
  position: absolute;
  top: 0;
  width: 3.2vw;
  height: 3.2vw;
  border-radius: 100%;
  background-color: var(--content-bg);
}
.voucher-card-deco:before {
  right: -1.6vw;
}
.voucher-card-deco:after {
  left: -1.6vw;
}
.voucher-card-deco .dec-line {
  display: block;
  position: relative;
  left: 0;
  bottom: 0;
  width: calc(100% - 9.6vw);
  height: 0.2666666667vw;
  background-image: linear-gradient(
    to right,
    var(--voucher-dot) 0%,
    var(--voucher-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw;
}
.voucher-card-down {
  display: block;
  position: relative;
  padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
  border-radius: 0 0 2.6666666667vw 2.6666666667vw;
  box-shadow: 0 0.5333333333vw 1.0666666667vw #0000001a;
}
.voucher-card-down .card-down-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  border-radius: 1.0666666667vw;
}
.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.2vw;
  padding: 1.3333333333vw 0;
}
.voucher-card-down .card-down-inner__left .currency {
  padding: 0 0.8vw 0 1.8666666667vw;
  font-size: 3.7333333333vw;
}
.voucher-card-down .card-down-inner__left .bonus-number {
  font-size: 4.8vw;
  font-weight: 500;
}
.voucher-card-down .card-down-inner__center {
  color: var(--voucher-txt);
  font-size: 3.2vw;
}
.voucher-card-down .card-down-inner__right {
  position: relative;
  margin-left: 2.6666666667vw;
}
.voucher-card-down .card-down-inner__right .btn {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 29.3333333333vw;
  min-height: 7.4666666667vw;
  max-width: 58.6666666667vw;
  margin: auto;
  padding: 0 2.1333333333vw;
  border-radius: 1.3333333333vw;
  font-size: 3.4666666667vw;
  line-height: 7.4666666667vw;
  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.1333333333vw;
  -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.5333333333vw;
  background: transparent !important;
}
.tab-real-time-bonus .btn {
  min-width: -moz-fit-content;
  min-width: fit-content;
  line-height: 8vw;
  padding: 0;
  border-radius: 1.3333333333vw;
  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.0666666667vw;
}
.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: 80vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.available-amount__title {
  display: flex;
  align-items: center;
  margin: 4.2666666667vw auto;
}
.available-amount__icon {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin-right: 2.1333333333vw;
  -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.2666666667vw;
}
.available-amount__text--secondary {
  opacity: 0.7;
  margin-bottom: 4.2666666667vw;
}
.available-amount__decor {
  width: 21.3333333333vw;
  height: 21.3333333333vw;
  margin: 4.2666666667vw auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.available-amount__value {
  margin: 4.2666666667vw auto;
  color: var(--realtime-bonus-available-amount);
  font-weight: 700;
  font-size: 7.4666666667vw;
  text-align: center;
}
.available-amount__button {
  display: flex;
  align-items: center;
  z-index: 1;
  margin: 4.2666666667vw auto;
  padding: 2.1333333333vw 8.5333333333vw;
  background: var(--realtime-bonus-available-btn-bg);
}
.available-amount__button a {
  color: var(--realtime-bonus-available-btn-txt);
}
.available-amount__tips {
  font-size: 3.7333333333vw;
  color: var(--realtime-bonus-available-tips-txt);
  text-align: center;
}
.available-amount__tips--rescue {
  margin: 4vw auto;
}
.claimed-box {
  display: flex;
  justify-content: space-around;
  margin: 1.0666666667vw 0;
  text-align: center;
}
.claimed-box__title {
  font-size: 3.2vw;
  color: var(--realtime-bonus-claimed-title);
}
.claimed-box__value {
  margin-top: 2.1333333333vw;
  font-size: 4.8vw;
  color: var(--realtime-bonus-claimed-value);
}
.real-time-bonuses-accordion {
  margin: 2.1333333333vw 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.1333333333vw;
  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.3333333333vw);
  line-height: 1.2;
  font-size: 4.2666666667vw;
  font-weight: 600;
  color: var(--realtime-bonus-summary-list-header-title);
}
.real-time-bonuses-accordion .accordion-header__arrow {
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  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 0.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.0666666667vw;
  margin-top: 2.1333333333vw;
}
.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.2vw;
  color: var(--realtime-bonus-summary-list-header-total-rebate-title);
}
.real-time-bonuses-accordion .total-rebate__value {
  font-size: 4.2666666667vw;
  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.1333333333vw;
  border-radius: 1.0666666667vw;
  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.2vw;
}
.real-time-bonuses-accordion .total-claimed__value,
.real-time-bonuses-accordion .total-expired__value {
  display: block;
  font-size: 4.2666666667vw;
  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 0.3s, opacity 0.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.2666666667vw;
  gap: 2.1333333333vw;
  padding: 2.1333333333vw 3.2vw;
  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.7333333333vw;
  line-height: normal;
}
.real-time-bonuses-accordion
  .accordion-collapse__item
  .game-type-accordion-header
  .game-type-accordion-header__button {
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  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 0.3s;
}
.real-time-bonuses-accordion .game-type-accordion-collapse {
  display: flex;
  flex-direction: column;
  gap: 6.4vw;
  width: 100%;
  max-height: 0;
  padding: 0 3.2vw;
  overflow: hidden;
  transition: max-height 0.3s, opacity 0.5s;
  opacity: 0;
}
.real-time-bonuses-accordion .game-type-accordion-collapse__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.2vw;
}
.real-time-bonuses-accordion .game-type-accordion-collapse__item:first-child {
  margin-top: 3.2vw;
}
.real-time-bonuses-accordion .game-type-accordion-collapse__item:last-child {
  margin-bottom: 3.2vw;
  border-bottom: none;
}
.real-time-bonuses-accordion .game-type-accordion-collapse li + li:before {
  content: "";
  display: block;
  position: absolute;
  top: -3.2vw;
  width: 100%;
  height: 0.2666666667vw;
  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.2vw;
}
.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.1333333333vw;
}
.real-time-bonuses-accordion .game-type-detail {
  display: flex;
  flex-direction: column;
  gap: 2.1333333333vw;
  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.6666666667vw;
  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.6666666667vw;
  opacity: 1;
  background: var(--realtime-bonus-game-type-accordion-content-bg);
}
.real-time-bonuses-accordion
  .accordion-collapse__item.accordion-wrap--expanded
  .game-type-accordion-collapse__rescue-content {
  background: var(--realtime-bonus-game-type-accordion-header-bg);
}
.pop-real-time-bonus .pop-inner {
  text-align: center;
}
.pop-real-time-bonus h5 {
  font-size: 6.4vw;
  font-weight: 700;
  color: var(--pop-realtime-bonus-number);
}
.cricket-total-wrap {
  display: grid;
  grid-template-columns: 40% auto;
  align-items: center;
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  background: var(--cricket-betting-details-total-bg);
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
  color: var(--cricket-betting-details-total-txt);
  font-size: 3.7333333333vw;
}
.cricket-total-wrap .title {
  padding: 2.1333333333vw;
  border-radius: 1.3333333333vw 0 0;
  background: var(--cricket-betting-details-total-title-bg);
  color: var(--cricket-betting-details-totalt-title);
}
.cricket-total-wrap .platform {
  padding: 2.1333333333vw;
  border-radius: 0 0 0 1.3333333333vw;
  background: var(--cricket-betting-details-total-platform-bg);
  color: var(--cricket-betting-details-total-platform);
}
.cricket-total-wrap .platform span {
  margin-left: 0.5333333333vw;
}
.cricket-total-wrap .profit,
.cricket-total-wrap .turnover {
  display: inline-flex;
  padding: 2.1333333333vw;
  text-align: left;
}
.cricket-total-wrap .profit span,
.cricket-total-wrap .turnover span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 21.3333333333vw;
}
.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: -0.2666666667vw;
  width: 95%;
  height: 0.2666666667vw;
  background: linear-gradient(
    to right,
    var(--accordion-dot) 0%,
    var(--accordion-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw 2.6666666667vw;
}
.cricket-total-wrap .negative {
  color: var(--cricket-betting-details-profit-amount);
}
.cricket-list-content .accordion-wrap {
  margin: 2.1333333333vw;
}
.cricket-list-content .accordion-header {
  width: 100%;
  padding: 2.1333333333vw;
}
.cricket-list-content .accordion-header.show .arrow {
  transform: rotate(180deg);
  transform-origin: center;
}
.cricket-list-content .accordion-collapse {
  display: block;
  padding: 2.1333333333vw;
}
.cricket-list-content .main-info {
  display: grid;
  grid-template-columns: 10.6666666667vw calc(100% - 20.2666666667vw) 5.3333333333vw;
  align-items: center;
  margin-bottom: 2.1333333333vw;
  column-gap: 2.1333333333vw;
}
.cricket-list-content .main-info img {
  grid-row: 1 / span 2;
  width: 10.6666666667vw;
}
.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.2666666667vw;
  font-weight: 700;
}
.cricket-list-content .parlay-type {
  height: 4.8vw;
  margin-left: 2.1333333333vw;
  padding: 0.5333333333vw 1.0666666667vw;
  border-radius: 1.0666666667vw;
  background: var(--cricket-betting-details-tag-bg);
  color: var(--cricket-betting-details-tag-txt);
  font-size: 3.2vw;
  line-height: 3.7333333333vw;
}
.cricket-list-content .arrow {
  position: relative;
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  transition: all 0.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.2vw;
}
.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.1333333333vw;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2.1333333333vw;
}
.cricket-list-content .betting-info:before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.4vw);
  width: 100%;
  height: 0.2666666667vw;
  background: linear-gradient(
    to right,
    var(--accordion-dot) 0%,
    var(--accordion-dot) 10%,
    transparent 10%
  );
  background-repeat: repeat-x;
  background-size: 2.6666666667vw 2.6666666667vw;
}
.cricket-list-content .betting-info:after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 0.4vw);
  width: 0.2666666667vw;
  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.6666666667vw 2.6666666667vw;
}
.cricket-list-content .avg-odds,
.cricket-list-content .turnover,
.cricket-list-content .stake,
.cricket-list-content .profit {
  display: grid;
  grid-template-columns: 4.8vw calc(100% - 4.8vw);
  padding: 1.0666666667vw;
  column-gap: 2.1333333333vw;
  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.8vw;
  height: 4.8vw;
}
.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.2vw;
}
.cricket-list-content .bet-bid,
.cricket-list-content .bet-placed {
  color: var(--cricket-betting-details-date-txt);
  font-size: 3.2vw;
}
.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.4vw calc(100% - 6.4vw);
  grid-template-rows: 6.4vw auto auto;
  padding: 1.0666666667vw;
  overflow: hidden;
  border-radius: 1.0666666667vw;
  background: var(--cricket-betting-details-sub-item-bg);
}
.parlay-wrap + .parlay-wrap {
  margin-top: 1.0666666667vw;
}
.parlay-wrap:not(.commission):after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 9.6vw 9.6vw 0;
  border-style: solid;
}
.parlay-wrap .event-type {
  align-self: center;
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  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.2vw;
  font-weight: 700;
}
.parlay-wrap .event-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: calc((100% - 4.2666666667vw - 9.6vw) / 2);
  color: var(--cricket-betting-details-sub-item-title);
  font-weight: 400;
}
.parlay-wrap .event-name i {
  margin: 0 1.0666666667vw;
}
.parlay-wrap .market {
  grid-column: 2 / span 9;
  color: var(--cricket-betting-details-sub-item-txt);
  font-size: 3.7333333333vw;
  line-height: 4.2666666667vw;
}
.parlay-wrap .market .sub-txn-event-name {
  margin-bottom: 2.1333333333vw;
}
.parlay-wrap .parlay-status {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 9.6vw;
  height: 9.6vw;
}
.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.0666666667vw;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.1333333333vw;
}
.parlay-wrap .details .select {
  grid-column: 1 / span 2;
  padding: 2.1333333333vw;
  border-radius: 1.0666666667vw;
  background: var(--cricket-betting-details-sub-item-table-bg);
  color: var(--cricket-betting-details-sub-item-txt);
  font-size: 3.7333333333vw;
}
.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.1333333333vw;
  border-radius: 1.0666666667vw;
  background: var(--cricket-betting-details-sub-item-table-bg);
  color: var(--cricket-betting-details-sub-item-value-title);
  font-size: 3.2vw;
}
.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.2666666667vw;
  text-align: right;
}
.parlay-wrap .odds-req strong,
.parlay-wrap .odds-matched strong {
  margin-top: 0.5333333333vw;
}
.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, 0.2, 1);
  transform: scale3d(0, 0, 0);
  background-color: var(--mat-ripple-color, rgba(0, 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 0.4s cubic-bezier(0.25, 0.8, 0.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: 0.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, 0.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, 0.08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.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, 0.08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.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, 0.08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.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, 0.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, 0.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, 0.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, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px
      rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 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,
    0.4
  );
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(
    244,
    182,
    0,
    0.3
  );
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(
    244,
    182,
    0,
    0.3
  );
  --mat-datepicker-toggle-active-state-icon-color: #f4b600;
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(
    244,
    182,
    0,
    0.2
  );
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(
    249,
    171,
    0,
    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, 0.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, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.5);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(
    255,
    255,
    255,
    0.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,
    0.5
  );
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(
    255,
    255,
    255,
    0.24
  );
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: rgba(
    255,
    255,
    255,
    0.5
  );
  --mat-datepicker-range-input-disabled-state-text-color: rgba(
    255,
    255,
    255,
    0.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,
    0.4
  );
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(
    163,
    141,
    91,
    0.3
  );
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(
    163,
    141,
    91,
    0.3
  );
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(
    163,
    141,
    91,
    0.2
  );
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(
    249,
    171,
    0,
    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,
    0.4
  );
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(
    244,
    67,
    54,
    0.3
  );
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(
    244,
    67,
    54,
    0.3
  );
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(
    244,
    67,
    54,
    0.2
  );
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(
    249,
    171,
    0,
    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 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
header.slot,
header.editor,
header.vip {
  box-shadow: none;
}
header .logo {
  width: 10.6666666667vw;
}
.login-biometric-content .button {
  margin: 2.1333333333vw;
}
.member-content .button {
  width: calc(100% - 4.2666666667vw);
  margin: 2.1333333333vw;
}
.menu-box {
  margin: 2.1333333333vw;
  padding: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
.input-group input {
  border-radius: 1.3333333333vw;
}
.input-group.upload-file .input-wrap:before {
  border-radius: 1.3333333333vw;
}
.under-maintain .maintain-mask,
.select-group select,
.btn-select {
  border-radius: 1.3333333333vw;
}
.option-group.select-bar {
  padding: 2.1333333333vw 0 2.1333333333vw 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.option-group select {
  padding: 0 6.4vw 0 2.1333333333vw;
}
.option-wrap:after {
  right: 2.1333333333vw;
}
.upload-wrap .upload-group,
.file-box,
.crypto-group-2 .crypto-input input {
  border-radius: 1.3333333333vw;
}
.tab-btn-bar:before {
  border-radius: 1.3333333333vw;
}
.tab-btn-bar .line:after {
  border-radius: 1.3333333333vw;
}
.tab-btn-page {
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
.btn-box {
  margin: 2.1333333333vw 0 0;
}
.switch-mode,
.inner-block {
  grid-gap: 2.1333333333vw;
  margin: 2.1333333333vw;
}
.switch-mode li,
.inner-block li {
  border-radius: 1.3333333333vw;
}
.switch-mode li.active:after,
.inner-block li.active:after {
  border-radius: 1.0666666667vw;
}
.switch-mode li.active:before,
.inner-block li.active:before {
  border-radius: 1.0666666667vw;
}
.loader-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader-box video {
  width: 21.3333333333vw;
}
.menu-first .beforelogin,
.menu-first .afterlogin {
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.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.3333333333vw;
}
.menu-header {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.member-menu-content {
  padding: 2.1333333333vw;
}
.member-menu-box {
  margin: 0 0 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.member-menu-box .title {
  padding: 0 3.2vw;
}
.member-menu-box ul {
  padding: 0 0 2.1333333333vw;
}
.member-menu-box ul li {
  padding: 1.0666666667vw;
}
.member-menu-box:nth-child(1) {
  background: var(--sidenav-category-area-bg);
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw
    color-mix(in srgb, var(--inset-shadow), transparent 90%);
}
.member-menu-box:nth-child(1) .title {
  padding: 0 2.1333333333vw;
}
.menu-second ul.active {
  border-radius: 1.3333333333vw;
}
.cricket .betting {
  width: 100%;
  margin-top: 2.1333333333vw;
}
.nextevent .slider .slick-slide {
  margin: 0 2.1333333333vw;
}
.login-info-box {
  margin: 1.0666666667vw 2.1333333333vw 0;
}
.pop-account-lock {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.pop-confirm-password {
  padding-top: 9.6vw;
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.pop-biometric-success,
.register-fail-wrap,
.register-success-wrap {
  border-radius: 1.3333333333vw;
}
.pop-other-account {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.pop-transfer .menu-box {
  padding: 2.1333333333vw;
}
.pop-wrap3 {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
  padding: 8.5333333333vw 2.1333333333vw 2.1333333333vw;
}
.pop-wrap3 .inner-wrap .inner-right .inner-box:nth-child(2) {
  padding: 8.5333333333vw 2.1333333333vw 2.1333333333vw;
}
.pop-wrap3 .title-wrap .title {
  margin-bottom: 2.1333333333vw;
}
.lvup-select-wrap {
  grid-gap: 2.1333333333vw;
}
.lvup-select-wrap .event {
  border-radius: 1.3333333333vw;
}
.reel-box {
  margin-bottom: 2.1333333333vw;
}
.category {
  padding-bottom: 2.1333333333vw;
}
.category ul {
  grid-gap: 1.0666666667vw;
  margin: 2.1333333333vw 0;
}
.category ul li {
  border-radius: 1.3333333333vw;
}
.category ul li.active:after {
  border-radius: 1.3333333333vw;
}
.category ul li.active:before {
  border-bottom-right-radius: 1.3333333333vw;
}
.search-box .recently-played,
.game-list li button {
  border-radius: 1.3333333333vw;
}
.recently-played-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.3333333333vw 1.3333333333vw 0 0;
}
.fixed-tab .promotion .promotion-main {
  padding: 0 2.1333333333vw;
}
.tips-info {
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
.bonus-wallet-wrap {
  width: calc(100% - 4.2666666667vw);
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.bonus-wallet {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.bonus-card-down {
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.no-result {
  width: calc(100% - 4.2666666667vw);
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.player-vip-box {
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.card-top {
  border-radius: 1.3333333333vw;
}
.card-bottom {
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.vip-content .button {
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.acquired-content {
  padding: 0 2.1333333333vw;
}
.cash-points,
.form-vip-history {
  border-radius: 1.3333333333vw;
}
.player-vip-detailed-menu {
  padding: 2.1333333333vw 2.1333333333vw 0;
}
.player-vip-detailed-menu .btn {
  border-radius: 1.3333333333vw 50% 1.3333333333vw 1.3333333333vw;
}
.player-vip-detailed-box .inner-box {
  width: calc(100% - 4.2666666667vw);
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.player-vip-detailed-box .title {
  margin: 2.1333333333vw 2.1333333333vw 0;
}
.head-lv-name {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.lv-info-wrap {
  padding: 2.1333333333vw;
}
.lv-info-wrap .status.accept2 {
  border-radius: 1.3333333333vw;
}
.terms {
  padding: 2.1333333333vw;
}
.list-title {
  margin: 2.1333333333vw 2.1333333333vw 0;
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.list-content {
  margin: 0 2.1333333333vw;
  padding: 1.0666666667vw;
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.list-content li {
  padding: 0;
}
.vip-list {
  margin-top: 0;
}
.time-zone {
  border-radius: 0.5333333333vw;
}
.accordion-wrap.error {
  box-shadow: none;
}
.playerform-content .button {
  margin: 2.1333333333vw;
}
.drop-down-menu {
  border-radius: 1.3333333333vw;
}
.drop-down-menu .phone-code-list {
  left: 4.5333333333vw;
  width: 29.6vw;
}
.drop-down-menu-btn {
  border-radius: 1.0666666667vw 1.0666666667vw 0 0;
}
.accordion-card-wrap.select-bar,
.option-group.select-bar,
.player-deposit-wrap .player-deposit-step1 .menu-box {
  margin: 2.1333333333vw;
}
.player-top .credit-card {
  margin: 2.1333333333vw 0 1.0666666667vw;
}
.credit-card {
  width: calc(100% - 4.2666666667vw);
}
.main-wallet-info {
  padding: 2.1333333333vw;
}
.accordion-card-wrap {
  margin: 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.pop-otp-verification {
  padding-top: 8.5333333333vw;
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.ac-list .btn-revert {
  border-radius: 1.3333333333vw;
}
.ac-list .btn-revert:after {
  border-radius: 1.0666666667vw;
}
.info-list li:first-child {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.info-list li:last-child {
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.style-bank li input[type="checkbox"] + label,
.style-bank li input[type="radio"] + label {
  border-radius: 1.3333333333vw;
}
.style-bank li input[type="checkbox"].active + label:before,
.style-bank li input[type="radio"].active + label:before {
  border-bottom-right-radius: 1.3333333333vw;
}
.transaction-record-list .list-title {
  margin: 0 2.1333333333vw;
}
.list-group .date-title {
  margin: 0 2.1333333333vw;
  padding: 2.1333333333vw;
}
.list-group:last-child {
  margin-bottom: 2.1333333333vw;
}
.list-group:last-child .list-content {
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.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.1333333333vw;
}
.list-bar .date-title {
  margin: 0;
}
.timeline-block .content {
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
.details-box {
  border-radius: 1.3333333333vw;
}
.pop-transaction-records-details .member-content .button {
  width: auto;
}
.list-arrow {
  margin-right: 2.1333333333vw;
}
.pop-transaction-records-details {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.pop-transaction-records-details .bank-name {
  border-radius: 1.0666666667vw;
}
.inbox-list .inner-box {
  margin-top: 2.1333333333vw;
}
.inbox-list .list-group:first-child .date-title {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.inbox-list .list-content {
  border-radius: 0;
}
.inbox-list .message-item {
  padding: 0 2.1333333333vw;
}
.inbox-list .message-item:last-child {
  border-bottom: 0;
}
.inbox-list .content-wrap {
  margin-left: 2.1333333333vw;
  padding: 2.1333333333vw 0;
}
.recommend-friends-box {
  margin: 2.1333333333vw;
  padding: 2.1333333333vw;
  border-radius: 1.3333333333vw;
}
.recommend-friends-box.deco {
  margin-top: 17.0666666667vw;
}
.date-bar {
  padding: 2.1333333333vw;
}
.code-box .code,
.code-box .btn-share,
.condition-box .item .text {
  border-radius: 1.3333333333vw;
}
.ticket + .ticket {
  margin-top: 2.1333333333vw;
}
.ticket .ticket-inner-left {
  padding: 2.1333333333vw;
}
.ticket .ticket-inner {
  border-radius: 1.3333333333vw;
}
.article-content {
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
.article-detail .table {
  border-radius: 1.3333333333vw;
}
.article-detail .table-title:first-child {
  border-radius: 1.3333333333vw 0 0;
}
.article-detail .table-title:last-child {
  border-radius: 0 1.3333333333vw 0 0;
}
.currency-selector-wrap {
  width: 26.6666666667vw;
  top: 4.2666666667vw;
  right: 4.2666666667vw;
  background-color: var(--form-input-bg);
  box-shadow: 0 1.6vw 3.2vw #0003;
  border-radius: 1.3333333333vw;
  display: flex;
  flex-flow: row nowrap;
  padding: 0 2.1333333333vw;
}
.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.3333333333vw;
  right: 0;
  border-width: 1.3333333333vw;
  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.1333333333vw 0;
  list-style: none;
}
.currency-selector-wrap li img {
  width: 8vw;
  margin-right: 3.2vw;
  border-radius: 50%;
  box-shadow: 0 0 0.5333333333vw #000c;
}
.currency-selector-wrap li span {
  font-size: 3.2vw;
  color: var(--pop-txt);
  margin-left: 0;
}
.nav-category {
  padding: 0 1.0666666667vw 1.0666666667vw;
}
.nav-category:before {
  background: transparent;
}
.nav-category.nav-auto .slick-list .btn {
  min-width: 21.3333333333vw;
}
.nav-category .btn {
  margin-top: 1.0666666667vw;
  padding: 1.0666666667vw 0;
  transition: background 0.05s ease-out;
}
.nav-category .btn span {
  display: block;
  width: 6.4vw;
  height: 6.4vw;
  margin: 0 auto;
  transition: all 0.3s;
  border-radius: 10.6666666667vw;
  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.3333333333vw;
  background: var(--nav-category-bg-active-circle);
}
.nav-category .btn p {
  margin: 1.0666666667vw;
  font-size: 2.6666666667vw;
  font-weight: 700;
}
.nav-category.active {
  height: 8.5333333333vw !important;
  animation: slide-out-top 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.nav-category.active .btn {
  margin-top: 1.3333333333vw;
}
.nav-category.active .btn span {
  height: 0;
}
.nav-category.active .btn p {
  display: block;
}
@keyframes slide-out-top {
  0% {
    height: 6.4vw;
    opacity: 0;
  }
  to {
    height: 8.5333333333vw;
    opacity: 1;
  }
}
.nav-category.nav-column {
  padding: 1.0666666667vw;
}
.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.0666666667vw auto 0;
}
.nav-category.nav-column .btn p {
  width: 21.8666666667vw;
  padding: 0 1.0666666667vw;
  line-height: 120%;
  overflow-wrap: break-word;
}
.nav-category.nav-column.active {
  height: var(--nav-category-active-height, 10.1333333333vw) !important;
  padding-top: 1.6vw;
}
.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.3333333333vw);
  margin: 0;
}
.card1 li,
.card2 li {
  border-radius: 1.3333333333vw;
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
.content-title {
  padding: 1.0666666667vw;
}
.content-main .slick-slide {
  margin: 0 2.1333333333vw;
}
.maintenance-row {
  display: grid;
  position: relative;
  grid-gap: 2.1333333333vw;
  grid-template-columns: calc(100% - 8vw - 2.1333333333vw) 6vw;
  margin: 2.1333333333vw;
}
.maintenance-row h6 {
  display: flex;
  align-items: center;
  height: 8vw;
  background: var(--sa-maintenance-bg);
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
  padding: 1.0666666667vw 2.1333333333vw;
  border-radius: 1.3333333333vw;
  font-size: 3.2vw;
  line-height: 8vw;
}
.maintenance-row h6 i {
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  margin-right: 2.1333333333vw;
  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.4vw);
}
.maintenance-row h6 .error-code {
  margin-left: auto;
}
.maintenance-row .info {
  position: relative;
  justify-content: flex-end;
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  background: var(--sa-maintenance-info-bg);
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    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: 8vw;
  text-align: center;
}
.maintenance-row .tooltips {
  display: none;
  position: absolute;
  z-index: 3;
  top: 10.1333333333vw;
  right: 0;
  width: auto;
  max-width: 100%;
  padding: 2.1333333333vw;
  border-radius: 1.3333333333vw;
  background: var(--sa-maintenance-info-tooltips-bg);
  color: var(--sa-maintenance-info-tooltips-txt);
  font-size: 3.2vw;
  line-height: 4.2666666667vw;
}
.maintenance-row .tooltips:before {
  content: "";
  display: block;
  position: absolute;
  top: -1.6vw;
  right: 2.4vw;
  border-width: 0 1.6vw 1.6vw;
  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.4vw calc(100% - 6.4vw);
  align-items: center;
  width: calc(100% - 4.2666666667vw);
  height: 8vw;
  margin: 2.1333333333vw;
  padding: 1.0666666667vw 2.1333333333vw;
  border-radius: 1.3333333333vw;
  background: var(--sa-back-to-cricket-bg);
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    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.2vw;
}
.back-to-cricket-row .tap-circle {
  position: relative;
}
.back-to-cricket-row .tap {
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  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: 0.4vw;
  width: 1.6vw;
  height: 1.6vw;
  transform-origin: 45% 35%;
  border: 0.2666666667vw solid var(--sa-back-tocricket-tap-icon-color);
  border-radius: 50%;
  opacity: 0.25;
}
.back-to-cricket-row .circle-wave-2 {
  position: absolute;
  top: -0.5333333333vw;
  left: -0.1333333333vw;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  transform-origin: 45% 35%;
  border: 0.2666666667vw solid var(--sa-back-tocricket-tap-icon-color);
  border-radius: 50%;
  opacity: 0.4;
}
.sport-loader {
  position: relative;
}
.sport-loader svg {
  position: absolute;
  width: 100%;
  height: 53.3333333333vw;
}
.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.3333333333vw;
}
.sport-loader .ball-wrap li {
  display: inline-block;
  position: absolute;
  top: calc(50% - 2.1333333333vw);
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  transform-origin: center;
  animation: rotate-in-center infinite 2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sport-loader .basketball {
  animation-delay: 0.3s;
  left: calc(40% - 2.1333333333vw);
}
.sport-loader .soccer {
  animation-delay: 0.6s;
  left: calc(50% - 2.1333333333vw);
}
.sport-loader .cricket {
  animation-delay: 0.9s;
  left: calc(60% - 2.1333333333vw);
}
@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: 0.5;
  }
  30% {
    transform: scale(1);
    opacity: 0.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);
  }
}
:root {
  --date-tab-translateX: 0%;
}
a {
  text-decoration: none;
}
.rainy-wrap,
.no-rainy-wrap,
.weather-wrap,
.streaming-wrap,
.record-wrap,
.rule-wrap,
.rain-bet-wrap {
  position: relative;
  background: #281a70;
  font-family: Jost, sans-serif;
}
.rain-bet-wrap .select-session .count-down-timer,
.weather-info li .value,
.no-rainy-block .countdown-day .rain-info-box h3,
.no-rainy-block .no-rainy-board .countdown-timer h4,
.bet-block .video-box .count-down-timer {
  font-family: Inconsolata, monospace;
  font-weight: 900;
}
.rain-btn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 14.9333333333vw;
  padding: 0 4.2666666667vw;
  border-radius: 2.6666666667vw;
  color: #fff;
  font-size: 5.3333333333vw;
  font-weight: 500;
  line-height: 14.9333333333vw;
  text-align: center;
  text-shadow: 0 0.5333333333vw 1.0666666667vw rgba(131, 76, 0, 0.4);
}
.rain-btn.primary {
  background: #ffd259;
}
.rain-btn.secondary {
  opacity: 0.7;
  color: #fff;
  font-size: 4.2666666667vw;
}
.rain-btn.disabled {
  opacity: 0.5;
  background: #0000004d;
  text-shadow: 0 0.5333333333vw 1.0666666667vw rgba(0, 0, 0, 0.1);
}
.rain-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4.2666666667vw;
}
.rain-title {
  display: inline-flex;
  align-items: center;
  margin: 4.2666666667vw 0;
  color: #fff;
  font-size: 4.2666666667vw;
  font-weight: 700;
}
.rain-title:before {
  content: "";
  display: block;
  width: 1.0666666667vw;
  height: 3.7333333333vw;
  margin-right: 2.1333333333vw;
  border-radius: 0.5333333333vw;
  background: #ffd259;
}
.frame-box {
  margin-top: 4.2666666667vw;
  border: 0.2666666667vw solid rgba(255, 255, 255, 0.1);
  border-radius: 5.3333333333vw;
  background: #ffffff0d;
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
}
.frame-box .frame-title {
  padding: 4.2666666667vw 6.4vw;
  border-bottom: 0.2666666667vw solid rgba(255, 255, 255, 0.1);
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: #ffffff0d;
  color: #fff;
  font-size: 3.7333333333vw;
  font-weight: 500;
  text-align: left;
}
.frame-box .frame-content {
  padding: 4.2666666667vw 6.4vw;
  opacity: 0.7;
  color: #fff;
}
.frame-box .frame-content ul.disc {
  padding-left: 4.2666666667vw;
  list-style-type: disc;
}
.frame-box .frame-content ul li {
  line-height: 1.5;
}
.frame-box .frame-content ul li + li {
  margin-top: 4.2666666667vw;
}
.normal-bg,
.rain-bet-wrap .number-keyboard li.active:after,
.rain-bet-wrap .number-keyboard li,
.rain-bet-wrap .quick-number li,
.pipe-block .pipe-content .tab-pane li,
.rainy-wrap .rain-odds li,
.rainy-wrap .select-date li {
  border: 0.2666666667vw solid rgba(255, 255, 255, 0.02);
  background: #363285cc;
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
  color: #fff;
}
.normal-shadow-bg,
.rainy-wrap .odds-history-block .history-data,
.rainy-wrap .function-menu li .icon,
.weather-info li,
.rain-icon-btn {
  background: #363285cc;
  box-shadow: 0 3.2vw 2.6666666667vw #281a7099,
    inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
  color: #fff;
}
.active-with-bg,
.pipe-block .pipe-content .tab-pane li.active,
.rainy-wrap .select-date li.active {
  position: relative;
  background: linear-gradient(60deg, #6d25f4, #ff9fa2);
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
}
.active-with-bg:after,
.pipe-block .pipe-content .tab-pane li.active:after,
.rainy-wrap .select-date li.active:after {
  content: "";
  position: absolute;
  top: 0.1333333333vw;
  left: 0.1333333333vw;
  width: calc(100% - 0.2666666667vw);
  height: calc(100% - 0.2666666667vw);
  border-radius: 4vw;
  background: linear-gradient(0deg, #452da4, #71528c);
  background-size: 300% 300%;
}
.active-with-check,
.rainy-wrap .rain-odds li.active {
  position: relative;
  background: linear-gradient(45deg, #ff9fa2, #6d25f4);
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
}
.active-with-check:before,
.rainy-wrap .rain-odds li.active:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -0.2666666667vw;
  bottom: -0.2666666667vw;
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  border-bottom-right-radius: 4.2666666667vw;
  background: url(/images/rain/h5/check.svg) no-repeat center;
}
.active-with-check:after,
.rainy-wrap .rain-odds li.active:after {
  content: "";
  position: absolute;
  top: 0.1333333333vw;
  left: 0.1333333333vw;
  width: calc(100% - 0.2666666667vw);
  height: calc(100% - 0.2666666667vw);
  border-radius: 4vw;
  background: #343084;
}
.bet-block {
  display: grid;
  position: relative;
  grid-gap: 4.2666666667vw;
  grid-template-columns: repeat(2, 1fr);
  margin: 6.4vw 4.2666666667vw;
  border-radius: 5.3333333333vw;
}
.bet-block .bet-board {
  display: grid;
  position: relative;
  grid-template-columns: 29.3333333333vw auto;
  border-radius: 5.3333333333vw;
  box-shadow: 0 3.2vw 2.6666666667vw #281a701a,
    inset 0 0.2666666667vw 0.8vw #ffffff80;
}
.bet-block .bet-board h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 23.4666666667vw;
  height: 10.6666666667vw;
  padding-left: 4.2666666667vw;
  color: #fff;
  font-size: 4.2666666667vw;
  font-weight: 700;
  line-height: 10.6666666667vw;
}
.bet-block .bet-board .bet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: -0.1333333333vw;
  right: -0.1333333333vw;
  grid-column: 2 / span 1;
  width: 24vw;
  height: 10.6666666667vw;
  padding-left: 0.5333333333vw;
  border-top-right-radius: 5.3333333333vw;
  color: #fff;
  font-size: 3.7333333333vw;
  font-weight: 500;
  line-height: 10.6666666667vw;
  mask: url(/images/rain/h5/mask-card.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/mask-card.svg) no-repeat center;
}
.bet-block .bet-board .bet span {
  position: relative;
  left: 9.6vw;
}
.bet-block .bet-board .icon-arrow-left {
  position: absolute;
  right: 0;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  transform: rotateY(180deg);
  background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/15%;
}
.bet-block .bet-board .odds {
  display: flex;
  grid-column: 1 / span 2;
  align-items: flex-end;
  justify-content: center;
  margin: 2.1333333333vw 0;
  color: #fff;
}
.bet-block .bet-board .odds .value {
  font-size: 9.0666666667vw;
  font-weight: 700;
}
.bet-block .bet-board .odds span {
  margin-bottom: 1.0666666667vw;
  margin-left: 2.1333333333vw;
  font-size: 3.2vw;
  font-weight: 500;
}
.bet-block .bet-board .circle-chart {
  display: flex;
  position: relative;
  grid-column: 1 / span 2;
  justify-content: center;
  padding: 2.1333333333vw 0;
}
.bet-block .bet-board .circle-chart .circle-percentage {
  transform: rotate(-90deg);
  transform-origin: center;
  animation: circle-chart 1s reverse;
}
.bet-block .bet-board .circle-chart .rain-ani {
  position: absolute;
  top: 8.5333333333vw;
  width: 16vw;
  height: 16vw;
}
.bet-block .bet-board .circle-chart .rain-ani video {
  width: 16vw;
  height: 16vw;
}
.bet-block .bet-board .circle-chart .proportion {
  display: flex;
  position: absolute;
  bottom: 11.7333333333vw;
  align-items: center;
  color: #fff;
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.bet-block .bet-board .circle-chart .proportion:before {
  content: "";
  display: block;
  width: 4vw;
  height: 4vw;
  margin-right: 1.0666666667vw;
  background: #fff;
  mask: url(/images/rain/h5/icon-people.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-people.svg) no-repeat center;
}
.bet-block .bet-board .circle-chart .proportion:after {
  content: "%";
  display: block;
}
.bet-block .bet-board.rain {
  background: radial-gradient(
    circle at 1.2% 1.2%,
    #00ecff,
    #6230d5 48%,
    #4e5cff 80%,
    #00bbe6 140%,
    #fff 140%
  );
}
.bet-block .bet-board.rain .bet {
  background: #363285;
}
.bet-block .bet-board.rain .bet:before {
  background: #363285;
}
.bet-block .bet-board.no-rain {
  background: radial-gradient(
    circle at 2.1% 2.1%,
    #ff479f,
    #fe7777 48%,
    #ff9467 80%,
    #ffc638 140%,
    #fff 140%
  );
}
.bet-block .bet-board.no-rain .bet {
  background: #ff5252;
}
.bet-block .bet-board.no-rain .bet:before {
  background: #ff5252;
}
.bet-block .video-box {
  display: flex;
  position: absolute;
  z-index: 1;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 5.3333333333vw;
  background: #281a70d9;
}
.bet-block .video-box .video {
  position: absolute;
  z-index: 2;
  width: 53.3333333333vw;
  height: 53.3333333333vw;
}
.bet-block .video-box .status {
  position: absolute;
  z-index: 2;
  bottom: 14.9333333333vw;
  color: #fff;
  font-size: 4.8vw;
}
.bet-block .video-box .count-down-timer {
  display: flex;
  position: absolute;
  z-index: 2;
  bottom: 8.5333333333vw;
  align-items: center;
  color: #ffd259;
  font-size: 5.3333333333vw;
  font-weight: 900;
  letter-spacing: 0.5333333333vw;
}
.bet-block .video-box .count-down-timer h4 {
  width: 6.4vw;
  text-align: right;
}
.bet-block .suspend {
  display: flex;
  position: absolute;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(50% - 2.1333333333vw);
  height: 100%;
  border-radius: 5.3333333333vw;
  background: #281a70d9;
}
.bet-block .suspend .video {
  width: 40vw;
  height: 40vw;
}
.bet-block .suspend .status {
  position: relative;
  bottom: 5.3333333333vw;
  color: #fff;
  font-size: 4.8vw;
}
.bet-block .suspend.left {
  left: 0;
}
.bet-block .suspend.right {
  right: 0;
}
.ball-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.no-rainy-block {
  position: relative;
}
.no-rainy-block .no-rainy-board {
  position: relative;
  width: calc(100% - 8.5333333333vw);
  margin: 8.5333333333vw 4.2666666667vw 4.2666666667vw;
  padding: 12.8vw 4.2666666667vw 4.2666666667vw;
  background: radial-gradient(
    circle at 1.2% 1.2%,
    #00a7d9,
    #29e5dc 48%,
    #00e9de 81%,
    #00add3 139%,
    #fff 139%
  );
  box-shadow: 0 3.2vw 2.6666666667vw #0000001a;
  clip-path: inset(0 round 5.3333333333vw);
}
.no-rainy-block .no-rainy-board .betting-rules {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: flex-start;
  height: 9.6vw;
  padding: 0 4.2666666667vw;
  background: #363285;
}
.no-rainy-block .no-rainy-board .betting-rules:after {
  content: "";
  display: block;
  position: absolute;
  top: -0.0533333333vw;
  right: -21.0666666667vw;
  width: 100%;
  height: 9.6vw;
  background: #363285;
  mask: url(/images/rain/h5/mask-round.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/mask-round.svg) no-repeat center;
}
.no-rainy-block .no-rainy-board .betting-rules .icon-info {
  width: 4vw;
  height: 4vw;
  margin-right: 2.1333333333vw;
  filter: drop-shadow(0 0.5333333333vw 0.5333333333vw rgba(119, 46, 239, 0.9));
}
.no-rainy-block .no-rainy-board .betting-rules span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18.1333333333vw;
  color: #ffffffb3;
  font-size: 3.2vw;
  line-height: 1.5;
}
.no-rainy-block .no-rainy-board .countdown-timer {
  z-index: 1;
}
.no-rainy-block .no-rainy-board .countdown-timer h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4.2666666667vw;
  color: #fff;
  font-size: 5.3333333333vw;
  font-weight: 700;
  text-transform: uppercase;
}
.no-rainy-block .no-rainy-board .countdown-timer h4 {
  display: inline-block;
  width: 6.9333333333vw;
  margin-right: 1.0666666667vw;
  color: #5867b3;
  font-size: 6.9333333333vw;
  text-align: right;
}
.no-rainy-block .no-rainy-board .countdown-timer span {
  margin-right: 2.1333333333vw;
  color: #fff;
  font-size: 3.2vw;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 0.5333333333vw 1.0666666667vw #17afbb;
}
.no-rainy-block .no-rainy-board .countdown-timer p {
  margin-top: 4.2666666667vw;
  color: #fff;
  font-size: 3.7333333333vw;
}
.no-rainy-block .countdown-day {
  position: absolute;
  z-index: 1;
  top: -4.2666666667vw;
  right: 8.5333333333vw;
}
.no-rainy-block .countdown-day .card-box {
  width: 26.6666666667vw;
  height: 26.6666666667vw;
  -webkit-mask: url(/images/rain/h5/mask-count-card.svg) no-repeat center;
  mask: url(/images/rain/h5/mask-count-card.svg) no-repeat center;
}
.no-rainy-block .countdown-day .card-box .top {
  width: 26.6666666667vw;
  height: 13.3333333333vw;
  border-top-left-radius: 5.3333333333vw;
  border-top-right-radius: 5.3333333333vw;
  background: linear-gradient(180deg, #5972ff, #7900e2);
}
.no-rainy-block .countdown-day .card-box .bottom {
  width: 26.6666666667vw;
  height: 13.3333333333vw;
  border-bottom-left-radius: 5.3333333333vw;
  border-bottom-right-radius: 5.3333333333vw;
  background: linear-gradient(180deg, #813cff, #fdbdc0);
}
.no-rainy-block .countdown-day .rain-info-box {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  flex-direction: column;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0.5333333333vw 1.3333333333vw #8e41e2;
}
.no-rainy-block .countdown-day .rain-info-box h3 {
  margin-bottom: 1.0666666667vw;
  font-size: 13.8666666667vw;
}
.no-rainy-block .countdown-day .rain-info-box span {
  font-size: 3.7333333333vw;
  text-transform: uppercase;
}
.weather-map {
  position: relative;
}
.weather-map:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: -0.2666666667vw;
  width: 100%;
  height: 8vw;
  background: linear-gradient(0deg, transparent 0%, #281a70 100%);
}
.weather-map:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 8vw;
  background: linear-gradient(180deg, transparent 0%, #281a70 100%);
}
.weather-map #windy {
  width: 100%;
  height: 64vw;
}
.weather-map #windy #logo {
  top: -3.2vw;
  left: 10.6666666667vw;
  transform: scale(0.5);
}
.weather-info {
  display: grid;
  grid-gap: 4.2666666667vw;
  grid-template-columns: repeat(2, 1fr);
  margin: 4.2666666667vw;
}
.weather-info li {
  display: grid;
  grid-row-gap: 4.2666666667vw;
  grid-template-columns: auto 4.8vw;
  padding: 4.2666666667vw;
  border-radius: 5.3333333333vw;
}
.weather-info li h3 {
  display: inline-flex;
  align-items: flex-end;
}
.weather-info li h3,
.weather-info li span {
  font-size: 4.8vw;
  font-weight: 700;
}
.weather-info li span {
  margin-left: 1.0666666667vw;
  font-size: 3.7333333333vw;
}
.weather-info li h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-row: 2 / span 1;
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.weather-info li .icon {
  grid-column: 2 / span 1;
  grid-row: 1 / span 2;
  width: 4.8vw;
  height: 4.8vw;
}
.weather-info .temperature .icon {
  background: #ffd259;
  mask: url(/images/rain/h5/icon-temperature.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-temperature.svg) no-repeat center;
}
.weather-info .rainfall .icon {
  background: #00b5ff;
  mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
}
.weather-info .humidity .icon {
  background: #2af1ff;
  mask: url(/images/rain/h5/icon-humidity.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-humidity.svg) no-repeat center;
}
.weather-info .pressure .icon {
  background: #82ff72;
  mask: url(/images/rain/h5/icon-pressure.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-pressure.svg) no-repeat center;
}
.weather-info .wind .icon {
  background: #ff74d2;
  mask: url(/images/rain/h5/icon-winds.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-winds.svg) no-repeat center;
}
.weather-info .wind-direction .icon {
  background: #ff5959;
  mask: url(/images/rain/h5/icon-wind-direction.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-wind-direction.svg) no-repeat center;
}
.rainy-wrap .function-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 6.4vw 0;
}
.rainy-wrap .function-menu li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rainy-wrap .function-menu li .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.0666666667vw;
  height: 17.0666666667vw;
  border-radius: 4.2666666667vw;
}
.rainy-wrap .function-menu li img {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  filter: drop-shadow(0 0.5333333333vw 0.5333333333vw rgba(119, 46, 239, 0.9));
}
.rainy-wrap .function-menu li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 17.0666666667vw;
  margin-top: 1.0666666667vw;
  color: #fff;
  font-size: 3.7333333333vw;
  font-weight: 500;
  line-height: 1.2;
}
.rainy-wrap .odds-history-block {
  display: grid;
  grid-gap: 4.2666666667vw;
  grid-template-columns: 6.5fr 3.5fr;
  margin: 6.4vw 4.2666666667vw;
}
.rainy-wrap .odds-history-block .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 4.2666666667vw;
  font-weight: 700;
}
.rainy-wrap .odds-history-block .title:before {
  content: "";
  display: block;
  width: 1.0666666667vw;
  height: 3.7333333333vw;
  margin-right: 4.2666666667vw;
  border-radius: 0.5333333333vw;
  background: #ffd259;
}
.rainy-wrap .odds-history-block .sub-title {
  opacity: 0.6;
  color: #fff;
  font-size: 3.7333333333vw;
  font-weight: 500;
  line-height: 4.2666666667vw;
  text-align: right;
}
.rainy-wrap .odds-history-block .history-data {
  grid-column: 1 / span 2;
  padding: 4.2666666667vw;
  border-radius: 5.3333333333vw;
}
.rainy-wrap .select-date {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-x: scroll;
}
.rainy-wrap .select-date li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 17.0666666667vw;
  height: 25.6vw;
  margin: 0 1.0666666667vw;
  transition: all 0.3s;
  border-radius: 4.2666666667vw;
}
.rainy-wrap .select-date li h5 {
  z-index: 1;
  padding: 1.0666666667vw;
  font-size: 3.7333333333vw;
  font-weight: 700;
}
.rainy-wrap .select-date li span,
.rainy-wrap .select-date li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  max-width: 17.0666666667vw;
  padding: 1.0666666667vw;
  font-size: 3.2vw;
  font-weight: 500;
}
.rainy-wrap .select-date li .icon {
  z-index: 1;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin: 1.0666666667vw;
}
.rainy-wrap .select-date li .rain {
  background: #00b5ff;
  mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
}
.rainy-wrap .select-date li .no-rain {
  background: #ffd259;
  mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
}
.rainy-wrap .select-odds {
  display: flex;
}
.rainy-wrap .select-odds .odds-box {
  flex: 1 0 0%;
  width: 100%;
  height: 100px;
}
.rainy-wrap .select-odds .odds-box + .odds-box {
  margin-left: 2.1333333333vw;
}
.rainy-wrap .select-odds .odds-box h5 {
  margin-bottom: 2.1333333333vw;
  color: #fff9;
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.rainy-wrap .rain-odds {
  display: flex;
}
.rainy-wrap .rain-odds li {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3.2vw;
  border-radius: 4.2666666667vw;
}
.rainy-wrap .rain-odds li + li {
  margin-left: 2.1333333333vw;
}
.rainy-wrap .rain-odds li .point-style {
  z-index: 1;
  align-self: flex-end;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  border-radius: 50%;
}
.rainy-wrap .rain-odds li .odd {
  z-index: 1;
  padding: 1.0666666667vw 0;
  font-size: 4.2666666667vw;
  font-weight: 700;
}
.rainy-wrap .rain-odds li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  max-width: 12vw;
  font-size: 3.2vw;
}
.rainy-wrap .rain-odds.now .rain .point-style {
  background: #00b5ff;
}
.rainy-wrap .rain-odds.now .rain .odd {
  color: #00b5ff;
}
.rainy-wrap .rain-odds.now .no-rain .point-style {
  background: #ffd259;
}
.rainy-wrap .rain-odds.now .no-rain .odd {
  color: #ffd259;
}
.rainy-wrap .rain-odds.past .rain .point-style {
  background: #40d0cb;
}
.rainy-wrap .rain-odds.past .rain .odd {
  color: #40d0cb;
}
.rainy-wrap .rain-odds.past .no-rain .point-style {
  background: #ffb139;
}
.rainy-wrap .rain-odds.past .no-rain .odd {
  color: #ffb139;
}
.rainy-wrap .history-proportion li .date,
.rainy-wrap .history-proportion li .time {
  display: inline-block;
  color: #fff9;
  font-size: 3.7333333333vw;
}
.rainy-wrap .history-proportion li + li {
  margin-top: 6.4vw;
}
.rainy-wrap .history-proportion li .rain {
  color: #00b5ff;
}
.rainy-wrap .history-proportion li .no-rain {
  color: #ffd259;
}
.rainy-wrap .history-proportion .text-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 2.1333333333vw 0;
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.rainy-wrap .history-proportion .text-wrap h5:last-child {
  text-align: right;
}
.rainy-wrap .history-proportion .text-wrap span {
  padding-left: 2.1333333333vw;
}
.rainy-wrap .history-proportion .text-wrap span:after {
  content: "%";
}
.rainy-wrap .history-proportion .proportion-wrap {
  display: flex;
}
.rainy-wrap .history-proportion .proportion-wrap .line {
  height: 1.0666666667vw;
  border-radius: 0.5333333333vw;
}
.rainy-wrap .history-proportion .proportion-wrap .line + .line {
  margin-left: 1.0666666667vw;
}
.rainy-wrap .history-proportion .proportion-wrap .rain {
  background: #00b5ff;
}
.rainy-wrap .history-proportion .proportion-wrap .no-rain {
  background: #ffd259;
}
.select-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4.2666666667vw;
}
.select-session .rain-select-box {
  display: flex;
  align-items: center;
}
.select-session .rain-select-box .session {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: Jost, sans-serif;
  font-size: 5.3333333333vw;
  font-weight: 700;
}
.select-session .rain-select-box .icon-dropdown {
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  margin-left: 2.1333333333vw;
  background: #fff;
  mask: url(/images/rain/h5/icon-dropdown.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-dropdown.svg) no-repeat center;
}
.select-session .icon-refresh {
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  filter: drop-shadow(0 0.5333333333vw 0.5333333333vw rgba(119, 46, 239, 0.9));
}
.select-session .icon-refresh.active {
  animation: rotate-center 1s ease-in-out both;
}
.state-wrap {
  display: block;
  width: 100%;
  padding: 2.6666666667vw 0;
}
.state-wrap .state-chart {
  display: block;
  width: 100%;
  min-height: 74.6666666667vw;
}
.time-block {
  display: grid;
  grid-template-columns: 21.3333333333vw auto 13.8666666667vw;
  padding: 4.2666666667vw;
}
.time-block h3,
.time-block span {
  display: inline-block;
  color: #fff;
  font-size: 6.4vw;
  font-weight: 700;
}
.time-block span {
  grid-column: 2 / span 1;
}
.time-block h6 {
  grid-column: 1 / span 2;
  margin-top: 2.1333333333vw;
  color: #fff9;
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.time-block .rain-icon-btn {
  grid-column: 3 / span 1;
  grid-row: 1 / span 2;
  width: 13.8666666667vw;
  height: 13.8666666667vw;
}
.time-block .icon-refresh {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  filter: drop-shadow(0 0.5333333333vw 0.5333333333vw rgba(119, 46, 239, 0.9));
}
.time-block .icon-refresh.active {
  animation: rotate-center 1s ease-in-out both;
}
.video-block {
  background: #000;
}
.pipe-block {
  padding: 4.2666666667vw;
}
.pipe-block .select-pipe {
  display: flex;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
}
.pipe-block .select-pipe li {
  padding: 2.1333333333vw 4.2666666667vw;
  color: #fff;
  font-size: 4.2666666667vw;
  font-weight: 500;
}
.pipe-block .select-pipe li.active {
  color: #ffd259;
}
.pipe-block .pipe-content {
  display: flex;
  overflow-x: scroll;
}
.pipe-block .pipe-content .tab-pane {
  display: none;
}
.pipe-block .pipe-content .tab-pane.active,
.pipe-block .pipe-content .tab-pane ol {
  display: flex;
}
.pipe-block .pipe-content .tab-pane li {
  display: flex;
  margin: 1.0666666667vw;
  padding: 4.2666666667vw 6.4vw;
  border-radius: 4.2666666667vw;
  font-size: 3.7333333333vw;
  font-weight: 500;
  white-space: nowrap;
}
.pipe-block .pipe-content .tab-pane li span {
  z-index: 1;
}
.streaming-bet .bet-board {
  grid-template-columns: 1fr 1fr;
}
.streaming-bet .bet-board .odds {
  grid-column: 1 / span 1;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  margin-left: 4.2666666667vw;
}
.streaming-bet .bet-board .odds .value {
  font-size: 6.9333333333vw;
}
.streaming-bet .bet-board .odds span {
  margin: 1.0666666667vw 0 0;
}
.streaming-bet .bet-board .rain-ani {
  grid-column: 2 / span 1;
  width: 14.9333333333vw;
  height: 14.9333333333vw;
  margin-top: 12.8vw;
  margin-left: 3.2vw;
}
.streaming-bet .bet-board .rain-ani video {
  width: 14.9333333333vw;
  height: 14.9333333333vw;
}
.streaming-bet .proportion {
  display: flex;
  position: relative;
  align-items: center;
  padding-right: 4.2666666667vw;
  color: #fff;
  font-size: 3.7333333333vw;
  font-weight: 500;
  justify-self: flex-end;
}
.streaming-bet .proportion:before {
  content: "";
  display: block;
  width: 4vw;
  height: 4vw;
  margin-right: 1.0666666667vw;
  background: #fff;
  mask: url(/images/rain/h5/icon-people.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-people.svg) no-repeat center;
}
.streaming-bet .proportion:after {
  content: "%";
  display: block;
}
.record-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rain-betting-record {
  padding: 4.2666666667vw 4.2666666667vw 10.6666666667vw;
}
.rain-betting-record li {
  display: grid;
  grid-column-gap: 1.0666666667vw;
  grid-row-gap: 2.1333333333vw;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  padding: 4.2666666667vw 0;
  border-bottom: 0.2666666667vw solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 3.7333333333vw;
}
.rain-betting-record li .betting {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 19.2vw;
  font-size: 4.2666666667vw;
  font-weight: 500;
}
.rain-betting-record li .session {
  grid-column: 2 / span 4;
  font-weight: 500;
}
.rain-betting-record li .date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-row: 2 / span 1;
  max-width: 19.2vw;
  opacity: 0.7;
}
.rain-betting-record li .time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-row: 3 / span 1;
  max-width: 19.2vw;
  opacity: 0.7;
}
.rain-betting-record li .stake,
.rain-betting-record li .odds,
.rain-betting-record li .rain,
.rain-betting-record li .no-rain {
  overflow: hidden;
}
.rain-betting-record li .rain:before {
  content: "";
  display: inline-block;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin-right: 1.0666666667vw;
  border-radius: 50%;
  background: #00b5ff;
}
.rain-betting-record li .no-rain:before {
  content: "";
  display: inline-block;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin-right: 1.0666666667vw;
  border-radius: 50%;
  background: #ffd259;
}
.rain-betting-record li .rain-val.positive,
.rain-betting-record li .no-rain-val.positive {
  color: #02ff91;
}
.rain-betting-record li .rain-val.negative,
.rain-betting-record li .no-rain-val.negative {
  color: #ff5959;
}
.total-wrap {
  position: fixed;
  z-index: 1;
  bottom: -18.1333333333vw;
  width: 100%;
  transition: bottom 0.3s;
  color: #fff;
  font-family: Jost, sans-serif;
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.total-wrap .go-to-top {
  position: absolute;
  bottom: 21.3333333333vw;
}
.total-wrap .top {
  width: 26.6666666667vw;
  height: 10.6666666667vw;
  padding: 0 4.2666666667vw;
  background: url(/images/rain/h5/shape-total-top.png) no-repeat center/110%;
  line-height: 10.6666666667vw;
}
.total-wrap .top .icon-arrow {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10.6666666667vw;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  transform: rotate(90deg);
  transition: transform 0.3s;
  background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/15%;
}
.total-wrap .total-info {
  display: grid;
  position: relative;
  top: -0.2666666667vw;
  grid-row-gap: 2.1333333333vw;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  padding: 4.2666666667vw;
  border-top-right-radius: 5.3333333333vw;
  background: linear-gradient(180deg, #4073e4, #464aaf 15%, #322d80 40% 100%);
}
.total-wrap .total-info .total-rain:before {
  content: "";
  display: inline-block;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin-right: 1.0666666667vw;
  border-radius: 50%;
  background: #00b5ff;
}
.total-wrap .total-info .total-no-rain:before {
  content: "";
  display: inline-block;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin-right: 1.0666666667vw;
  border-radius: 50%;
  background: #ffd259;
}
.total-wrap .total-info .total-rain-val.positive,
.total-wrap .total-info .total-no-rain-val.positive,
.total-wrap .total-info .total-exposure-val.positive {
  color: #02ff91;
}
.total-wrap .total-info .total-rain-val.negative,
.total-wrap .total-info .total-no-rain-val.negative,
.total-wrap .total-info .total-exposure-val.negative {
  color: #ff5959;
}
.total-wrap .total-info .total-exposure,
.total-wrap .total-info .total-exposure-val {
  color: #ffd259;
}
.total-wrap.active {
  bottom: 0;
}
.total-wrap.active .top .icon-arrow {
  transform: rotate(-90deg);
}
.record-no-block {
  margin-top: 25.6vw;
  padding: 0 4.2666666667vw 4.2666666667vw;
}
.record-no-block video {
  width: 100%;
}
.record-no-block h3 {
  margin: 8.5333333333vw 0;
  color: #fff;
  font-size: 5.3333333333vw;
  font-weight: 700;
  text-align: center;
}
.record-no-block .rain-btn {
  margin-top: 17.0666666667vw;
}
.rule-wrap {
  padding: 4.2666666667vw;
  color: #fff;
  font-family: Jost, sans-serif;
}
.rule-wrap .ball-box i {
  width: 53.3333333333vw;
  height: 53.3333333333vw;
  background: linear-gradient(90deg, #fff0, #ffffff0d 100%, #fff);
}
.rule-wrap video {
  width: 100%;
}
.rule-wrap .tips {
  font-size: 4vw;
  line-height: 1.5;
}
.rule-wrap .rain-timetable {
  display: grid;
  grid-gap: 2.1333333333vw;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: repeat(4, 14.9333333333vw);
  margin: 6.4vw 0;
}
.rule-wrap .rain-timetable .title {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5.3333333333vw 0 0 5.3333333333vw;
  background: radial-gradient(
    circle at 1.2% 1.2%,
    #00ecff,
    #6230d5 50%,
    #4e5cff 81%,
    #00bbe6 140%,
    #fff 140%
  );
  box-shadow: 0 3.2vw 2.6666666667vw #281a7021,
    inset 0 0.2666666667vw 0.8vw #ffffff80;
}
.rule-wrap .rain-timetable .detail {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2666666667vw solid rgba(255, 255, 255, 0.1);
  border-radius: 0 5.3333333333vw 5.3333333333vw 0;
  opacity: 0.7;
  background: #ffffff0d;
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
}
.rule-wrap h3 {
  margin: 6.4vw 0;
  font-size: 5.3333333333vw;
  font-weight: 700;
}
.go-to-top {
  position: fixed;
  z-index: 1;
  right: 4.2666666667vw;
  bottom: 4.2666666667vw;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  transition: opacity 0.5s;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    circle at 1.2% 1.2%,
    #00ecff,
    #6230d5 50%,
    #4e5cff 80%,
    #00bbe6 140%,
    #fff 140%
  );
  box-shadow: 0 3.2vw 2.6666666667vw #281a7021,
    inset 0 0.2666666667vw 0.8vw #ffffff80;
}
.go-to-top .icon-arrow {
  position: absolute;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  transform: rotate(90deg);
  background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/20%;
}
.go-to-top.is-visible {
  opacity: 1;
}
.rain-bet-wrap {
  position: relative;
}
.rain-bet-wrap .rain-bet-block {
  position: relative;
  bottom: 0;
  width: 100%;
  padding-top: 13.3333333333vw;
}
.rain-bet-wrap .rain-bet-box {
  position: relative;
  left: 50%;
  width: calc(100% - 8.5333333333vw);
  overflow: hidden;
  transform: translate(-50%);
}
.rain-bet-wrap .bet-tab {
  display: flex;
}
.rain-bet-wrap .bet-tab li {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 2.1333333333vw 0;
  color: #fff;
  font-size: 5.3333333333vw;
  font-weight: 700;
  pointer-events: auto;
}
.rain-bet-wrap .bet-tab li h4 {
  margin-left: 3.2vw;
  pointer-events: none;
}
.rain-bet-wrap .bet-tab li .icon {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin: 1.0666666667vw 2.1333333333vw;
  pointer-events: none;
}
.rain-bet-wrap .bet-tab li .rain {
  background: #00b5ff;
  mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
}
.rain-bet-wrap .bet-tab li .no-rain {
  background: #ffd259;
  mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
}
.rain-bet-wrap .tab-border {
  position: absolute;
  width: 50%;
  height: 11.7333333333vw;
  transform: translate(var(--date-tab-translateX));
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: #6131d6;
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
}
.rain-bet-wrap .tab-border:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: -5.0666666667vw;
  width: 5.3333333333vw;
  height: 5.8666666667vw;
  transform: rotateY(180deg);
  background: url(/images/rain/h5/tab-rain-radius.png) no-repeat center/110%;
}
.rain-bet-wrap .tab-border:after {
  content: "";
  display: block;
  position: absolute;
  right: -5.0666666667vw;
  bottom: 0;
  width: 5.3333333333vw;
  height: 5.8666666667vw;
  background: url(/images/rain/h5/tab-rain-radius.png) no-repeat center/110%;
}
.rain-bet-wrap .tab-border.active {
  background: #ff479e;
}
.rain-bet-wrap .tab-border.active:before {
  background: url(/images/rain/h5/tab-no-rain-radius.png) no-repeat center/110%;
}
.rain-bet-wrap .tab-border.active:after {
  background: url(/images/rain/h5/tab-no-rain-radius.png) no-repeat center/110%;
}
.rain-bet-wrap .bet-content {
  border-bottom-left-radius: 5.3333333333vw;
  border-bottom-right-radius: 5.3333333333vw;
  background: linear-gradient(180deg, #6230d5, #4e5cff 25%, #00bbe6 100%, #fff);
}
.rain-bet-wrap .bet-content .tab-pane {
  display: none;
}
.rain-bet-wrap .bet-content .tab-pane.active {
  display: block;
}
.rain-bet-wrap .bet-content.active {
  background: linear-gradient(
    180deg,
    #ff479f,
    #fe7777 40%,
    #ff9467 60%,
    #ffc638 100%,
    #fff
  );
}
.rain-bet-wrap .bet-content .tab-pane:first-of-type .tips-box {
  background: #3c369966;
}
.rain-bet-wrap .bet-content .tab-pane:last-of-type .tips-box {
  background: #e6494e66;
}
.rain-bet-wrap .select-session {
  width: 100%;
  margin: 0;
  padding: 4.2666666667vw;
}
.rain-bet-wrap .select-session .count-down-timer {
  display: flex;
  align-items: center;
  width: 34.6666666667vw;
  padding: 2.1333333333vw 4.2666666667vw;
  border-radius: 5.3333333333vw;
  background: #ffffff26;
  color: #fff;
  font-size: 3.7333333333vw;
  font-weight: 900;
}
.rain-bet-wrap .select-session .count-down-timer .icon-hourglass {
  width: 4vw;
  height: 4vw;
  margin-right: 2.1333333333vw;
  animation: flip 8s ease infinite;
  background: #fff;
  -webkit-mask: url(/images/rain/h5/icon-hourglass.svg) no-repeat center;
  mask: url(/images/rain/h5/icon-hourglass.svg) no-repeat center;
}
.rain-bet-wrap .select-session .count-down-timer h4 {
  width: 3.7333333333vw;
  text-align: right;
}
.rain-bet-wrap .select-session .count-down-timer span {
  margin: 0 1.0666666667vw;
}
.rain-bet-wrap .select-session .count-down-timer.alert .icon-hourglass {
  background: #ff5959;
}
.rain-bet-wrap .select-session .count-down-timer.alert h4,
.rain-bet-wrap .select-session .count-down-timer.alert span {
  color: #ff5959;
}
.rain-bet-wrap .betting-input {
  display: flex;
  align-items: center;
  padding: 0 4.2666666667vw;
}
.rain-bet-wrap .betting-input input {
  width: 100%;
  height: 13.3333333333vw;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 10.6666666667vw;
  font-weight: 700;
  text-align: right;
}
.rain-bet-wrap .betting-input input::placeholder {
  color: #ffffff4d;
}
.rain-bet-wrap .betting-input input.danger {
  color: #ff5959;
}
.rain-bet-wrap .betting-input input.ani {
  animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.rain-bet-wrap .tips-box {
  display: flex;
  justify-content: space-between;
  padding: 3.2vw 4.2666666667vw;
  border-radius: 0 0 5.3333333333vw 5.3333333333vw;
}
.rain-bet-wrap .tips-box .tips {
  opacity: 0.6;
  color: #fff;
  font-size: 3.4666666667vw;
}
.rain-bet-wrap .tips-box .alert {
  display: none;
  color: #fff;
}
.rain-bet-wrap .tips-box .odds {
  color: #ffd259;
  font-size: 4vw;
  font-weight: 500;
}
.rain-bet-wrap .tips-box.danger {
  background: #ff5959 !important;
}
.rain-bet-wrap .rain-calc {
  margin: 4.2666666667vw;
}
.rain-bet-wrap .quick-number {
  display: grid;
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(5, 1fr);
  margin: 3.2vw 0;
}
.rain-bet-wrap .quick-number li {
  padding: 4.2666666667vw 0;
  border-radius: 4.2666666667vw;
  color: #fff;
  font-size: 5.3333333333vw;
  font-weight: 700;
  text-align: center;
  touch-action: manipulation;
}
.rain-bet-wrap .number-keyboard {
  display: grid;
  grid-gap: 3.2vw;
  grid-template-columns: repeat(3, 1fr);
  margin: 3.2vw 0;
}
.rain-bet-wrap .number-keyboard li {
  position: relative;
  padding: 3.2vw 0;
  border-radius: 4.2666666667vw;
  color: #fff;
  font-size: 8vw;
  font-weight: 700;
  text-align: center;
  touch-action: manipulation;
}
.rain-bet-wrap .number-keyboard li.active:after {
  content: attr(data-num);
  display: flex;
  position: absolute;
  z-index: 1;
  top: -19.2vw;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24vw;
  font-size: 11.2vw;
  pointer-events: none;
  -webkit-mask: url(/images/rain/h5/shape-keyboard.svg) no-repeat center/100%;
  mask: url(/images/rain/h5/shape-keyboard.svg) no-repeat center/100%;
}
.rain-bet-wrap .number-keyboard .back {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rain-bet-wrap .number-keyboard .back img {
  width: 10.6666666667vw;
}
@keyframes move-ball {
  to {
    transform: translateZ(0.2666666667vw) rotate(360deg);
  }
}
@keyframes circle-chart {
  to {
    stroke-dasharray: 0 377;
  }
}
@keyframes shake-horizontal {
  0%,
  to {
    transform: translate(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translate(-8px);
  }
  20%,
  40%,
  60% {
    transform: translate(8px);
  }
  80% {
    transform: translate(6px);
  }
  90% {
    transform: translate(-6px);
  }
}
@keyframes flip {
  0%,
  95% {
    transform: rotate(0);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes keyboard {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.pop-rain {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}
.pop-rain.active {
  display: block;
}
.blur-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: #393485cc;
  -webkit-backdrop-filter: blur(1.0666666667vw);
  backdrop-filter: blur(1.0666666667vw);
}
.normal-bg,
.pop-setting-amounts .default-amounts li {
  border: 0.2666666667vw solid rgba(255, 255, 255, 0.02);
  background: #363285cc;
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
  color: #fff;
}
.active-with-bg,
.pop-setting-amounts .setting-box .default-amounts li.active {
  position: relative;
  background: linear-gradient(60deg, #6d25f4, #ff9fa2);
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
}
.active-with-bg:after,
.pop-setting-amounts .setting-box .default-amounts li.active:after {
  content: "";
  position: absolute;
  top: 0.1333333333vw;
  left: 0.1333333333vw;
  width: calc(100% - 0.2666666667vw);
  height: calc(100% - 0.2666666667vw);
  border-radius: 4vw;
  background: linear-gradient(0deg, #452da4, #71528c);
  background-size: 300% 300%;
}
.active-with-check,
.pop-setting-amounts .default-box .default-amounts li.active {
  position: relative;
  background: linear-gradient(45deg, #ff9fa2, #6d25f4);
  box-shadow: inset 0 0.2666666667vw 0.5333333333vw #ffffff1a;
}
.active-with-check:before,
.pop-setting-amounts .default-box .default-amounts li.active:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -0.2666666667vw;
  bottom: -0.2666666667vw;
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  border-bottom-right-radius: 4.2666666667vw;
  background: url(/images/rain/h5/check.svg) no-repeat center;
}
.active-with-check:after,
.pop-setting-amounts .default-box .default-amounts li.active:after {
  content: "";
  position: absolute;
  top: 0.1333333333vw;
  left: 0.1333333333vw;
  width: calc(100% - 0.2666666667vw);
  height: calc(100% - 0.2666666667vw);
  border-radius: 4vw;
  background: #343084;
}
.pop-picker {
  position: fixed;
  z-index: 9000;
  bottom: -150%;
  width: 100%;
  height: 74.6666666667vw;
  padding: 6.4vw;
  transition: bottom 0.3s;
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: #39348580;
  box-shadow: 0 2.6666666667vw 2.6666666667vw #281a70;
  color: #fff;
  font-family: Jost, sans-serif;
}
.pop-picker .select-wrap {
  position: relative;
  height: 32vw;
  margin: 4.2666666667vw 0;
  overflow: hidden;
  text-align: center;
}
.pop-picker .select-wrap .title {
  font-size: 4.2666666667vw;
  font-weight: 500;
}
.pop-picker .select-wrap ul {
  height: 32vw;
  transition: 0.3s;
}
.pop-picker .select-wrap ul li {
  transform: scale(0.85);
  transition: 0.3s;
  opacity: 0.3;
  font-size: 6.4vw;
  line-height: 10.6666666667vw;
}
.pop-picker .select-wrap ul li.active {
  transform: scale(1);
  border-radius: 2.6666666667vw;
  opacity: 1;
  background: #ffffff1a;
}
.pop-picker.active {
  bottom: 0;
}
.pop-terms {
  display: none;
  z-index: 99;
  width: 90%;
  height: 138.6666666667vw;
  padding: 4.2666666667vw;
  overflow: hidden;
  border-radius: 5.3333333333vw;
  background: #281a70;
  background-image: radial-gradient(
    circle at 1.2% 1.2%,
    #00ecff4d,
    #6230d54d 49%,
    #4e5cff4d 83%,
    #00bbe64d 142%,
    #ffffff4d 142%
  );
  font-family: Jost, sans-serif;
}
.pop-terms .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  margin: 4.2666666667vw 0;
  color: #fff;
  font-size: 4.2666666667vw;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0.5333333333vw 1.0666666667vw rgba(131, 76, 0, 0.2);
}
.pop-terms .terms-wrap {
  height: 60%;
  margin-bottom: 8.5333333333vw;
  overflow-y: scroll;
}
.pop-terms .terms-wrap p {
  opacity: 0.7;
  color: #fff;
}
.pop-terms .terms-wrap p + p {
  margin-top: 4.2666666667vw;
}
.pop-terms .rain-terms {
  position: relative;
  padding-left: 8.5333333333vw;
  list-style-type: decimal-leading-zero;
}
.pop-terms .rain-terms li {
  opacity: 0.7;
  color: #fff;
  line-height: 1.2;
}
.pop-terms .rain-terms li + li {
  margin-top: 4.2666666667vw;
}
.pop-terms ol {
  margin-top: 4.2666666667vw;
  padding-left: 4.2666666667vw;
  list-style-type: decimal;
}
.pop-setting-amounts {
  position: fixed;
  z-index: 9000;
  bottom: -150%;
  width: 100%;
  height: auto;
  transition: bottom 0.3s;
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: #39348580;
  box-shadow: 0 2.6666666667vw 2.6666666667vw #281a70;
  color: #fff;
  font-family: Jost, sans-serif;
}
.pop-setting-amounts .rain-pop-wrap {
  display: flex;
  flex-direction: row;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.5s;
}
.pop-setting-amounts .rain-pop-wrap .rain-pop-inner {
  display: flex;
  transform: translate(0);
  transition: all 0.5s;
}
.pop-setting-amounts .rain-pop-wrap .rain-pop-inner .inner-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw;
  padding: 6.4vw;
  overflow: hidden;
}
.pop-setting-amounts .rain-pop-wrap .rain-pop-inner.inner-right {
  transform: translate(-50%);
}
.pop-setting-amounts .default-box .title-box {
  display: flex;
  justify-content: space-between;
}
.pop-setting-amounts .default-box .tips {
  display: none;
  margin-bottom: 4.2666666667vw;
  color: #ff5959;
  font-size: 4.2666666667vw;
}
.pop-setting-amounts .default-box .default-amounts li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 17.0666666667vw;
}
.pop-setting-amounts .setting-box .title-box {
  display: flex;
  justify-content: flex-start;
}
.pop-setting-amounts .setting-box .title-box .icon-back {
  width: 4vw;
  height: 4vw;
  margin-right: 4.2666666667vw;
  background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/60%;
}
.pop-setting-amounts .setting-box .amount-input {
  display: flex;
  align-items: center;
  margin: 3.2vw 0;
}
.pop-setting-amounts .setting-box .amount-input input {
  width: 100%;
  height: 13.3333333333vw;
  border: 0;
  background: transparent;
  color: #ffd259;
  font-size: 10.6666666667vw;
  font-weight: 700;
  text-align: right;
}
.pop-setting-amounts .setting-box .amount-input input::placeholder {
  color: #ffffff4d;
}
.pop-setting-amounts .setting-box .amount-input input.danger {
  color: #ff5959;
}
.pop-setting-amounts .setting-box .amount-input input.ani {
  animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.pop-setting-amounts .setting-box .tips {
  margin-bottom: 4.2666666667vw;
  opacity: 0.5;
  color: #fff;
  font-size: 4.2666666667vw;
}
.pop-setting-amounts .setting-box .alert {
  display: none;
  margin-bottom: 4.2666666667vw;
  color: #ff5959;
}
.pop-setting-amounts .default-amounts {
  display: grid;
  grid-gap: 2.1333333333vw;
  grid-template-columns: repeat(4, 1fr);
  margin: 4.2666666667vw 0;
}
.pop-setting-amounts .default-amounts li {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 22.4vw;
  height: 16vw;
  border-radius: 4.2666666667vw;
  color: #fff;
  font-size: 5.3333333333vw;
  font-weight: 700;
}
.pop-setting-amounts .default-amounts li span {
  z-index: 1;
}
.pop-setting-amounts .default-amounts li.danger {
  position: relative;
  background: #ff5959;
}
.pop-setting-amounts .default-amounts li.danger:after {
  content: "";
  position: absolute;
  top: 0.1333333333vw;
  left: 0.1333333333vw;
  width: calc(100% - 0.2666666667vw);
  height: calc(100% - 0.2666666667vw);
  border-radius: 4vw;
  background: #343084;
}
.pop-setting-amounts.active {
  bottom: 0;
}
.pop-alert-processing,
.pop-alert-success,
.pop-alert-fail {
  display: grid;
  position: absolute;
  z-index: 99;
  grid-row-gap: 2.1333333333vw;
  grid-template-columns: 1fr repeat(3, 1.5fr);
  align-items: center;
  width: calc(100% - 8.5333333333vw);
  height: 17.0666666667vw;
  margin: 4.2666666667vw;
  padding-right: 4.2666666667vw;
  transform: translateY(-26.6666666667vw);
  border-radius: 4.2666666667vw;
  background: #393485e6;
  box-shadow: 0 2.6666666667vw 2.6666666667vw #281a7099;
  color: #fff;
  font-family: Jost, sans-serif;
}
.pop-alert-processing .rain-ani,
.pop-alert-success .rain-ani,
.pop-alert-fail .rain-ani {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
  width: 17.0666666667vw;
  height: 17.0666666667vw;
}
.pop-alert-processing .rain-ani video,
.pop-alert-success .rain-ani video,
.pop-alert-fail .rain-ani video {
  width: 100%;
}
.pop-alert-processing .status,
.pop-alert-success .status,
.pop-alert-fail .status {
  grid-column: 2 / span 3;
  grid-row: 1 / span 1;
  align-self: flex-end;
  font-size: 4.2666666667vw;
  font-weight: 700;
}
.pop-alert-processing .icon,
.pop-alert-success .icon,
.pop-alert-fail .icon {
  display: flex;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  align-self: flex-start;
  opacity: 0.7;
}
.pop-alert-processing .icon .rain,
.pop-alert-success .icon .rain,
.pop-alert-fail .icon .rain {
  width: 4vw;
  height: 4vw;
  margin-right: 1.0666666667vw;
  background: #00b5ff;
  mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
}
.pop-alert-processing .icon .no-rain,
.pop-alert-success .icon .no-rain,
.pop-alert-fail .icon .no-rain {
  width: 4vw;
  height: 4vw;
  margin-right: 1.0666666667vw;
  background: #ffd259;
  mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
  -webkit-mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
}
.pop-alert-processing .icon + .stake,
.pop-alert-success .icon + .stake,
.pop-alert-fail .icon + .stake {
  padding-left: 2.1333333333vw;
  border-left: 0.2666666667vw solid #ffffff;
}
.pop-alert-processing .stake,
.pop-alert-success .stake,
.pop-alert-fail .stake {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
  align-self: flex-start;
  opacity: 0.7;
}
.pop-alert-processing .stake + .odds,
.pop-alert-success .stake + .odds,
.pop-alert-fail .stake + .odds {
  padding-left: 2.1333333333vw;
  border-left: 0.2666666667vw solid #ffffff;
}
.pop-alert-processing .odds,
.pop-alert-success .odds,
.pop-alert-fail .odds {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
  align-self: flex-start;
  opacity: 0.7;
}
.pop-alert-processing span,
.pop-alert-success span,
.pop-alert-fail span {
  font-weight: 500;
}
.pop-alert-processing.show,
.pop-alert-success.show,
.pop-alert-fail.show {
  animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.pop-alert-processing.hide,
.pop-alert-success.hide,
.pop-alert-fail.hide {
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-top {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-26.6666666667vw);
  }
}
@keyframes slide-bottom {
  0% {
    transform: translateY(-26.6666666667vw);
  }
  to {
    transform: translateY(0);
  }
}
.launch-game-content {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background 0.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.3333333333vw;
  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.6666666667vw;
  height: 14.6666666667vw;
  padding: 1.0666666667vw;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background-image: var(--launch-linear-bg);
  box-shadow: 0.5333333333vw 2.1333333333vw 3.7333333333vw #0003,
    0 0.5333333333vw 1.0666666667vw #000, 0 0.2666666667vw 8vw #7f7f7f,
    inset 0 0.5333333333vw 1.0666666667vw #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.3333333333vw;
  height: 21.3333333333vw;
  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: 0.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.3333333333vw;
  height: 5.3333333333vw;
  margin: 0 2.1333333333vw;
  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.2666666667vw;
  height: 8.2666666667vw;
  opacity: 0.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.3333333333vw;
  height: 100%;
  padding-left: 4.8vw;
  transform: skew(-10deg);
  border-left: 0.5333333333vw 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: 0.8vw;
  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.3333333333vw;
  height: 5.3333333333vw;
  opacity: 0.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.8666666667vw;
  height: 6.6666666667vw;
  margin: 0 2.1333333333vw;
  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 0.5333333333vw 1.0666666667vw 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(0.075, 0.82, 0.165, 1);
}
.tab.search-tab {
  z-index: 2;
}
.language-select-area .language-area {
  margin: 0 0.8vw;
}
.player-vip-detailed-box .section-wrap {
  display: block;
  height: 100%;
  transition: all 0.3s ease;
  width: 100%;
}
.footer {
  transition: 0.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: 24vw;
}
.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:has(.toolbar) .popup-page {
  height: calc(100% - 13.3333333333vw);
}
html.is-mobile:has(.toolbar) .popup-page .popup-page__backdrop {
  height: calc(100% - 13.3333333333vw);
}
.carousel-wrap {
  display: block;
  position: relative;
  width: auto;
  overflow: hidden;
  max-width: 100vw;
  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.4vw 2.4vw 7.2vw;
  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.3333333333vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
  transform-origin: center;
  transition: all 0.3s;
}
.carousel-wrap.siblings .item {
  padding: 1.3333333333vw 1.3333333333vw 3.4666666667vw;
}
.carousel-wrap.siblings .item .item-pic {
  border-radius: 1.3333333333vw;
}
.carousel-wrap.siblings .item .item-pic.focus {
  box-shadow: 0 0.5333333333vw 3.2vw #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.2vw;
  left: 0;
  z-index: 1;
}
.dot-group.style-dot li {
  display: block;
  margin-right: 1.0666666667vw;
  margin-left: 1.0666666667vw;
  width: 2.1333333333vw;
  height: 2.1333333333vw;
  background: var(--event-slick-dot);
  border-radius: 50%;
  transition: 0.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.8666666667vw 0 0.8vw;
}
.dot-group.style-bar li {
  display: block;
  margin: 0 0.8vw;
  width: 5.3333333333vw;
  height: 0.5333333333vw;
  background: #ffffff80;
  border-radius: 1.3333333333vw;
  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 0.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: 0.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 0.3s ease-in-out;
}
.nav-wrap .nav-content-wrap .content-box {
  display: block;
  position: relative;
  width: 100%;
  flex-shrink: 0;
  min-height: 61.3333333333vw;
  max-height: 10000px;
  transition: all 0.5s ease-in-out;
}
.nav .btn.selected {
  background-color: #222;
  border-radius: 1.3333333333vw;
}
.nav .btn.selected p {
  color: #fff;
}
.nav .btn.selected:before {
  box-shadow: 0 0.5333333333vw 1.3333333333vw #0000004d;
}
.nav .btn.selected:after {
  display: block;
}
.nav.nav-auto {
  display: flex;
  overflow: auto;
}
.nav.nav-auto .btn {
  width: auto;
  min-width: 21.3333333333vw;
}
.layout-brand {
  padding: 0 2.1333333333vw;
}
.loading .nav-category {
  height: 18.1333333333vw;
}
.loading .nav-category.active {
  height: auto;
}
.loading .announcement-row {
  height: 8vw;
}
.loading .nav-wrap {
  min-height: 132vw;
}
.loading mcd-marquee {
  display: block;
  height: 8.8vw;
}
.loading mcd-scroll-banner {
  display: block;
  height: 56.5333333333vw;
  width: auto;
}
.loading mcd-feature-games {
  display: block;
  height: 53.3333333333vw;
  width: auto;
}
.loading mcd-icon-marquee {
  display: block;
  height: 25.8666666667vw;
  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.3333333333vw;
  background-color: unset;
  background: var(--date-picker-calendar-bg);
  box-shadow: 0 4.2666666667vw 2.1333333333vw var(--date-picker-calendar-shadow),
    inset 0 0.2666666667vw 0.5333333333vw
      var(--date-picker-calendar-shadow-inset);
  border: 0.2666666667vw 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 0.2666666667vw 0.5333333333vw
      var(--date-picker-calendar-selected-shadow),
    inset 0 0 0.8vw 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 0.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.3333333333vw;
  overflow: hidden;
  position: absolute;
  background-color: var(--content-bg);
  width: 100vw;
  z-index: 2;
}
.dialog-wrap .dialog-wrap-inner:host-context(html.is-desktop) {
  height: calc(100% - 53.3333333333vw);
  margin: auto;
  inset: 0;
}
.dialog-wrap .close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  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.3333333333vw;
  height: 0.5333333333vw;
  margin: -0.2666666667vw 0 0 -2.6666666667vw;
  border-radius: 0.5333333333vw;
  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.3333333333vw;
  overflow: hidden;
  transition: all 0.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.8vw;
  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: 100vw;
  max-height: 700px;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
@supports (height: 100dvh) {
  .dialog-overlay-desktop {
    height: calc(100dvh - 16vw);
  }
}
@supports not (height: 100dvh) {
  .dialog-overlay-desktop {
    height: calc(100vh - 16vw);
  }
}
.dialog-overlay-desktop .popup {
  position: absolute;
  top: 50%;
  right: 50%;
  max-height: 100%;
  border-radius: 2.6666666667vw;
  transform: translate(50%, -50%);
  width: 100vw;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .dialog-overlay-desktop .popup {
    height: calc(100dvh - 16vw);
  }
}
@supports not (height: 100dvh) {
  .dialog-overlay-desktop .popup {
    height: calc(100vh - 16vw);
  }
}
.back-bar {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.3333333333vw;
  overflow: hidden;
  transition: all 0.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.2666666667vw;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.back-bar__arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  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: 8vw;
}
.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.4666666667vw;
}
.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.3333333333vw;
}
.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.3333333333vw;
  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: 12vw;
}
.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.3333333333vw;
  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);
}
header .logo {
  width: 25.6vw;
  height: 13.3333333333vw;
}
header.cricket,
header.member,
header.normal,
header.player {
  box-shadow: 0 0.5333333333vw 0.5333333333vw
    color-mix(in srgb, var(--offset-shadow), transparent 95%);
}
header.cricket .logo {
  left: 14.6666666667vw;
}
header .header-right-btn-group {
  width: 53.3333333333vw;
}
header .header-right-btn-group .header-right-link {
  width: 17.3333333333vw;
  height: 6.4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
header .header-right-btn-group .header-right-link:nth-child(2) {
  margin-left: 0.5rem;
}
header .header-right-btn-group .language-select img {
  width: 6.4vw;
  height: 6.4vw;
}
.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.5333333333vw;
  height: 8.5333333333vw;
  margin-left: 0.8rem;
  border-radius: 5px;
  box-shadow: 0 0 4px #ffffff80;
  opacity: 0.801223;
  background-image: linear-gradient(90deg, #0b2966, #030f26 100%, #030e23);
}
.menu-btn ul {
  width: 8.5333333333vw;
  height: 8.5333333333vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.menu-btn ul li {
  width: 5.3333333333vw;
  margin: 0.5333333333vw 0;
}
.menu-btn ul li:nth-child(2) {
  width: 3.7333333333vw;
}
.logo-box {
  width: 40vw;
}
.nav-category .slick-current:before {
  background-color: transparent;
  box-shadow: none;
}
.site-top .site-menu.no-deposit .f-logo-bg {
  width: 21.3333333333vw;
}
.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.1333333333vw;
}
.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.3333333333vw;
}
.footer .footer-top .sponsor {
  flex: 1 0 100%;
  width: 100%;
}
.footer .footer-top .sponsor ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.footer .footer-top .sponsor ul li {
  display: grid;
  grid-template-columns: 13.3333333333vw 1fr;
  grid-column-gap: 2.1333333333vw;
  margin: 0;
  font-size: 3.2vw;
}
.footer .footer-top .sponsor ul li p {
  font-weight: 700;
}
.footer .footer-top .sponsor ul li strong {
  font-size: 2.9333333333vw;
  font-style: italic;
}
.footer .footer-top .sponsor ul li img {
  height: 12vw;
  grid-row: 1 / span 3;
}
.footer .footer-top .ambassadors {
  flex: 1 0 49.5%;
  width: 100%;
}
.footer .footer-top .ambassadors ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.footer .footer-top .ambassadors ul li {
  font-size: 3.2vw;
}
.footer .footer-top .ambassadors ul li img {
  width: auto;
  height: 11.4666666667vw;
}
.footer .footer-top .ambassadors ul li p {
  font-weight: 700;
}
.footer .footer-top .ambassadors ul li strong {
  font-size: 2.9333333333vw;
  font-style: italic;
}
.footer .footer-top .ambassadors ul li span {
  display: block;
}
.footer .footer-top .official-partner {
  flex: 1 0 49.5%;
}
.footer .footer-top .official-partner ul li {
  color: var(--footer-top-txt, #ffffff);
  font-size: 3.2vw;
  margin: 0;
}
.footer .footer-top .official-partner ul li img {
  height: 8.5333333333vw;
}
.float-banner .close {
  background-color: #fff;
}
.searchpage-main .check-group {
  padding: 2.1333333333vw;
}
.searchpage-main .check-group:nth-child(1) {
  border-radius: 1.3333333333vw 1.3333333333vw 0 0;
}
.searchpage-main .check-group:nth-child(2) {
  border-radius: 0;
}
.searchpage-main .check-group:last-child {
  border-radius: 0 0 1.3333333333vw 1.3333333333vw;
}
.pop-transaction-records-details {
  background: transparent;
}
.recommend-friends-list .prompt {
  color: var(--recommend-friends-prompt-txt, #ffffff);
}
.main-wallet-wrapper {
  padding: 4vw 2.6666666667vw 0px;
  background-color: var(--main-wallet-wrapper-bg, #0e2749);
}
.nextevent .title:before {
  margin-right: 2.1333333333vw;
}
.main-wrapper {
  background: var(--main-wrapper-bg, #0e2749);
  padding-bottom: 2.6666666667vw;
}
.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.3333333333vw;
}
body.MP-theme-default {
  --color-secondary: #054ea1;
  --color-primaryDark-200: #354d81;
  --color-primaryDark-100: #4564a8;
  --color-primary: #4b6cb6;
  --color-primaryLight-100: #6481c0;
  --color-primaryLight-200: #a4b5da;
  --color-body: #0e2749;
  --color-black-900: #1b1f23;
  --color-black-800: #262c32;
  --color-black-700: #5a5e62;
  --color-black-600: #878e92;
  --color-black-500: #7e919e;
  --color-black-400: #b3bbbf;
  --color-black-300: #dde3e5;
  --color-black-200: #ebebeb;
  --color-black-100: #f2f2f2;
  --color-main-tab-text: #ffffff;
  --color-main-tab-bg: #063c69;
  --color-main-tab-parlay: #58a608;
  --color-main-tab-parlay-text: #80f40b;
  --color-main-tab-parlay-text-active: #ffffff;
  --color-main-tab-text-active: #ffffff;
  --color-main-tab-bg-active: #2254ba;
  --color-main-menu-number-bg: #f4a000;
  --color-main-menu-num: #000000;
  --color-unread-number-bg: #e20000;
  --color-main-menu-text-active: #f4b600;
  --color-main-menu-bg-active: #3f60ac;
  --color-header-background-from: #2254ba;
  --color-header-background-to: #163e90;
  --color-sort-by-icon: #1065ff;
  --color-event-games-bg: #ffffff;
  --color-event-games-num: #123ea1;
  --color-main-collapse-bg: #054ea1;
  --color-event-tab: #ffffff;
  --color-market-star-icon: #f4b600;
  --color-market-name: #ffffff;
  --color-scoreboard-tab-bg: rgba(255, 255, 255, 0.3);
  --color-scoreboard-tab-text: #ffffff;
  --color-scoreboard-tab-bg-active: #ffffff;
  --color-scoreboard-tab-text-active: #222222;
  --color-scoreboard-accent: #ffb80c;
  --color-market-exchange-tip: #ffb80c;
  --color-market-tab-text-active: #000000;
  --color-market-tab-bg-active: #dde3e5;
  --color-market-tab-text: #000000;
  --color-market-tab-bg: #ffffff;
  --color-market-sub-text: #1e1e1e;
  --color-widget-title: #ffe28c;
  --color-widget-active-bg: #fff7d9;
  --color-widget-info-bg: #ffc800;
  --color-event-th-option: #ffffff;
  --color-event-dot: #4b6cb6;
  --color-parlay-list-icon: #ffffff;
  --color-forecast-up-text: #58a608;
  --color-forecast-down-text: #e20000;
  --color-checkbox-bg: #e1e1e1;
  --color-checkbox-boder: #939393;
  --color-checkbox-bg-checked: #e1e1e1;
  --color-checkbox-icon: #1b1f23;
  --color-button-normal: #4b6cb6;
  --color-button-normal-text: #ffffff;
  --color-pop-title-bg: #dde3e5;
  --color-pop-title-text: #000000;
  --color-voucher-select: #c0a024;
  --color-voucher-select-icon: #c0a024;
  --color-market-match-amount: rgba(255, 255, 255, 0.6);
  --color-market-sub-icon: rgba(255, 255, 255, 0.7);
  --color-category-title: #ffffff;
  --color-maint-title: #ffffff;
  --color-maint-text: #878e92;
  --color-cash-out-icon: #9caed7;
  --color-matched-cash-out: #9caed7;
  --color-main-sport-bg: #4b6cb6;
  --color-button-cashout: #97aad5;
  --color-cashout-dot-border: rgba(114, 148, 224, 0.7);
  --color-button-unmatched: #f4b600;
}
body.MP-theme-dark {
  --color-primary: #0d592f;
  --color-secondary: #000000;
  --color-primaryDark-100: #0a4323;
  --color-primaryDark-200: #042e16;
  --color-primaryLight-100: #148145;
  --color-primaryLight-200: #37a668;
  --color-black-100: #f2f2f2;
  --color-black-200: #ebebeb;
  --color-black-300: #dde3e5;
  --color-black-400: #bdbdbd;
  --color-black-500: #90999e;
  --color-black-600: #6c7276;
  --color-black-700: #3b3e41;
  --color-black-800: #2d2f30;
  --color-black-900: #1b1f23;
  --color-back-100: #d0e8fa;
  --color-back-200: #a1d2f4;
  --color-back-300: #7cc3f5;
  --color-back-400: #69b4ea;
  --color-back-500: #379de6;
  --color-back-600: #3b93d2;
  --color-lay-100: #fde2e8;
  --color-lay-200: #fcc6d1;
  --color-lay-300: #faa9ba;
  --color-lay-400: #f9a2b4;
  --color-lay-500: #f66987;
  --color-lay-600: #da516d;
  --color-3rd: #c69700;
  --color-success: #75e208;
  --color-error: #e62626;
  --color-sub-tab-fancybet: #357aa2;
  --color-global-font-default: #ededed;
  --color-global-font-on-dark: #ffffff;
  --color-global-font-on-light: #1e1e1e;
  --color-icon-light: #ffffff;
  --color-icon-dark: #222222;
  --color-icon-bg-default: #222222;
  --color-icon-text-default: #ededed;
  --color-forecast-up-text: #75e208;
  --color-forecast-down-text: #e62626;
  --color-header-background-from: #106d3a 0%;
  --color-header-background-to: #0d592f 100%;
  --color-button-normal: #0d592f;
  --color-button-normal-text: #ededed;
  --color-event-tab: #ffffff;
  --color-event-th-option: #ededed;
  --color-main-tab-bg-active: #106d3a;
  --color-main-tab-text-active: #ffffff;
  --color-main-menu-bg-active: #000000;
  --color-main-menu-text-active: #2aaa64;
  --color-main-menu-number-bg: #222222;
  --color-unread-number-bg: #e62626;
  --color-main-collapse-bg: #042e16;
  --color-market-name: #ededed;
  --color-market-sub-icon: rgba(255, 255, 255, 0.4);
  --color-market-exchange-tip: #0bad54;
  --color-scoreboard-accent: #0dce64;
  --color-widget-active-bg: #0d592f;
  --color-pop-title-bg: #131313;
  --color-pop-title-text: #ededed;
  --color-checkbox-bg: #343434;
  --color-checkbox-boder: #939393;
  --color-checkbox-bg-checked: #2d2f30;
  --color-checkbox-icon: #ffffff;
  --color-in-play: #7cf280;
  --color-today: #ebb32b;
  --image-mypin-star-sprit: s-bg-star-sprit-white;
  --color-loadAni-main: #ffc800;
}
.limit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 8.5333333333vw);
  margin: auto;
  padding: 4.2666666667vw;
  padding-top: 0;
  color: var(--limit-title);
  font-family: var(--custom-font), var(--custom-serif);
}
.limit-content .logo-box {
  width: 18.6666666667vw;
  height: 18.6666666667vw;
  margin: 0 auto;
  background: no-repeat center/contain;
}
.limit-content h1 {
  margin: 2.1333333333vw 0;
  font-size: 8vw;
  font-weight: 600;
  text-align: center;
}
.limit-content h2 {
  color: var(--limit-time-txt);
  font-size: 8vw;
  font-weight: 500;
}
.limit-content h3 {
  margin: 2.1333333333vw 0;
  color: var(--limit-timezone-txt);
  font-size: 3.7333333333vw;
  font-weight: 500;
}
.limit-content h4 {
  margin: 4.2666666667vw 0;
  color: var(--limit-txt);
  font-size: 3.7333333333vw;
  font-weight: 500;
  line-height: 5.3333333333vw;
  text-align: center;
}
.limit-content span {
  color: var(--limit-ip-txt);
  font-size: 3.7333333333vw;
  line-height: 5.3333333333vw;
}
.limit-content video {
  width: 80%;
  max-width: 280px;
  margin: 8vw 0;
}
.limit-content .sm {
  width: 60%;
}
.limit-content .img-not-found {
  width: 80%;
  max-width: 280px;
  margin: 8vw 0;
}
.limit-content .img-for-ios {
  width: 60%;
  margin: 8vw 0;
}
.limit-content .btn-box {
  margin: auto;
  max-width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 4.2666666667vw 0 0;
  text-align: right;
}
.limit-content .btn-box .button {
  display: inline-block;
  flex: 1;
  width: 100%;
  max-width: 100%;
  margin: 2.6666666667vw;
  padding: 0 2.6666666667vw;
}
.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;
  }
}