.myvip_container, .myvip_detail_container, .myvip_game_level_container{
    display: flex;
    flex-wrap: nowrap;
}
.myvip_detail_container, .myvip_game_level_container{
    align-items: center;
}
.myvip_container > .block_content{
    width: 67%;
    padding: 24px;
}
.myvip_container > .block_content:first-child{
    background-color: var(--profile_side_panel_bg);
    border-right: var(--profile_side_panel_borderthick) solid var(--profile_side_panel_border);
    -webkit-box-shadow: var(--profile_side_panel_shadow);
    box-shadow: var(--profile_side_panel_shadow);
    border-top-left-radius: var(--profile_side_panel_radius);
    margin-right: 17px;
    width: 33%;
}
.myvip_detail_container .icon_circle_card{
    margin: 0 15px 0 0;
}
.myvip_level, .myvip_next_level > strong{
    font-size: 17px;
    font-weight: bold;
}
.myvip_next_level{
    justify-self: end;
    margin-left: auto;
}
.vip_item_title, .vip_stay_requirement{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.vip_item_title, .vip_reached img{
    width: 16px;
}
.vip_item_title, .vip_reached{
    width: 100%;
    text-align: center;
    padding-top: 1px;
}
.myvip_progress{
    border-radius: 25px;
    margin-top: 8px;
}

.myvip_progress .not_open{
    color: var(--vip_salary_txt_subtitle);
}
.myvip_progress_nonmargin{
    border-radius: 25px;
}
.vip_stay_requirement{
    margin-top: 26px;
    margin-bottom: 10px;
}
.vip_stay_requirement_list, .vip_uplevel_requirement_list{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 15px;
}
.vip_stay_requirement_list > img{
    margin-right: 20px;
    width: 28px;
}
.vip_uplevel_requirement_title{
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 17px;
    text-align: center;
    color: var(--txt_general);
}
.vip_uplevel_requirement_list{
    align-items: start;
}
.vip_uplevel_requirement_list > div:first-child{
    width: 20%;
    margin-right: 20px;
}
.vip_uplevel_requirement_list > div:last-child{
    width: 80%;
}
.vip_games_level_list{
    display: flex;
    flex-wrap: wrap;
}
.vip_games_level_list > .block_content{
    width: calc(50% - 10px);
    margin-bottom: 20px;
    margin-right: 20px;
    position: relative;
}
.vip_games_level_list > .block_content:nth-child(2n){
    margin-right: 0;
}
.myvip_game_level_top_container{
    background: var(--myvip_card_bg);
    box-shadow: var(--myvip_card_shadow);
    border: var(--myvip_card_borderthick) solid var(--myvip_card_border);
    border-radius: var(--myvip_card_radius);
    padding: 10px 15px;
    position: relative;
    z-index: 10;
}
.myvip_game_level_container .icon_circle_card{
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0 8px 0 0;
    background: var(--myvip_circle);
}
.myvip_game_level_container .icon_circle_card > img{
    max-width: 28px;
    max-height: 28px;
}
.myvip_game_level_container > .myvip_level{
    font-size: 13px;
    font-weight: normal;
}
.myvip_game_level_container > .myvip_next_level_require{
    margin-left: auto;
}
.myvip_game_level_container > .myvip_next_level_require a{
    font-weight: normal;
    font-size: 12px;
    color: var(--txt_general);
    display: flex;
    align-items: center;
}
.myvip_game_level_container > .myvip_next_level_require a .more{
    margin-left: 4px;
}
.myvip_game_level_container > .myvip_next_level_require a.active .more{
    transition: all .3s ease;
}
.myvip_game_level_container > .myvip_next_level_require a .more img:nth-child(2), 
.myvip_game_level_container > .myvip_next_level_require a.active .more img:first-child{
    display: none;
}
.myvip_game_level_container > .myvip_next_level_require a.active .more img:nth-child(2){
    display: block;
}
.myvip_game_total_progress{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 6px;
}
.myvip_game_total_progress .myvip_progress{
    width: 60%;
    margin: 0;
}
.myvip_game_total_progress .lvl{
    width: 20%;
    color: var(--myvip_card_Level);
    font-size: 12px;
}
.myvip_game_total_progress .lvl:last-child{
    text-align: right;
}
.myvip_game_level_bottom_container{
    color: var(--myvip_card_expand_label);
    display: none;
    font-size: 12px;
    padding: 25px 10px 10px;
    transform: translateY(-10px);
    position: absolute;
    width: 100%;
    z-index: 9;
    background: var(--myvip_card_expand_bg);
    border-radius: 8px;
}
.myvip_game_level_bottom_container .vip_uplevel_requirement_list:last-child{
    margin-bottom: 0;
}

.myvip_container > .block_content:nth-child(2), .myvip_container > .block_content:last-child{
    height: 580px;
    overflow-y: auto;
}

.myvip_reward_popup{
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}
.myvip_reward_popup > .left{
    width: 242px;
    /* border-right: 0.5px solid #E2E2E2; */
    height: 100%;
}
.myvip_reward_popup > .right{
    /*width: calc(100% - 242px);
    background: #FFFFFF; 
    box-shadow: inset 0px 4px 15px rgba(0, 0, 0, 0.12);
    padding: 20px 22px 17px;*/
}
.myvip_reward_popup .onekey_receive_container{
/*    background: #374356;*/
    background: var(--wallet_subheader_bg);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.12);
    border-radius: 0px;
    padding: 6px 16px;
    text-align: right;
}
.myvip_reward_popup .onekey_receive_container button, .myvip_next_level_price_btn button, .myvip_sub_normal_container button{
    height: 28px;
    padding: 5px 12px;
}

.myvip_sub_normal_row button {
    height: 30px;
}

.myvip_reward_list{
    overflow-y: auto;
    height: calc(100% - 40px);
}
.myvip_all_list{
    overflow-y: auto;
    height: 100%;
    background: var(--vip_subnav_bg);
}
.myvip_reward_list > .block_content{
    background: var(--treasurepromo_subnav_bg);
    display: flex;
    align-items: center;
    padding: 12px 17px 12px 32px;
    border-bottom: var(--treasurepromo_subnav_borderthick) solid var(--treasurepromo_subnav_border);
    border-radius: var(--treasurepromo_subnav_radius);
    box-shadow: var(--treasurepromo_subnav_shadow);
}

.myvip_list{
    background: var(--vip_subnav_bg);
    padding: 0px 16px;
}
.myvip_list > .block_content{
    display: flex;
    align-items: center;
    color: var(--vip_subnav_txt);
    height: 89px;
    border-bottom: 1px solid var(--vip_subnav_divider);
}

.myvip_list:first-child{
    background: var(--vip_subnav_bg_active);
}

.myvip_list > .block_content:first-child .icon_circle_card{
    background: var(--vip_subnav_circle_active);
}

.myvip_list > .block_content:first-child .myvip_name{
    color: var(--vip_subnav_txt_active);
}

.myvip_reward_list .myvip_name{
    color: var(--treasurepromo_subnav_title);
}
.myvip_reward_list .myvip_level{
    color: var(--treasurepromo_subnav_txt);
}

.myvip_reward_list > .block_content.active{
    background: var(--treasurepromo_subnav_bg_active);
    border-bottom: var(--treasurepromo_subnav_borderthick_active) solid var(--treasurepromo_subnav_border_active);
    border-radius: var(--treasurepromo_subnav_radius_active);
    box-shadow: var(--treasurepromo_subnav_shadow_active);
}
.myvip_list > .block_content.active{
    background: var(--vip_subnav_bg_active);
    color: var(--vip_subnav_txt_active);
}
.myvip_reward_list > .block_content.active .myvip_name, .myvip_list > .block_content.active .myvip_name{
    color: var(--treasurepromo_subnav_title_active);
}
.myvip_reward_list > .block_content.active .myvip_level, .myvip_list > .block_content.active .myvip_level{
    color: var(--treasurepromo_subnav_txt_active);
}
.myvip_reward_list > .block_content > .icon_circle_card, .myvip_list > .block_content > .icon_circle_card{
    width: 56px;
    height: 56px;
    min-width: 56px;
    margin: 0 13px 0 0;
    position: relative;
    background-color: var(--vip_subnav_circle);
}
.myvip_reward_list > .block_content > .icon_circle_card img, .myvip_list > .block_content > .icon_circle_card img{
    max-width: 28px;
    max-height: 28px;
}
.myvip_reward_list > .block_content.active > .icon_circle_card, .myvip_list > .block_content.active > .icon_circle_card{
    background-color: var(--vip_subnav_circle_active);
}
.myvip_reward_list > .block_content > .icon_circle_card.new::before{
    display: block;
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #FF5F5E;
    border-radius: 50%;
    right: 0px;
    top: 0px;
}
.myvip_reward_list > .block_content > .arrow, .myvip_list > .block_content > .arrow{
    justify-self: right;
    margin-left: auto;
}
.myvip_reward_list > .block_content > .arrow img, .myvip_list > .block_content > .arrow img{
    width: 24px;
}

.myvip_details_container{
    display: block;
}
.myvip_sub_container{
    display: flex;
    flex-wrap: nowrap;
    padding: 0px 25px;
    margin-bottom: 36px;
}

.myvip_sub_container:last-child{
    padding-bottom: 25px;
}

.myvip_details_container .vip_container_tab .myvip_sub_container {
    margin: 20px 0 0;
}

.myvip_details_container .vip_container_tab .myvip_sub_detail_container {
    padding: 16px;
}

.summary_container .myvip_sub_container .myvip_turnover_container {
    padding: 0px 20px!important;
}

.summary_container .myvip_sub_container .summary_vip_bg {
    padding: 20px !important;
}

.myvip_details_container .myvip_sub_level .price{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.myvip_sub_detail_container{
    width: 100%;
    z-index: 1;
}
.myvip_sub_detail_container .icon_circle_card{
    margin: 0 20px 0 0;
    background: var(--vip_promotion_icon_circle);
}
.myvip_sub_detail_content{
    display: flex;
    align-items: center;
}
.myvip_sub_detail_content.myvip_sub_w_extended{
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border_general);
}

.myvip_sub_reward_container{
    width: 100%;
    z-index: 1;
    padding: 16px;
    background: var(--vip_promotion_bg);
    box-shadow: var(--vip_promotion_shadow);
    border-radius: var(--vip_promotion_radius);
    border: var(--vip_promotion_borderthick) solid var(--vip_promotion_border);
}

.myvip_sub_reward_container .icon_circle_card{
    margin: 0 20px 0 0;
    background: var(--vip_promotion_icon_circle);
}

.myvip_sub_reward_container .myvip_sub_detail_content .name{
    text-align: left;
    color: var(--vip_promotion_txt_level);
}

.myvip_sub_reward_container .vip_sub_price {
    color: var(--vip_promotion_txt_reward);
    font-weight: 600;
    font-size: 17px;
}

.myvip_sub_reward_container .myvip_sub_special{
    color: var(--vip_promotion_txt_general);
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
}

.summary_container .myvip_sub_level{
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: space-between;
    align-items: flex-end;
    color: var(--vip_promotion_txt_general);
    width: 80%;
    padding-right: 8px;
}
.myvip_sub_level > .name {
    font-weight: var(--box_dashboard_title_weight);
    font-size: 21px;
    line-height: 26px;
    color: var(--box_dashboard_title);
}

.myvip_sub_level_container > .price > div:first-child {
    font-size: 12px;
    font-weight: normal;
    color: var(--txt_general);
}

.myvip_sub_level > .price > div{
    text-align: right;
}
.myvip_sub_level_more{
    margin-top: 10px;
    text-align: right;
    font-weight: 600;
}
.myvip_sub_level_more a{
    color: var(--btn_txt_enabled_txt);
}
.myvip_sub_level_more img{
    /* height: 10px; */
    margin-left: 10px;
}

.myvip_details_container .myvip_sub_detail_container {
    padding: 20px 15px 15px;
}

.myvip_details_container .myvip_sub_level {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--vip_promotion_txt_general);
    width: 100%;
}

.myvip_details_container .vip_container_tab .myvip_sub_detail_container .myvip_sub_detail_content .progress {
    width: 100%;
    margin-top: 10px;
}


.myvip_details_container .vip_container_tab .myvip_sub_detail_container .myvip_sub_detail_content .name{
    text-align: left;
}

.myvip_sub_next_container{
    display: flex;
    border-radius: 16px;
    padding: 16px 9px 15px 30px;
    color: var(--vip_promotion_txt_general);
    width: 50%;
    /* transform: translateX(-12px); */
}
.myvip_sub_next_container > .left, .myvip_sub_normal_container > .left{
    width: 65%;
}
.myvip_sub_next_container > .right, .myvip_sub_normal_container > .right{
    width: 35%;
    text-align: center;
}
.myvip_sub_next_level, .my_vip_price_to_get{
    display: flex;
    align-items: center;
    width: 100%;
}
.myvip_sub_next_level .icon_circle_card{
    margin: 0 15px 0 0;
    background: var(--vip_promotion_icon_circle);
    border-radius: 28px;
}
.myvip_sub_next_level.salary .icon_circle_card{
    background: var(--vip_salary_icon_circle);
}
.myvip_next_level_price{
    color: var(--txt_value);
    font-size: 17px;
    font-weight: 600;
}
.myvip_next_level_price_time{
    font-size: 12px;
    color: #E2E2E2;
    margin-top: 2px;
}
.myvip_sub_empty_container{
    padding: 30px;
    width: 50%;
    text-align: center;
    color: var(--vip_txt_general);
}
.myvip_sub_empty_container > div{
    text-align: center;
}
.myvip_benefits .item_name{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color:var(--vip_benefits_txt_general);
}

.button_full_grey{
    color: var(--btn_alt_enabled_txt);
    background: var(--btn_alt_enabled_bg);
    border: var(--btn_alt_enabled_borderthick) solid var(--btn_alt_enabled_border);
    font-weight: var(--btn_alt_enabled_weight);
    box-shadow: var(--btn_alt_enabled_shadow);
    border-radius: 8px;
    font-size: 13px;
    line-height: 18px;
    padding: 8px 43px;
    white-space: nowrap;
    margin-top:16px;
}
.button_full_white{
    color: var(--btn_alt_enabled_txt);
    background: var(--btn_alt_enabled_bg);
    border: var(--btn_alt_enabled_borderthick) solid var(--btn_alt_enabled_border);
    font-weight: var(--btn_alt_enabled_weight);
    box-shadow: var(--btn_alt_enabled_shadow);
    border-radius: 8px;
    font-size: 13px;
    line-height: 18px;
    padding: 12px 20px;
    white-space: nowrap;
}
.button_full_grey:disabled, .button_full_white:disabled{
    color: var(--btn_alt_disabled_txt);
    background: var(--btn_alt_disabled_bg);
    border: var(--btn_alt_disabled_borderthick) solid var(--btn_alt_disabled_border);
    font-weight: var(--btn_alt_disabled_weight);
    box-shadow: var(--btn_alt_disabled_shadow);
}
.button_full_dark, .button_full_white.active{
    color: var(--btn_vip_promotion_claim_enabled_txt) !important;
    background: var(--btn_vip_promotion_claim_enabled_bg);
    border: var(--btn_vip_promotion_claim_enabled_borderthick) solid var(--btn_vip_promotion_claim_enabled_border);
    font-weight: var(--btn_vip_promotion_claim_enabled_weight);
    box-shadow: var(--btn_vip_promotion_claim_enabled_shadow);
    border-radius: 8px;
    font-size: 13px;
    line-height: 18px;
    padding: 12px 20px;
    white-space: nowrap;
}
.benefits_cs_btn{
    color: var(--btn_vip_benefits_cs_enabled_txt);
    background: var(--btn_vip_benefits_cs_enabled_bg);
    border: var(--btn_vip_benefits_cs_enabled_borderthick) solid var(--btn_vip_benefits_csenabled_border);
    font-weight: var(--btn_vip_benefits_cs_enabled_weight);
    box-shadow: var(--btn_vip_benefits_cs_enabled_shadow);
}
/*.myvip_next_level_price_btn button{
    color: var(--btn_vip_promotion_claim_enabled_txt);
    background: var(--btn_vip_promotion_claim_enabled_bg);
    border: var(--btn_vip_promotion_claim_enabled_borderthick) solid var(--btn_vip_promotion_claim_enabled_border);
    font-weight: var(--btn_vip_promotion_claim_enabled_weight);
    box-shadow: var(--btn_vip_promotion_claim_enabled_shadow);
}
.myvip_next_level_price_btn button:disabled{
    color: var(--btn_vip_promotion_claim_disabled_txt);
    background: var(--btn_vip_promotion_claim_disabled_bg);
    border: var(--btn_vip_promotion_claim_disabled_borderthick) solid var(--btn_vip_promotion_claim_disabled_border);
    font-weight: var(--btn_vip_promotion_claim_disabled_weight);
    box-shadow: var(--btn_vip_promotion_claim_disabled_shadow);
}
.myvip_next_level_price_btn.salary button{
    color: var(--btn_vip_salary_claim_enabled_txt);
    background: var(--btn_vip_salary_claim_enabled_bg);
    border: var(--btn_vip_salary_claim_enabled_borderthick) solid var(--btn_vip_salary_claim_enabled_border);
    font-weight: var(--btn_vip_salary_claim_enabled_weight);
    box-shadow: var(--btn_vip_salary_claim_enabled_shadow);
}
.myvip_next_level_price_btn.salary button:disabled{
    color: var(--btn_vip_promotion_claim_disabled_txt);
    background: var(--btn_vip_promotion_claim_disabled_bg);
    border: var(--btn_vip_promotion_claim_disabled_borderthick) solid var(--btn_vip_promotion_claim_disabled_border);
    font-weight: var(--btn_vip_promotion_claim_disabled_weight);
    box-shadow: var(--btn_vip_promotion_claim_disabled_shadow);
}*/

.myvip_sub_normal_container{
    color: var(--vip_salary_txt_general);
    border: var(--vip_salary_borderthick) solid var(--vip_salary_border);
    border-radius: var(--vip_salary_radius);
    padding: 17px 8px 14px 18px;
    width: 100%;
    margin-bottom: 13px;
    background: var(--vip_page_bg);
    box-shadow: var(--vip_salary_shadow);
}
.myvip_sub_normal_container.benefits{
    margin-bottom: unset;
    padding:18px 0 0 0;
}
.myvip_sub_normal_row, .myvip_sub_normal_container.col_2{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.myvip_sub_normal_row .myvip_sub_normal_container.col_2:last-child{
    margin-right: 0;
}
.myvip_sub_normal_container .myvip_next_level_price_time{
    color: var(--vip_txt_rewards_time);
}
.myvip_sub_normal_container .vip_item_title{
    margin-top: 5px;
    color: var(--vip_salary_txt_subtitle);
}
.myvip_sub_normal_container .vip_item_title .vip_reached img{
    width: 16px;
}
.myvip_sub_normal_container .vip_item_title .vip_reached{
    justify-content: center !important;
    padding-top: 1px;
}
.myvip_sub_normal_container > .title_block{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    width: 100%;
    margin-bottom: 24px;
    display: none;
}
.myvip_sub_normal_container > .item_list{
    display: flex;
    width: 100%;
}
.myvip_sub_normal_container > .item_list > div{
    width: 100%;
    margin-right: 15px;
    display: flex;
    align-items: center;
}
.myvip_sub_normal_container > .item_list > div:last-child{
    margin-right: 0;
}
.myvip_sub_normal_container > .item_list > div .icon_circle_card{
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0 15px 0 0;
    background: var(--vip_rewards_icon_circle);
}
.myvip_sub_normal_container > .item_list > div .icon_circle_card img{
    height: 30px;
    /*max-width: 24px;
    max-height: 24px;*/
}
.myvip_sub_normal_container > .item_list > div .icon_circle_card.trans_bg{
    background: transparent;
}
.myvip_sub_normal_container > .item_list > div .item_name > div:first-child{
    font-size: 12px;
}
.myvip_sub_normal_container > .item_list > div .item_name > div:last-child{
    font-weight: bold;
    font-size: 17px;
}
.myvip_sub_normal_container > .item_list > div .item_name > div.small{
    font-size: 10px;
}
.my_vip_price_to_get{
    justify-content: space-between;
    font-weight: 600;
    margin-top: 37px;
}
.my_vip_price_to_get span{
    font-size: 18px;
    color: var(--vip_promotion_txt_general);
}

.my_vip_price_to_get .button_full_red { 
    border-radius: var(--btn_vip_reward_claim_all_radius); 
    padding: 8px 95px !important; 
}

.myvip_popup_container{
    display: flex;
    height: 100%;
    background: var(--vip_table_popup_bg);
    border: var(--vip_table_popup_borderthick) solid var(--vip_table_popup_border);
    border-radius: var(--vip_table_popup_radius);
    box-shadow: var(--vip_table_popup_shadow);
}
.myvip_all_content{
    position: relative;
}
.myvip_popup_container > div:first-child{
    width: 27%;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}
.myvip_popup_container > div:last-child{
    width: 100%;
}

.myvip_all_container{
    display: none;
}

.myvip_list > .block_content > div:nth-child(2){
    font-size: 17px;
    font-weight: 600;
}

.myvip_all_selected_header{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border_general);
}
.myvip_all_selected_header > div:nth-child(2){
    font-weight: 600;
    font-size: 24px;
    color:var(--txt_general);
}
.myvip_all_selected_header > .icon_circle_card{
    margin: 0 15px 0 0;
    background: var(--vip_subnav_circle);
}
.myvip_all_selected_header > div:last-child{
    margin-left: auto;
}
.myvip_all_content_table_container{
    width: 943px;
    height: calc(798px - 89px);
    overflow-y: auto;
    overflow-x: auto;
    background: var(--vip_table_content_bg);
}
.myvip_all_content_table{
    position: relative;
    table-layout: fixed;
    min-width: 1500px;
}
.myvip_all_content_table thead th{
    padding: 3px 8px;
    text-align: center;
    background: var(--vip_table_header_bg);
    color: var(--vip_table_subheader);
    font-size: 12px;
    position: sticky;
    top: 0px;
}
.myvip_all_content_table thead th:first-child, .myvip_all_content_table tbody td:first-child{
    background: var(--vip_table_header_bg_vip);
    color: var(--vip_table_header);
    font-weight: 600;
    text-align: center;
}
.myvip_all_content_table thead th.special{
    background: var(--vip_table_header_bg_top);
    color: var(--vip_table_subheader_top);
}
.myvip_all_content_table thead th.sub_special{
    background: var(--vip_table_header_bg_bottom);
    color: var(--vip_table_subheader_bottom);
    font-weight: normal;
    top: 24px;
}
.myvip_all_content_table thead th.divider, .myvip_all_content_table tbody td.divider{
    border-right: 1px solid var(--vip_table_header_divider);
}
.myvip_all_content_table thead th > .subheader_title, .myvip_all_content_table tbody td > .subheader_title{
    font-weight: normal;
    font-size: 12px;
    color: var(--vip_table_subheader_title);
}
.myvip_all_content_table thead th > div, .myvip_all_content_table tbody td > div{
    font-weight: normal;
    font-size: 12px;
    color: var(--vip_table_subheader_content);
}
.myvip_all_content_table tbody td{
    text-align: right;
    font-size: 14px;
    padding: 12px 8px;
    color: var(--vip_table_content);
}
.myvip_all_content_table tbody td.center{
    text-align: center;
}
.myvip_all_content_table tbody td.left{
    text-align: left;
}
.myvip_popup_rules_container{
    position: absolute;
    display: none;
    left: 0;
    top: 89px;
    width: 100%;
    height: calc(100% - 89px);
    background: var(--vip_table_scrim );
    padding: 32px;
    overflow-y: auto;
}
.myvip_popup_rules_container .title{
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--vip_table_rules);
}
.myvip_popup_rules_container ol{
    padding-left: 25px;
    color: var(--vip_table_rules);
}
.myvip_popup_rules_container ol li{
    margin-bottom: 16px;
}
.vip_btn_area{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.vip_btn_area > .vip_btn{
    /* width: 61px;
    text-overflow: ellipsis; */
    overflow: hidden;
    white-space: nowrap;
    margin-right: 10px;
    cursor: pointer;
    color: var(--vip_tiers_txt);
    border-radius: var(--vip_tiers_radius);
    font-weight: normal;
    font-size: 14px;
    padding: 8px 16px;
    border: var(--vip_tiers_borderthick) solid var(--vip_tiers_border);
    background: var(--vip_tiers_bg);
}
.vip_btn_area > .vip_btn:last-child{
    margin-right: 0;
}
.vip_btn_area > .vip_btn.active{
/*    color: #ED1B34;*/
    color: var(--vip_tiers_active_txt);
    font-weight: 600;
    margin-right: 10px;
    font-weight: normal;
    background: var(--vip_tiers_active_bg);
    border: var(--vip_tiers_active_borderthick) solid var(--vip_tiers_active_border);
}
.swiper_vip_bar{
    overflow: hidden !important;
    margin-top: 30px;
    width: 70%;
}
.vip_list_btn .progress{
    width: 92%;
    margin: auto;
}
.vip_list_btn .progress{
    border-radius: 0;
}
.vip_list_btn .progress .progress-bar{
    border-radius: 0;
    margin: 3px 0;
    background: var(--vip_tab_fill);
}
.fake_bar_left, .fake_bar_right{
    position: relative;
    z-index: 1;
}
.fake_bar_left::before, .fake_bar_right::after{
    content: "";
    display: block;
    position: absolute;
    left: -2950px;
    top: 0px;
    width: 3000px;
    height: 13px;
    background: #FFF;
}
.fake_bar_left::after{
    content: "";
    display: block;
    position: absolute;
    left: -2950px;
    top: 3px;
    width: 3000px;
    background: var(--vip_tab_fill);
        box-shadow: 0px 4px 12px rgb(0 0 0 / 12%);
    height: 7px;
}
.fake_bar_right::after{
    top: -13px;
    right: -2950px;
    left: unset;
    box-shadow: 11px 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1;
}
.vip_list_btn .progress .progress-bar .circle{
    z-index: 2;
}

.viplist-swiper-button-prev{
    position: absolute;
    top: -50%;
    left: -6%;
    z-index: 1;
    cursor: pointer;
    outline: 0;
    width: 28px;
}
.viplist-swiper-button-next {
    position: absolute;
    z-index: 1;
    top: -76%;
    right: -7%;
    cursor: pointer;
    outline: 0;
    width: 28px;
}
.viplist-swiper-button-next img{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    width: 100%;
}
.viplist-swiper-button-prev img{
    width: 100%;
}
.viplist-swiper-button-prev > div, .viplist-swiper-button-next > div{
    position: absolute;
    bottom: -8px;
    /*left: 16px;*/
    white-space: nowrap;
    font-size: 12px;
}
.viplist-swiper-button-next > div{
    left: initial;
    /*right: 16px;*/
    bottom: -15px;
}
.viplist-swiper-button-prev.swiper-button-disabled, .viplist-swiper-button-next.swiper-button-disabled{
    opacity: 0.3;
}

.vip_list_btn {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: hidden;
    padding-top: 10px;
}
.vip_group_list{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #8C8C8C;
    font-size: 16px;
    margin-top: 40px;
}
.vip_group_list > div{
    margin-right: 55px;
    cursor: pointer;
}
.vip_group_list > div.active{
/*    color: #0F1C2D;*/
    color: var(--primary-color);
    border-bottom: 1px solid #0F1C2D;
    font-weight: 600;
}
.vip_group_list > div:last-child{
    margin-right: 0;
}

.myvip_desc_content{
    margin-top: 60px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 16px 0px;
}
.myvip_desc_content, .myvip_desc_content .logo{
    display: flex;
    align-items: center;
}
.myvip_desc_content .logo > .icon_circle_card{
/*    background-color: #0F1C2D;*/
    background: var(--vip_card_circle_active);
    border-radius: 36px;
    margin: 0 15px 0 0;
}
.myvip_desc_content .text{
    color: var(--vip_description_title);
    font-weight: 600;
    font-size: 24px;
    white-space: nowrap;
    width: 80%;
}
.myvip_desc_content .desc{
    color: var(--vip_description_content);
}

.vip_type_container {
    margin-top: 32px;
    padding: 16px 0px 0;
    border-radius: 16px;
    display: flex;
}

.vip_type_container > .text{
    white-space: nowrap;
    font-size: 24px;
    margin-right: 50px;
    padding-top: 24px;
}
.vip_type_container .arrow{
    margin-left: 50px;
    cursor: pointer;
    transform: translateY(30px);
}
.vip_type_container .arrow img{
    /*transform: rotate(90deg);*/
    width: auto;
    transition: all .3s ease;
}
.vip_type_container .arrow.active img{
    transform: rotate(-180deg);
}
.vip_type_container .vip_type_list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    /*max-height: 98px;*/
    transition: max-height 1s ease-out;
}
.vip_type_container .vip_type_list.active{
    max-height: 2000px;
    transition: max-height 1s ease-in;
}
.vip_type_container .vip_type_list > .block_content{
    /*width: calc(20% - 16px);*/
    width: calc(100% / 8);
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 16px;
    padding: 10px 12px;
    font-size: 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-weight: var(--vip_categories_default_weight);
    color:var(--vip_categories_default_txt);
}
.vip_type_container .vip_type_list > .block_content:hover{
    font-weight: var(--vip_categories_hover_weight);
    color:var(--vip_categories_hover_txt);
    box-shadow: var(--vip_categories_hover_shadow);
}
.vip_type_container .vip_type_list > .block_content.active{
    font-weight: var(--vip_categories_selected_weight);
    color:var(--vip_categories_selected_txt);
    box-shadow: var(--vip_categories_selected_shadow);
    border-radius: var(--vip_categories_radius);
}
.vip_type_container .vip_type_list > .block_content .text{
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 5px;
}
.vip_type_container .vip_type_list > .block_content:nth-child(5n){
    margin-right: 0; 
}
.vip_type_container .vip_type_list > .block_content > .icon_circle_card {
    background: var(--vip_categories_default_circle);
    border:var(--vip_categories_default_borderthick) solid var(--vip_categories_default_border);
}
.vip_type_container .vip_type_list > .block_content:hover > .icon_circle_card {
    background: var(--vip_categories_hover_circle);
    border:var(--vip_categories_hover_borderthick) solid var(--vip_categories_hover_border);
}
.vip_type_container .vip_type_list > .block_content.active > .icon_circle_card{
    background: var(--vip_categories_selected_circle);
    border:var(--vip_categories_selected_borderthick) solid var(--vip_categories_selected_border);
}
.vip_type_container .vip_type_list > .block_content.active > .text{
    color: var(--vip_categories_selected_txt);
}

.vip_popup_receive_all{
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    background: var(--vip_header_bg);
    border: var(--vip_header_borderthick) solid var(--vip_header_border);
    border-radius: var(--vip_header_radius);
    box-shadow: var(--vip_header_shadow);
}
.vip_popup_receive_all .icon_circle_card{
    width:44px; 
    min-width:44px; 
    height: 44px; 
    margin: 0 15px 0 0;
    background: var(--vip_header_icon_circle_fill);
}
.vip_popup_receive_all .title{
    font-weight: 600; 
    font-size: 17px;
    color: var(--vip_header_text);
}
.vip_popup_receive_btn{
    height: 28px;
    padding: 6px 15px;
    background: var(--btn_vip_benefits_cs_enabled_bg);
    color: var(--btn_vip_benefits_cs_enabled_txt);
    border: var(--btn_vip_benefits_cs_enabled_borderthick) solid var(--btn_vip_benefits_cs_enabled_border);
    box-shadow: var(--btn_vip_benefits_cs_enabled_shadow);
    font-weight: var(--btn_vip_benefits_cs_enabled_weight);
}
.vip_popup_receive_btn:disabled{
    background: var(--btn_vip_benefits_cs_dsiabled_bg);
    color: var(--btn_vip_benefits_cs_dsiabled_txt);
    border: var(--btn_vip_benefits_cs_dsiabled_borderthick) solid var(--btn_vip_benefits_cs_dsiabled_border);
    box-shadow: var(--btn_vip_benefits_cs_dsiabled_shadow);
    font-weight: var(--btn_vip_benefits_cs_dsiabled_weight);
}
.vip_popup_price{
    font-size: 17px;
    font-weight: bold;
}
.vip_popup_time{
    font-size: 12px;
    color: var(--vip_reward_txt_subtitle);
}
.vip_popup_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: var(--vip_reward_txt_general);
}
.vip_popup_subcontent{
    display: flex;
    align-items: center;
}
.vip_popup_subcontent > div{
    margin-right: 10px;
}
.vip_popup_subcontent > div:last-child{
    margin-right: 0px;
}
.vip_popup_total_receive{
    font-weight: 600;
    text-align: center;
}
.vip_popup_total_receive > span{
    font-size: 18px;
    color: #ED1B34;
}
.layout_1200 .vip_not_found{
    height: 300px;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
    color: var(--vip_tab_txt_normal);
    font-weight: 600;
}