/*
    z-index:
    0: normal
    1: sticky business element
    10: header
    100: dialog
*/
html {
    --header-color: #ffaa4e;

    --main-color: #c24e01;
    --main-background-color: #fcdb51;
    --main-background-gradient: linear-gradient(#30F4B6, #16CE99);

    --deactive-color: #929292;
    --deactive-background-color: #f3f3f3;
    --deactive-border-color: #9e9e9e;

    --sub-main-color: #ffe593;
    --sub-main-background-color: #FFDAB2;

    --info-color: #f49c62;
    --info-background-color: #fbf4ef;
    --info-border-color: #ffc195;

    --success-color: #2ea168;
    --success-background-color: #40eb96;
    --success-background-gradient: linear-gradient(#40eb96, #4cca8b);

    --error-color: #8f3f1f;
    --error-background-color: #ff7e4b;
    --error-background-gradient: linear-gradient(#ff7e4b, #ff6c44);

    --pup-text-light-color: #161e25;
    --pup-text-grey-color: #9999a1;

    --default-gap: 0.5rem;
    --default-border-radius: 0.3rem;

}


body {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: show .1s forwards .5s;
}

@-webkit-keyframes show {
    100% {
        opacity: 1;
    }
}

header {
    background-color: var(--header-color);
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 1.5rem;
    margin-bottom: var(--default-gap);
}

.login-header {
    position: relative;
}

@-webkit-keyframes show {
    100% {
        opacity: 1;
    }
}

@font-face {
    font-family: myFontU;
    src: url('https://update.egyludo.com/css/trade/fonts/11058_U.TTF') ;

}

@font-face {
    font-family: myFontM;
    src: url('https://update.egyludo.com/css/trade/fonts/AVANTGARDEITCBYBT-MEDIUM.TTF') ;

}

a:active {
    transform: scale(.95);
}


.bgOrg {
    background: #fff58f;
    background: -moz-linear-gradient(top, #fff58f 0, #fbbf49 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff58f), color-stop(100%, #fbbf49));
    background: -webkit-linear-gradient(top, #fff58f 0, #fbbf49 100%);
    background: -o-linear-gradient(top, #fff58f 0, #fbbf49 100%);
    background: -ms-linear-gradient(top, #fff58f 0, #fbbf49 100%);
    background: linear-gradient(to bottom, #fff58f 0, #fbbf49 100%);
    color: #d9701a;
    text-align: center;
}

.bgBlue {
    background: #c7fff3;
    background: -moz-linear-gradient(top, #c7fff3 0, #73f2d7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c7fff3), color-stop(100%, #73f2d7));
    background: -webkit-linear-gradient(top, #c7fff3 0, #73f2d7 100%);
    background: -o-linear-gradient(top, #c7fff3 0, #73f2d7 100%);
    background: -ms-linear-gradient(top, #c7fff3 0, #73f2d7 100%);
    background: linear-gradient(to bottom, #c7fff3 0, #73f2d7 100%);
    color: #258d75;
    text-align: center;
}

.bgBlue2 {
    background: #6ec8e7;
    background: -moz-linear-gradient(top, #6ec8e7 0, #348dcc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6ec8e7), color-stop(100%, #348dcc));
    background: -webkit-linear-gradient(top, #6ec8e7 0, #348dcc 100%);
    background: -o-linear-gradient(top, #6ec8e7 0, #348dcc 100%);
    background: -ms-linear-gradient(top, #6ec8e7 0, #348dcc 100%);
    background: linear-gradient(to bottom, #6ec8e7 0, #348dcc 100%);
    color: #fff;
    text-align: center;
}

.loginWrapper {
    margin: 0 auto;
    max-width: 10.8rem;
    height: 100vh;
    background: linear-gradient(#191A23, #282A39);
    font-family: 'tahoma';
    min-height: 100%;
    direction: rtl;
}

.exceptionWrapper {
    height: 100%
}

.loginWrapper .itemLogo {
    text-align: center;
}

.loginWrapper .itemLogo img {
    width: 2.86rem;
    margin-top: 1.65rem;
}

.loginWrapper .itemName {
    color: var(--sub-main-color);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: .95rem;
    font-size: .42rem;
}

.country {
    margin-left: .3rem;
    height: 100%;
    background: #fff;
    border: .03rem #6E7DAD solid;
    border-radius: .18rem;
    direction: ltr;
}

.country .country_text {
    padding-right: .7rem;
    padding-left: .3rem;
    width: 100%;
    height: 100%;
    color: #444E6B;
    font-weight: bold;
    box-sizing: border-box;
}

.country .country_text::after {
    content: "";
    position: absolute;
    top: 53%;
    right: .1rem;
    width: .29rem;
    height: .25rem;
    background: url("../../images/agent/icon/ico_arrow.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.country.show .country_text::after {
    -webkit-transform: rotate(180deg) translateY(50%);
    transform: rotate(180deg) translateY(50%);
}

.itemLogin .country .country_list {
    padding: 0;
    top: 98%;
    right: 0;
    width: 4rem;
    border: .03rem #6E7DAD solid;
    z-index: 2;
    display: none;
    overflow: auto;
    height: 7rem;
}

.itemLogin .country.show .country_list {
    display: block;
}

.country .country_list li {
    padding: .5rem;
    width: 100%;
    box-sizing: border-box;
    color: #444e6b;
    background: #FFFFFF;
    border-bottom: .03rem #B6BED6 solid;
    border-radius: 0;
}

.country .country_list li:nth-of-type(even) {
    background: #EFF2FA;
}

.country .country_list li:last-of-type {
    border-bottom: none;
}

.country .country_list li img {
    margin-right: .2rem;
    width: .58rem;
}

.tab-list {
    margin: 0 auto;
    background: #444E6B;
    border-top-left-radius: .35rem;
    border-top-right-radius: .35rem;
    width: 90%;
    overflow: hidden;
}


.tab-list li {
    position: relative;
    width: 50%;
    height: 1.44rem;
    color: #fff;
    font-size: .48rem;
    text-align: center;
}

.tab-list li p {
    position: relative;
    top: -.15rem;
    z-index: 2;
}

.tab-list li.active p {
    color: #444e6c;
}

.tab-list li.tab-01.active::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 110%;
    height: 100%;
    background: url(../../images/agent/tab_02_active.png) no-repeat;
    background-size: 100% 100%;
}

.tab-list li.tab-02.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    background: url(../../images/agent/tab_01_active.png) no-repeat;
    background-size: 100% 100%;
}

.userInfo {
    -webkit-flex-flow: column;
    flex-flow: column;
    padding: var(--default-gap);
    color: var(--main-color);
    gap: var(--default-gap);
    font-size: 1.3rem;
}


.userInfo .list {
    padding: var(--default-gap);
    background: #FFBB72;
    justify-content: start;
    -webkit-border-radius: .2rem;
    border-radius: .2rem;
    flex-grow: 1;
    direction: rtl;
    display: flex;
}

.userInfo .list li {
    position: relative;
    text-align: center;
    color: var(--main-color);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
    justify-content: center;
}

.userInfo .list li .icoBonus {
    margin-inline-start: 0.4rem;
    height: 1.5rem;
    vertical-align: initial;
}

.userInfo .list li:nth-child(n + 2)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.1rem;
    height: 100%;
    background: var(--header-color);
}

.userInfo .list .con-bot {
    color: #d7680e;
    font-size: 0.9rem;
}

.userInfo .icoRefresh {
    top: 50%;
    left: .4rem;
    margin-top: -.13rem;
    width: .25rem;
    height: .27rem;
    background-image: url("../../images/trade/bonus/ico_refresh.png");
}


.itemTop {
    padding: 0.5rem 0;
}


.itemTop .itemVip {
    top: .77rem;
    right: 1.3rem;
}

.itemTop .icoVip {
    position: absolute;
    width: 1.15rem;
    height: .42rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.itemTop .vip01 {
    background-image: url(../../images/trade/vip_s_01.png);
}

.itemTop .vip01Gray {
    background-image: url(../../images/trade/vip_s_01_gray.png);
}

.itemTop .vip02 {
    background-image: url(../../images/trade/vip_s_02.png);
}

.itemTop .vip03 {
    background-image: url(../../images/trade/vip_s_03.png);
}

.itemTop .vip04 {
    background-image: url(../../images/trade/vip_s_04.png);
}

.itemTop .vip05 {
    background-image: url(../../images/trade/vip_s_05.png);
}

.itemTop .icoBigVip {
    position: absolute;
    width: 1.45rem;
    height: .55rem;
    margin-top: 0.15rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.itemTop .icoReturn {
    top: 50%;
    right: .3rem;
    margin-top: -.25rem;
    width: .49rem;
    height: .5rem;
    background-image: url("../../images/trade/apply/ico_return.png");
}

.itemTop .itemVip .vipProgress {
    top: .6rem;
    right: -1.2rem;
    padding: .2rem 0;
    width: 6.35rem;
    background: #a500c4;
    background: -webkit-linear-gradient(#a500c4, #680093);
    background: -o-linear-gradient(#a500c4, #680093);
    background: -moz-linear-gradient(#a500c4, #680093);
    background: linear-gradient(#a500c4, #680093);
    -webkit-border-radius: 0.05rem;
    border-radius: .05rem;
    box-shadow: 0 0 .05rem #000;
    z-index: 9;
}

.itemTop .itemVip .vipProgress:after {
    content: "";
    position: absolute;
    top: -.2rem;
    right: .45rem;
    width: .35rem;
    height: .21rem;
    background: url(../../images/trade/ico_arrow_vip.png) no-repeat;
    background-size: 100% 100%;
}

.itemTop .itemVip .progress,
.itemTop .itemVip .progress .bar {
    margin-left: .3rem;
    width: 5rem;
    height: .35rem;
    background: url(../../images/trade/bg_progress_bar.png) no-repeat;
    background-size: 100% 100%;
}

.itemTop .itemVip .progress .bar {
    margin: 0;
    background-image: url(../../images/trade/bg_progress.png);
    background-size: cover
}

.itemTop .itemVip .progress .text {
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: .35rem;
    color: #fff;
    text-shadow: #0A48A3 1px 0 0, #0A48A3 0 1px 0, #0A48A3 -1px 0 0, #0A48A3 0 -1px 0;
}

.itemTop .itemVip .progress .text span {
    margin: 0 .05rem;
}

.itemTop .itemVip .progress .icoVipBig {
    position: absolute;
    top: -0.08rem;
    right: -1rem;
    width: 1.36rem;
    height: .49rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.itemTop .itemVip .progress .vipBig01 {
    background-image: url(../../images/trade/vip_01.png);
}

.itemTop .itemVip .progress .vipBig01Gray {
    background-image: url(../../images/trade/vip_01_gray.png);
}

.itemTop .itemVip .progress .vipBig02 {
    background-image: url(../../images/trade/vip_02.png);
}

.itemTop .itemVip .progress .vipBig03 {
    background-image: url(../../images/trade/vip_03.png);
}

.itemTop .itemVip .progress .vipBig04 {
    background-image: url(../../images/trade/vip_04.png);
}

.itemTop .itemVip .progress .vipBig05 {
    background-image: url(../../images/trade/vip_05.png);
}

.itemTop .itemVip .list {
    margin: .1rem 0 0 .2rem;
    color: #fff;
}

.itemTop .itemVip .list span {
    color: #fff000;
    font-style: myFontU
}

.itemTop .itemVip .list .introText {
    color: #fff
}

.itemTop .itemVip .list .introContainer {
    margin-left: 1.5rem;
}

.itemTop .itemVip .mitraLine {
    width: 6.4rem;
    height: 0.14rem;
    margin-left: -0.1rem;
    margin-top: -0.2rem;
}

.itemTop .itemVip .introList {
    margin: -0.15rem 0.2rem 0 0.2rem;
    color: #fff;
    font-family: myFontM;
}

.loginWrapper .itemLogin {
    box-sizing: border-box;
    padding-bottom: 1rem;
    margin: 0 auto;
    width: 90%;
    background: white;
    border-radius: 0 0 .35rem .35rem;
}

.loginWrapper .itemLogin ul {
    padding: .7rem .2rem;
}


.loginWrapper .itemMoney {
    position: absolute;
    top: .35rem;
    right: .15rem;
    text-decoration: underline;
}

.loginWrapper .itemMoney img {
    margin-right: .05rem;
    width: .28rem;
}

.loginWrapper .msgContent {
    display: flex;
    display: -webkit-flex;
    padding: 0 1rem;
    width: 100%;
    height: 100%;
    word-break: break-word;
    text-align: center;
    color: #fff;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.selectVal {
    left: var(--default-gap);
}

.selectVal ul {
    position: absolute;
    left: 0.6rem;
    top: 3.1rem;
    padding: 0.5rem 0.5rem;
    background-color: #fff;
    z-index: 2;
    border-radius: 0.5rem;
}

.selectVal ul::after {
    content: "";
    position: absolute;
    top: -1rem;
    left: 1rem;
    background: url(../../images/trade/ico_selectVal.png) no-repeat;
    background-size: auto;
    background-size: 100% 100%;
    width: 1rem;
    height: 1rem;
}

.selectVal img {
    position: relative;
    z-index: 1;
    width: 2rem;
}

.itemLogin li {
    position: relative;
    display: flex;
    display: -webkit-flex;
    height: 1.44rem;
    background: var(--deactive-background-color);
    color: #c4c8cd;
    font-size: .48rem;
    box-shadow: 0 0 1px #DEDCDC inset;
    white-space: nowrap;
    align-items: center;
    border-radius: .18rem;
    border: .02rem #DEDCDC solid;
}

.itemLogin .selectVal {
    right: 0.3rem;
    top: auto;
    left: auto;
}

.selectOptions li {
    position: relative;
    display: flex;
    display: -webkit-flex;
    margin: 0 auto;
    border-bottom: 1px #F2CDAF solid;
    align-items: center;
    padding: var(--default-gap);
    gap: var(--default-gap);
}

.selectOptions li:last-of-type {
    border-bottom: 0;
}

.itemLogin .itemLeftText {
    margin-left: .2rem;
    width: 1rem;
    color: #b03b99;
    justify-content: left;
    flex-shrink: 0;
}

.itemLogin .itemLeftText img {
    height: .6rem;
    vertical-align: text-top;
}

.selectBox {
    color: #5a81b7;
    line-height: .36rem;
}


.selectShowbox .TextCountry {
    display: inline-block;
    width: 2rem;
    text-align: center;
}

.selectOption {
    position: absolute;
    top: .92rem;
    left: 0;
    z-index: 99;
    display: none;
    width: 100%;
    border: .01rem solid #b8c0b7;
    background: #ecf0f2;
}

.selectOption li {
    display: flex;
    display: -webkit-flex;
    color: #5a81b7;
    justify-content: center;
}

.selectOption li.selected {
    background-color: var(--deactive-background-color);
    color: #999;
}

.selectOption li:hover {
    background: #5a81b7;
    color: #fff;
}

.selectBox img {
    margin-right: .05rem;
    padding: .01rem;
    height: .33rem;
    border: .01rem #c7cacc solid;
    border-radius: .05rem;
    background: #c9f3f7;
    vertical-align: text-top;
}

.itemLogin li .itemInput {
    overflow: hidden;
    width: 100%;
    outline: 0;
    border: none;
    background: 0 0;
    color: #333;
    font-size: .52rem;
}

.copylink {
    position: absolute;
    bottom: 0;
    left: 0;
    height: .5rem;
    width: 100%;
    margin-top: 100px;
    background-color: #fff;
    color: #b03b99;
    text-align: center;
}

.copyBtn {
    display: inline-block;
    width: 1rem;
}

.copyBtn img {
    width: 100%;
}

.color-darkgray {
    color: #c7d6cf !important;
}

.login-text {
    display: block;
    margin-top: -.3rem;
    color: #ff7dbd;
    text-align: center;
    text-decoration: underline;
    font-weight: 700;
}

.itemLogin li .identifyingCodeImg {
    display: inline-block;
    margin-left: .02rem;
    width: 1.74rem;
    height: .55rem;
    background-color: #fff;
    background-color: #fff;
    vertical-align: middle;
}

.itemLogin li .identifyingCodeTxt {
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0 1rem;
    color: #933903;
    background: #FED822;
    background: linear-gradient(#FEED2F, #FEC314);
    vertical-align: middle;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    align-items: center;
    justify-content: center;
    border-radius: var(--default-border-radius);
}

.itemLogin li .identifyingCodeTxt.grayColor {
    color: #fff;
    background: #C7C7C7;
    background: linear-gradient(#C7C7C7, #9B9B9B);
}


.itemLogin li .itemInputSmall {
    width: 1.5rem;
}

.itemLogin li .itemInputHref {
    color: #258dcf;
}

.itemLogin li .itemInputHref span {
    text-decoration: underline;
}

.loginWrapper .itemRegistered {
    height: auto;
}

.loginWrapper .itemRegistered li {
    height: .94rem;
}

.loginWrapper .itemRegistered .itemId {
    height: .6rem;
    border-top-right-radius: .1rem;
    border-top-left-radius: .1rem;
    background: #72d3b4;
    color: #fff;
    text-align: center;
    line-height: .6rem;
}

.loginWrapper .itemReview {
    padding: .4rem 0;
    height: auto;
    text-align: center;
}

.loginWrapper .itemReview .itemText {
    color: #5acca9;
}

.loginWrapper .itemReview .btnContact {
    display: block;
    margin: .4rem auto 0;
    width: 5.12rem;
    height: 1.02rem;
    border: .02rem #f09533 solid;
    border-radius: 1rem;
    color: #d9701a;
    text-align: center;
    font-weight: 700;
    font-size: .38rem;
    line-height: 2.6;
}

.btnLogin {
    display: block;
    margin: 0 auto;
    background: var(--main-background-gradient);
    color: #025d3e;
    text-align: center;
    font-weight: 700;
    line-height: 2.6;
    background-size: 100% 100%;
    border-radius: var(--default-border-radius);
    width: 96%;
    height: 1.68rem;
    font-size: .54rem;
}

.TextTips {
    display: block;
    margin-bottom: .4rem;
    color: #19725f;
    text-align: center;
    text-decoration: underline;
    font-weight: 700;
    font-size: .38rem;
}

.ico-service {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: .94rem;
    height: .94rem;
    background-image: url("../../images/agent/icon/ico_service.png");
}


.topUp {
    width: 100%;
    height: .86rem;
    background-color: #fff;
    color: #178e6a;
    text-align: center;
    font-weight: 700;
    font-size: .42rem;
    line-height: 2.2;
}

.itemTop .itemText span {
    color: #d7680e;
}

.itemNav {
    color: var(--deactive-color);
    text-align: center;
    line-height: 3;
    border-radius: 10rem;
    overflow: hidden;
    background: var(--deactive-background-color);
    direction: ltr;
    display: flex;
    font-size: 1rem;

}

.itemNav li {
    position: relative;
    display: flex;
    display: -webkit-flex;
    padding: 0 .05rem;
    float: left;
    border-radius: 10rem;
    flex: 1;
    line-height: 1;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.5rem;
}

.itemNav li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -.02rem;
    margin-top: -.1rem;
    width: .02rem;
    height: .2rem;
    background: #E5E5E5;
}

.itemNav li:last-child::after {
    background: none;
}

.itemNav li.active {
    color: #d7680e;
    font-weight: bold;
    background: #FDCE22;
    background: linear-gradient(#FDCE22, #FFBC1A);
}


.itemContent {
    position: relative;
    background-color: white;
}

.itemContent .itemTitle {
    height: .44rem;
    border-top: .01rem #EEEBEA solid;
    background: #F8F5F4;
    overflow: hidden;
    direction: inherit;
}

.itemContent .itemTitle marquee {
    position: relative;
    margin: 0 0 0 1rem;
    width: 6.8rem;
    height: .44rem;
    color: #e0752f;
    font-size: .16rem;
    line-height: .44rem;
    overflow: hidden;
    direction: initial;
}

.itemContent .itemTitle span {
    padding-left: 20px;
    display: inline-block;
}

.laba {
    position: absolute;
    top: .12rem;
    left: .2rem;
    z-index: 2;
    width: .25rem;
    height: .2rem;
}

.font-bule {
    color: #186654;
}

.itemContent .itemTitle a {
    position: absolute;
    top: .08rem;
    right: .15rem;
    color: #43ad81;
    text-decoration: underline;
    font-size: .2rem;
}

.itemContent .rechargeSro {
    position: absolute;
    top: 1.4rem;
    right: 0;
    bottom: 0;
    left: 0;
    float: right;
    overflow: hidden;
    margin: .15rem 0 .2rem .17rem;
}

.itemContent .banckSro {
}

.itemContent .itemCardList,
.itemContent .rechargeList {
    display: grid;
    padding: 0 0.5rem;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    gap: 0.5rem;
}

.itemContent .rechargeList li {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 140.6%;
    background-repeat: no-repeat;
    background-size: contain;
    direction: ltr;
    font-family: simhei;
    font-weight: bold;
}


.itemContent .bag-type-list .list01 {
    background-image: url("../../images/trade/card_01.png");
    color: #855044;
}

.itemContent .bag-type-list .list02 {
    background-image: url("../../images/trade/card_02.png");
    color: #444075;
}

.itemContent .bag-type-list .list03 {
    background-image: url("../../images/trade/card_03.png");
    color: #843C1C;
}

.itemContent .bag-type-list .list04 {
    background-image: url("../../images/trade/card_04.png");
    color: #3B1795;
}

.itemContent .bag-type-list .list05 {
    background-image: url("../../images/trade/card_05.png");
    color: #EFE7FE;
}

.itemContent .bag-type-list .list06 {
    background-image: url("../../images/trade/card_06.png");
    color: #FFCE65;
}

.itemContent .bag-type-list .zsList01 {
    background-image: url("../../images/trade/diamond/img_zsk_1.png");
    color: #855044;
}

.itemContent .bag-type-list .zsList02 {
    background-image: url("../../images/trade/diamond/img_zsk_2.png");
    color: #444075;
}

.itemContent .bag-type-list .zsList03 {
    background-image: url("../../images/trade/diamond/img_zsk_3.png");
    color: #843C1C;
}

.itemContent .bag-type-list .zsList04 {
    background-image: url("../../images/trade/diamond/img_zsk_4.png");
    color: #3B1795;
}

.itemContent .bag-type-list .zsList05 {
    background-image: url("../../images/trade/diamond/img_zsk_5.png");
    color: #EFE7FE;
}

.itemContent .bag-type-list .zsList06 {
    background-image: url("../../images/trade/diamond/img_zsk_6.png");
    color: #FFCE65;
}


.rechargeList .bullion1 {
    background-image: url("../../images/trade/bullion_01.png");
    color: #855044;
}

.rechargeList .bullion2 {
    background-image: url("../../images/trade/bullion_02.png");
    color: #444075;
}

.rechargeList .bullion3 {
    background-image: url("../../images/trade/bullion_03.png");
    color: #843C1C;
}

.rechargeList .list01 {
    background-image: url("../../images/trade/card_pay_01.png");
    color: #855044;
}

.rechargeList .list02 {
    background-image: url("../../images/trade/card_pay_02.png");
    color: #444075;
}

.rechargeList .list03 {
    background-image: url("../../images/trade/card_pay_03.png");
    color: #843C1C;
}

.rechargeList .list04 {
    background-image: url("../../images/trade/card_pay_04.png");
    color: #3B1795;
}

.rechargeList .list05 {
    background-image: url("../../images/trade/card_pay_05.png");
    color: #EFE7FE;
}

.rechargeList .list06 {
    background-image: url("../../images/trade/card_pay_06.png");
    color: #FFCE65;
}

.rechargeList .zsList01 {
    background-image: url("../../images/trade/diamond/diamond_01.png");
    color: #855044;
}

.rechargeList .zsList02 {
    background-image: url("../../images/trade/diamond/diamond_02.png");
    color: #444075;
}

.rechargeList .zsList03 {
    background-image: url("../../images/trade/diamond/diamond_03.png");
    color: #843C1C;
}

.rechargeList .zsList04 {
    background-image: url("../../images/trade/diamond/diamond_04.png");
    color: #3B1795;
}

.rechargeList .zsList05 {
    background-image: url("../../images/trade/diamond/diamond_05.png");
    color: #EFE7FE;
}

.rechargeList .zsList06 {
    background-image: url("../../images/trade/diamond/diamond_06.png");
    color: #FFCE65;
}


.itemContent .rechargeList li .bullion-num,
.itemContent .rechargeList li .goldNum,
.itemContent .rechargeList li .diamondNum {
    position: absolute;
    top: var(--default-gap);
    right: var(--default-gap);
    display: flex;
    align-items: center;
    font-size: 1.2rem;
}

.itemContent .rechargeList li .bullion-num i,
.itemContent .rechargeList li .goldNum i,
.itemContent .rechargeList li .diamondNum i {
    display: inline-block;
    margin-left: var(--default-gap);
    vertical-align: text-top;
    width: 1.5rem;
    height: 1.5rem;
}

.itemContent .rechargeList li .bullion-num i {
    background: url("../../images/trade/bullion_icon.png") no-repeat;
    background-size: contain;
}

.itemContent .rechargeList li .goldNum i {
    background: url("../../images/trade/ico_gold.png") no-repeat;
    background-size: contain;
}

.itemContent .rechargeList li .diamondNum i {
    background: url("../../images/trade/diamond/img_zs.png") no-repeat;
    background-size: contain;
}


.itemContent .bag-type-list li .cardNum {
    position: absolute;
    bottom: 2.8rem;
    font-size: 1.5rem;
    left: 50%;
    text-align: center;
    color: white;
    transform: translateX(-50%);
    text-shadow: 0 0 .05rem rgba(46, 15, 0, .25);
}

.rechargeList .btnPay {
    position: absolute;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    background: var(--success-background-gradient);
    color: white;
    text-align: center;
    padding: 0.2rem;
    border-radius: var(--default-border-radius);
    box-sizing: border-box;


}


.itemContent .rechargeList li:nth-child(2n+1) {
}

.rechargeList li .rechargeTitle {
    padding: .25rem 0 0;
    color: #fff;
    text-align: center;
}

.rechargeList .itemImg img {
    height: 2.16rem;
}

.rechargeList .itemPrice {
    margin-top: .03rem;
    height: .53rem;
    text-align: center;
    font-weight: 700;
}

.rechargeList .itemNum {
    top: 2.2rem;
    right: .02rem;
    padding-right: .1rem;
    width: 2.28rem;
    height: .48rem;
    background: url(../../images/trade/item_num.png) no-repeat;
    background-size: 100% 100%;
    color: #ffec47;
    text-align: right;
    font-weight: 700;
    line-height: .48rem;
}

.itemContent .itemCardList .itemPrice {
    height: .53rem;
    text-align: center;
    font-weight: 700;
}

.itemContent .hubImg {
    position: absolute;
    right: .2rem;
    bottom: .2rem;
    width: 1.54rem;
    height: 1.6rem;
    background: url(../../images/trade/hub_img.png) no-repeat;
    background-size: 100% 100%;
}

.itemContent .itemCardList li {
    position: relative;
    margin-bottom: .05rem;
    width: 3.42rem;
    height: 2.11rem;
    background: url(../../images/trade/bg_list.png) no-repeat;
    background-size: cover;
}

.itemContent .itemCardList li:nth-child(odd) {
    margin-right: .1rem;
}

.itemContent .itemCardList li.active,
.itemContent .itemCardList li:hover {
    background-image: url(../../images/trade/bg_list_on.png);
}

.itemContent .itemBot {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
}

.itemContent .itemBot .btnContact {
    top: 0;
    right: .2rem;
    color: #43ad81;
    text-decoration: underline;
}

.itemContent .itemBot .btnContact img {
    margin-right: .1rem;
    width: .45rem;
}

.itemContent .itemCardList .itemImg img {
    height: 1.46rem;
}

.itemContent .itemCardList .itemPrice {
    height: .53rem;
    text-align: center;
    font-weight: 700;
}

.itemContent .itemCardList .itemNum {
    color: #ffec47;
    font-weight: 700;
}

.itemContent .TextNum {
    margin-bottom: .25rem;
    color: #43ad81;
    text-align: center;
}

.itemContent .TextNum span {
    margin: 0 .05rem;
    color: #ec3838;
}


.itemRecord {
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
}

.itemRecord.hide {
    display: none;
}

.itemRecordSubordinate {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background: #fff;
}

.cariBtn {
    background: #40EB96;
    background: linear-gradient(#40EB96, #4CCA8B);
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--default-gap);
    min-width: 5rem;
    border-radius: var(--default-gap);
}

.itemCardNum {
    display: flex;
    display: -webkit-flex;
    background: white;
    justify-content: center;
    gap: var(--default-gap);
}

.itemCardNum input {
    box-sizing: border-box;
    padding: var(--default-gap);
    border: .01rem #DEDCDC solid;
    outline: none;
    background: var(--deactive-background-color);
    color: #bcbcbc;
    flex: 1;
}

.itemCardNum .selectId {
    position: relative;
    outline: none;
    width: 6rem;
    border: .1rem #FFC59B solid;
    border-radius: .4rem;
    color: #d7680e;
    direction: ltr;
}

.dropdown-btn {
    padding: 0 1rem 0 .2rem;
    height: 100%;
    cursor: pointer;
    border-radius: .4rem;
    box-sizing: border-box;
}

.select-dropdown {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #FFC59B;
    max-height: 10rem;
    width: 100%;
    overflow-y: auto;
    z-index: 1;
}

.dropdown-btn::after {
    content: '';
    position: absolute;
    right: .2rem;
    top: 50%;
    transform: translateY(-50%);
    border: solid transparent;
    border-width: .3rem .3rem 0 .3rem;
    border-top-color: #d7680e;
}

.dropdown-btn.show::after {
    transform: rotate(180deg);
}

.select-dropdown div {
    padding: .3rem;
    cursor: pointer;
}

.select-dropdown div:hover {
    background-color: #f1f1f1;
}

.itemRecord .listTitle {
    margin: 0 auto;
    width: 100%;
    background: #FFDAB2;
    display: flex;
    align-items: center;
    color: var(--sub-main-color);
}

.itemRecord .listTitle span,
.listContent li span {
    float: left;
    text-align: center;
    padding: var(--default-gap);
}

.itemRecord .listTitle span {
    flex: 1;
    text-align: center;
}

.itemRecord .listContent {
    min-height: 20rem;
    position: relative;
}


.itemRecord .listContent li {
    background: #fff;
    border-bottom: .01rem #F6DBC5 solid;
    display: flex;
    color: var(--main-color);
}

.itemRecord .listContent li span {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-row .cell0 {
    flex: 1.7;
    direction: ltr;
}

.card-row .cell1 {
    flex: 1;
}

.card-row .cell2 {
    flex: 0.6;
}

.card-row .cell3 {
    flex: 1;
    direction: ltr;
}

.gift-row .cell0 {
    flex: 1.7;
    direction: ltr;
}

.gift-row .cell1 {
    flex: 1.1;
}

.gift-row .cell2 {
    flex: 1;
}

.gift-row .cell3 {
    flex: 1.1;
    direction: ltr;
}


.itemRecord .recordTotal {
    position: fixed;
    left: 0;
    bottom: 1.7rem;
    width: 100%;
    color: #d9701a;
    font-weight: bold;
    text-align: center
}

.itemRecord .page {
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
    justify-content: space-evenly;
    direction: ltr;
    color: #896f50;
    font-size: .42rem;
}

.itemRecord .page .ico {
    display: block;
    background: #FFD04B;
    background: linear-gradient(#FFD04B, #FFBC43);
    text-align: center;
    color: #fff;
    padding: var(--default-gap);
    border-radius: 0.3rem;
    border: none;
}

.itemRecord .page .ico:disabled {
    background: #C6C6C6;
    background: linear-gradient(#C6C6C6, #9C9C9C);
}


.itemRecord .page ul {
    height: 100%
}

.itemRecord .page ul li {
    display: inline-block;
    margin: 0 .1rem;
    color: #97a1a3;
    line-height: 2.2;
    background: none;
}

.itemRecord .page .text-page {
    padding: .02rem .1rem;
    width: .5rem;
    margin: 0 .15rem;
    background: #fff;
    color: #97A1A3;
    text-align: center;
    border: .01rem #C4C9D1 solid;
    border-radius: .02rem;
}

.itemRecord .page .btnTentukan {
    display: block;
    width: 1.23rem;
    height: .4rem;
    background: url("../../images/trade/btn_rentukan.png") no-repeat;
    background-size: 100% 100%;
}

.cardTab {
    display: flex;
    display: -webkit-flex;
    background: var(--deactive-background-color);
    -webkit-justify-content: center;
    justify-content: center;
    color: var(--deactive-color);
    box-sizing: border-box;
    border-radius: var(--default-gap);
    border: .02rem #DDDBDB solid;
    font-weight: bold;
    direction: ltr;
}

.cardTab li {
    width: 50%;
    border-radius: 0.5rem;
    text-align: center;
    padding: var(--default-gap);
}

.cardTab li.active {
    border: .01rem #FFA343 solid;
    color: var(--main-color);
    background: #FEC71F;
}

.selfTab {
    display: flex;
    display: -webkit-flex;
    background: var(--deactive-background-color);
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    direction: ltr;
    border-radius: 5rem;
}

.selfTab li {
    width: 50%;
    border-radius: 5rem;
    text-align: center;
    padding: 0.25rem;
}

.selfTab li.active {
    border: 1px solid #FFA343;
    color: var(--main-color);
    background: linear-gradient(#ffea77, #ffce4f);
}

.listContent .empty {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    color: #e8b797;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--default-gap)
}

.listContent .empty img {
    display: block;
    height: 6rem;
}


.bonus-sub-tab {
    display: none;
}

.bonus-sub-tab.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.searchContent {
    top: 2.4rem;
    bottom: .2rem;
    left: 50%;
    padding-bottom: .4rem;
    width: 7.06rem; /* height: auto; */
    background: #fff;
    box-shadow: 0 0 .05rem rgba(215, 104, 14, .2);
    -webkit-border-radius: .08rem;
    border-radius: .08rem;
    overflow: hidden;
    direction: ltr;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.searchContent .searchTitle {
    height: .75rem;
    background: #FFDAB2;
    color: #d7680e;
    text-align: center;
}

.searchContent .text-01 {
    width: 1.27rem;
}

.searchContent .text-02 {
    width: 1.3rem;
}

.searchContent .text-03 {
    width: 1.54rem;
}

.searchContent .text-04 {
    width: 1.44rem;
}

.searchContent .text-05 {
    width: 1.79rem;
}

.searchContent .searchList {
    top: .75rem;
    bottom: .5rem;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.searchContent .searchList li {
    position: relative;
    display: flex;
    display: -webkit-flex;
    padding: 0.2rem 0.2rem;
    color: #a23d01;
    text-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
}

.searchContent .searchList li.no-top-padding {
    padding: 0;
}

.searchContent .searchList li.no-top-padding::after {
    width: 0;
}

.searchContent .searchList li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 95%;
    height: .02rem;
    background: #F8E6D6;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}


.searchContent .searchList .text-01 {
    text-align: left;
}

.searchContent .searchList .text-05 {
    text-align: right;
}

.searchContent .searchList [class*= "btn"] {
    float: right;
    margin: 0;
    width: 1.37rem;
    height: .47rem;
    line-height: .47rem;
    font-weight: normal;
}

.bonusPersonal .searchContent {
    top: 1rem;
}

.bonusPersonal .searchContent .text-01 {
    width: auto;
}

.bonusPersonal .searchContent .text-02 {
    width: auto;
    color: #26b61f;
    font-weight: bold;
    text-align: right;
    margin-right: 0.1rem;
}

.bonusPersonal .searchContent .text-03 {
    width: 3.24rem;
}

.bonusPersonal .searchContent .searchList {
    top: 0;
}

.bonusPersonal .searchContent .text-02 .icoBonus {
    margin-left: .2rem;
    height: .3rem;
}

/*.page {*/
/*    left: 0;*/
/*    bottom: .1rem;*/
/*    font-size: .42rem;*/
/*    width: 100%;*/
/*    text-align: center;*/
/*}*/

/*.page button {*/
/*    position: relative;*/
/*    font-size: .36rem;*/
/*    color: #616e78;*/
/*    border: .02rem #434751 solid;*/
/*    border-radius: .1rem;*/
/*}*/

/*.page button.icoPre::after,*/
/*.page button.icoNext::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: .1rem;*/
/*    width: .15rem;*/
/*    height: .2rem;*/
/*    background: url("../../images/agent/icon/ico_page_arrow.png") no-repeat;*/
/*    background-size: 100% 100%;*/
/*    -webkit-transform: translateY(-50%);*/
/*    transform: translateY(-50%);*/
/*}*/

/*.page button.icoNext {*/
/*    left: inherit;*/
/*    right: .1rem;*/
/*}*/

/*.page a {*/
/*    color: #ffaa4f;*/
/*    text-decoration: underline;*/
/*}*/


/*.page .grey {*/
/*    color: #929292;*/
/*    text-decoration: none;*/
/*}*/

/*.page .text {*/
/*    color: #e8b797;*/
/*}*/

/*.page .text span {*/
/*    color: #42E695;*/
/*}*/

#logList .txt02 i {
    display: inline-block;
    margin-left: 0.05rem;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../../images/trade/ico_gold.png) no-repeat;
    vertical-align: text-top;
    background-size: contain;
    flex-shrink: 0;
}

#logList .txt04 i {
    display: inline-block;
    margin-left: 0.05rem;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../../images/trade/diamond/img_zs.png) no-repeat;
    vertical-align: text-top;
    background-size: contain;
    flex-shrink: 0;
}

.thickdiv {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    height: 100%;
    border: 0 none;
    background: #000;
    opacity: .5;
}

.thickdivWait {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    height: 100%;
    border: 0 none;
    background: #000;
    opacity: .5;
}

#thickdivLoginInvalid {
    z-index: 110;
}

#thickdiv103 {
    z-index: 103;
}

.pup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 102;
    background: #fff;
    width: 95%;
    max-width: 576px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: var(--default-border-radius);
}

.pup .pup-title {
    color: #d7680e;
    text-align: center;
    font-weight: bold;
    background: var(--main-background-gradient);
    font-size: 1.2rem;
    padding: var(--default-gap) 0;
}

.pup .desc {
    color: #000000;
    text-align: center;
    font-weight: bold;
    font-size: .9rem;
    padding: var(--default-gap) 0;
}

.pup .pup-info {
    border: 1px solid var(--info-border-color);
    color: var(--info-color);
    background-color: var(--info-background-color);
    padding: var(--default-gap);
    border-radius: var(--default-border-radius);
}


#publicTipLoginInvalid {
    z-index: 111;
}

#publicTip103 {
    z-index: 104;
}

.pupBuy,
.pupPwd {
    top: 50%;
    left: 50%;
    margin-left: -3.44rem;
    padding-bottom: .3rem;
    width: 6.88rem;
    height: auto;
    border-radius: .1rem;
    transform: translateY(-50%);
    /* padding-top: .1rem; */
}

.pupBuy .buyTitle,
.pupPwd .buyTitle,
.pupTips .title {
    border-radius: .1rem .1rem 0 0;
    background: #FCDB51;
    color: #d7680e;
    text-align: center;
    font-weight: 700;
    line-height: .77rem;
    background: linear-gradient(#FCDB51, #FBC537);
}

.pupTips .title {
    height: .77rem;
    border-radius: .1rem .1rem 0 0;
    background: #FCDB51;
    color: #d7680e;
    text-align: center;
    font-weight: 700;
    line-height: .77rem;
    background: linear-gradient(#FCDB51, #FBC537);
}

.send-user-div {
    display: flex;
    border-radius: var(--default-border-radius);
    align-items: center;
    box-sizing: border-box;
    gap: var(--default-gap);
    justify-content: center;
    border: 1px solid var(--deactive-border-color);
    background: var(--deactive-background-color);
    padding: var(--default-gap);
}

.send-user-div i {
    margin-left: .1rem;
    width: 2rem;
    height: 2rem;
    text-align: left;
    font-style: normal;
    background: url("../../images/trade/ico_user.png") no-repeat;
    background-size: contain;
}


.send-user-div input {
    width: 100%;
    outline: 0;
    border: none;
    border-radius: var(--default-border-radius);
    color: #444;
    background: none;
    padding: var(--default-gap);
}

.itemNum input::-webkit-input-placeholder {
    color: #BCBCBC;
}

.itemNum input::-moz-placeholder {
    color: #BCBCBC;
}

.itemNum input:-ms-input-placeholder {
    color: #BCBCBC;
}

.pupBuy .itemPrice {
    color: #f7fec6;
    text-align: center;
}

.pupBuy .itemPrice img {
    margin-right: .15rem;
    height: .6rem;
    vertical-align: text-top;
}

.itemBtn {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    gap: var(--default-gap);
    margin: var(--default-gap);
}

.itemBtn > button {
    flex: 1;
}

.button-common {
    padding: var(--default-gap);
    border: none;
    border-radius: var(--default-border-radius);
    font-weight: bold;
    font-size: 1.1rem;
}

.button-success {
    background: var(--success-background-gradient);
    color: #025d3e;
}

.button-error {
    background: var(--error-background-gradient);
    color: white;
}

.itemBtn .btn-sell-confirm,
.itemBtn .btn-buy-confirm {
    background: var(--success-background-gradient);
    border: none;
}

.itemBtn .btn-buy-confirm:disabled {
    background: var(--deactive-background-color);
}

.itemBtn .btn-sell-cancel,
.itemBtn .btn-buy-cancel {
    background: var(--success-background-gradient);
    border: none;
    background: #FF7E4B;
    background: linear-gradient(#FF7E4B, #FF6C44);
    text-shadow: 0 .02rem 0 rgba(236, 62, 21, .5);
}

.itemBtn .btn-buy-confirm:disabled {
    background: var(--deactive-background-color);
}


.pupBuy .buyTip {
    margin: .35rem auto;
    padding: 0 .1rem;
    width: 6.5rem;
    height: 1.51rem;
    border-radius: .1rem;
    color: #f49c62;
    line-height: 0.5rem;
    background: #FBF4EF;
    box-sizing: border-box;
    border: .01rem #FFC195 solid;
}


.buy-confirm-container span {
    display: inline-block;
    width: 8rem;
    text-align: left;
}

.buy-confirm-container .buyTip-yellow {
    color: var(--sub-main-color);
    font-style: normal;
}

.pup .pup-text {
    color: var(--sub-main-color);
    text-align: center;
    font-size: 1.2rem;
}

.pupBuy .buyExplain {
    margin: -.2rem .52rem 0;
    width: 5.64rem;
    color: #f5ccff;
}

.sureImg {
    display: block;
    margin: .4rem auto;
    width: 1.7rem;
    height: 1.68rem;
    background: url(../../images/trade/sure_ico.png) no-repeat;
    background-size: 100% 100%;
}

.sureText {
    border-radius: .1rem;
    color: var(--pup-text-light-color);
    text-align: center;
}


.sureText .tipTxt_01 {
    display: block;
    margin: 0 auto;
    width: 3.9rem;
    line-height: 1.1;
    text-align: center;
    color: #fbf5ab;
}

.sureText .tipTxt02 {
    display: block;
    margin: 0 auto;
    padding-top: .02rem;
    width: 4.9rem;
    line-height: 1.1;
}

.color-yellow {
    color: #d7680e;
    font-style: normal;
}


.pupOver .itemTitle {
    color: #f49c62;
    background: #FBF4EF;
    border: .01rem #FFC195 solid;
    padding: var(--default-gap);
}


@keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

.pupOver .itemTitle span {
    display: block;
    padding: .1rem .2rem 0;
    line-height: 1.4;
}


/*.pupOver .totalNum .addNum {*/
/*    margin: 0 .39rem 0;*/
/*    padding-top: .31rem;*/
/*    width: 5.7rem;*/
/*    text-align: center;*/
/*}*/

.totalNum .addNum .addBtn {
    display: inline-block;
    width: 1.23rem;
    height: .61rem;
    background-image: url(../../images/trade/subtract_btn.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #d9701a;
    vertical-align: middle;
    text-align: center;
    font-weight: 700;
    line-height: .61rem;
}

.totalNum .addNum .numInput {
    display: inline-block;
    background-color: transparent;
    color: #ad4907;
    vertical-align: middle;
    text-align: center;
    font-weight: 700;
    line-height: .6rem;
    border-radius: .05rem;
    margin: 0 .1rem;
    direction: ltr;
}

.totalNum .totalTip {
    margin: var(--default-gap) 0;
    color: #e8b797;
    text-align: center;
}

.totalNum .totalTip i {
    font-style: normal;
}

.totalNum .totalTip .icoBonus {
    height: .42rem;
}

.pupOver .itemPriceList {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--default-gap);
    box-sizing: border-box;
}

.pupOver .itemPriceList li {
    height: 3.3rem;
    border: .02rem solid #FFB74D;
    border-radius: var(--default-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
}

.pupOver .itemPriceList li.flexTwo {
    width: 99%;
    text-align: center;
    color: #ad4907;
    line-height: .91rem;
    direction: ltr;
}

.pupOver .itemPriceList li.grayColor {
    border: .01rem #CCCCCC solid;
    background-color: #aaaaaa;
    color: #808080;
    filter: grayscale(100%);
    opacity: 0.5;
}

.pupOver .itemPriceList li.active {
    background: #FFD74E;
    background: linear-gradient(#FFD74E, #FFBD43);
}

.pupOver .itemPriceList li img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pupOver .itemPriceList li.flexTwo .icoBonus {
    position: relative;
    top: -.05rem;
    margin-right: .1rem;
    width: .9rem;
    height: .7rem;
}

.pupOver .itemPriceList li .itemNum span {
    letter-spacing: -.02rem;
    font-weight: 700;
}

.pupOver .itemPriceList li .itemPrice {
    border-top: .01rem #31a78d solid;
    color: #1c6959;
    text-align: center;
}

.pupOver .itemPriceList li .itemSale {
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding-top: .05rem;
    padding-left: .03rem;
    width: .96rem;
    height: .39rem;
    background: url(../../images/trade/ico_sale.png) no-repeat;
    background-size: cover;
}

.pupOver .itemPayList {
    overflow: hidden;
    margin: .15rem 0 .3rem;
    height: 3.4rem;
}

.pupOver .itemPayList li {
    position: relative;
    display: inline-block;
    margin-bottom: .1rem;
    margin-left: .2rem;
    width: 2.88rem;
    height: .71rem;
    border-radius: .1rem;
    background: #fcffdd;
    box-shadow: .02rem .02rem .03rem #2b917b;
}

.pupOver .itemPayList li.active::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.83rem;
    height: .68rem;
    border: .03rem #f85959 solid;
    border-radius: .1rem;
    content: "";
}

.pupOver .itemPayList li img {
    height: .71rem;
}

.pupOver .btnSure {
    display: block;
    margin: 0 auto .4rem;
    width: 3.05rem;
    height: .82rem;
    border: .02rem #19725f solid;
    border-radius: 1rem;
    color: #d9701a;
    text-align: center;
    font-weight: 700;
    line-height: 2;
}

.pupOver .itemTxt,
.pupBuy .itemTxt {
    background-color: #FFDAB2;
    color: #d7680e;
    text-align: center;
    font-weight: 700;
}

.pupOver .totalNum .addNum,
.pupBuy .totalNum .addNum {
    margin: 0 auto;
    padding: .1rem;
    display: flex;
    display: -webkit-flex;
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: #FBF4EF;
    -webkit-align-items: center;
    align-items: center;
    border: .01rem #FFC195 solid;
}

.pupOver .addNum .btn,
.pupBuy .addNum .btn {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.pupOver .addNum .btn.btnReduce,
.pupBuy .addNum .btn.btnReduce {
    background-image: url("../../images/trade/btn_reduce.png")
}

.pupOver .addNum .btn.btnAdd,
.pupBuy .addNum .btn.btnAdd {
    background-image: url("../../images/trade/btn_add.png")
}


.pupBuy .buyTip em {
    display: block;
    margin: 0 auto;
    padding-top: .26rem;
    width: 5.35rem;
    font-style: normal;
}

.rechargeNum {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #d9701a;
    text-align: center;
    font-weight: 700;
}

.pagingBox {
    margin-bottom: .1rem;
    height: .45rem;
}

.pagingBox .paging {
    margin: 0 1rem 0;
    width: 6rem;
}

.pagingBox .paging .page {
    display: inline-block;
    width: .42rem;
    height: .42rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    line-height: .42rem;
}

.pagingBox .paging a {
    margin-left: .1rem;
    color: #97a1a3;
}

.paging .page.last-page {
    background-image: url(../../images/trade/last_page_btn.png);
}

.paging .page.next-page {
    background-image: url(../../images/trade/next_page_btn.png);
}

.pagingBox .paging .pageNum {
    display: inline-block;
    margin-left: .05rem;
    width: .82rem;
    height: .4rem;
    border: .02rem solid #c4c9d1;
    background-color: #fff;
    color: #97a1a3;
    vertical-align: middle;
    text-align: center;
    line-height: .43rem;
}

.pagingBox .paging .tentuBtn {
    display: inline-block;
    margin-left: -.01rem;
    width: 1.26rem;
    height: .44rem;
    background: url(../../images/trade/tentu_btn.png) no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
}

.itemInput .colorGray {
    margin-left: -2.6rem !important;
    color: gray !important;
}

.itemContent .rechargeList li:active {
    transform: scale(.95);
}

.wrongText {
    margin: .28rem auto;
    width: 5.64rem;
    height: auto;
    border-radius: .1rem;
    color: #fff;
    text-align: center;
}

.waitBox {
    top: 50%;
    left: 50%;
    margin-left: -2.67rem;
    display: flex;
    display: -webkit-flex;
    width: 5.34rem;
    height: 1.54rem;
    border-radius: .1rem;
    background: url(../../images/trade/bg_waitBox.png) no-repeat;
    background-size: 100% 100%;
    transform: translateY(-50%);
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-flow: column;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    text-align: center;
}

.waitBox .waitTxt {
    padding-top: .2rem;
    width: 4.42rem;
    color: #fff;
    font-style: normal;
    line-height: 1.4;
}

.waitBox .timingNum {
    margin: .1rem auto;
    text-align: center;
    font-style: normal;
    color: #510041;
}

.pupPwd .install-list {
    margin: .4rem auto 0;
    width: 5.7rem;
    height: 2.85rem;
}

.service {
    position: absolute;
    left: .1rem;
}

.service img {
    width: .8rem;
    height: .57rem;
}

.service_title {
    text-align: center;
    color: #b9fff0;
}


.btnOk {
    display: block;
    margin: .15rem auto;
    width: 3.08rem;
    height: .81rem;
    background: url(../../images/trade/btn_ok.png) no-repeat;
    background-size: 100% 100%;
}

.btnDown {
    display: block;
    margin: .15rem auto;
    width: 3.08rem;
    height: .81rem;
    background: url(../../images/trade/btn_down.png) no-repeat;
    background-size: 100% 100%;
}

.btnNoticeJump {
    display: block;
    margin: .15rem auto;
    width: 3.08rem;
    height: .81rem;
    background: url(../../images/trade/lihat.png) no-repeat;
    background-size: 100% 100%;
}

.close-btn {
    position: absolute;
    top: .2rem;
    right: .23rem;
    display: block;
    width: .36rem;
    height: .38rem;
    background: url(../../images/trade/change_btn.png) no-repeat;
    background-size: 100% 100%;
}

#paypalBtn {
    margin: .2rem auto;
    display: block;
    background: transparent;
    border: none;
}


.applyTip106 {
    position: fixed;
    top: 4.3rem;
    left: 50%;
    padding-bottom: .3rem;
    z-index: 106;
    margin-left: -3.17rem;
}

.pupTips {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -2.76rem 0 0 -3.18rem;
    width: 6.36rem;
    height: 3.53rem;
    z-index: 200;
}

.pupTips .icoSucess {
    display: block;
    margin: .35rem auto;
    width: 1.69rem;
    height: 1.69rem;
    background: url(../../images/trade/ico_success.png) no-repeat;
    background-size: 100% 100%;
}

.pupTips .icoFailure {
    display: block;
    margin: .35rem auto;
    width: 1.64rem;
    height: 1.65rem;
    background: url(../../images/trade/ico_failure.png) no-repeat;
    background-size: 100% 100%;
}


.pupTips .txtContent {
    margin: 0 auto;
    padding: .2rem;
    width: 5.56rem;
    height: 1.5rem;
    line-height: 1;
    color: #f49c62;
    border-radius: .1rem;
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pupTips .btnOK {
    display: block;
    margin: .2rem auto 0;
    width: 3.08rem;
    height: .8rem;
    text-align: center;
    color: #fff;
    line-height: .8rem;
    background: #40EB96;
    background: linear-gradient(#40EB96, #4CC98B);
    border-radius: .1rem;
}

.thickdiv105 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    border: 0 none;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 105;
}

.selectOptions div {
    position: absolute;
    left: 0;
    top: -.02rem;
    z-index: -1;
}

.selectOptions p {
    height: 0.7rem;
    color: var(--main-color);
    font-weight: bold;
    border-radius: .08rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

.activePageNum {
    color: #b03b99 !important;
}


.wrapperApply .textIllustrate {
    padding: .2rem .25rem;
    color: #a23d01;
    box-sizing: border-box;
}

.wrapperApply .applyForm {
    margin: 0 auto;
    padding-bottom: .2rem;
    width: 7.06rem;
    background: #fff;
    box-shadow: 0 0 .05rem rgba(215, 104, 14, .2);
    -webkit-border-radius: .08rem;
    border-radius: .08rem;
    overflow: hidden;
}

.wrapperApply .applyForm .tips {
    padding: .05rem .25rem;
    margin-bottom: .15rem;
    background: #FFDAB2;
    color: #d7680e;
}

.wrapperApply .applyForm .tips img {
    margin-left: .1rem;
    width: .27rem;
}

.wrapperApply .applyForm .tipsText {
    padding: 0 .25rem;
    color: #949494;
}

.wrapperApply .applyForm .formList li {
    position: relative;
    margin: .2rem auto 0;
    width: 6.53rem;
    height: .95rem;
}

.wrapperApply .applyForm .formList li input {
    padding: 0 .8rem 0 .2rem;
    width: 100%;
    height: 100%;
    background: var(--deactive-background-color);
    border: .01rem #ECEBEB solid;
    color: #4c4c4c;
    -webkit-border-radius: .12rem;
    border-radius: .12rem;
    outline: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

.wrapperApply .applyForm .formList li input:focus {
    background-color: #fff;
    box-shadow: 0 0 0 2px #cbd5e0;
}

/* .wrapperApply .applyForm .formList li input:valid {border: 1px solid #E49037;}
.wrapperApply .applyForm .formList li input:invalid {border: 1px solid #ECEBEB;} */
.wrapperApply .applyForm .formList li [class*="ico"] {
    position: absolute;
    top: 50%;
    right: .2rem;
    width: .41rem;
    height: .41rem;
    background-repeat: repeat;
    background-size: 100% 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.wrapperApply .applyForm .formList li .icoUsername {
    background-image: url("../../images/trade/apply/ico_user.png");
}

.wrapperApply .applyForm .formList li input:valid + .icoUsername {
    background-image: url("../../images/trade/apply/ico_user_org.png");
}

.wrapperApply .applyForm .formList li .icoPassword {
    background-image: url("../../images/trade/apply/ico_password.png");
}

.wrapperApply .applyForm .formList li input:valid + .icoPassword {
    background-image: url("../../images/trade/apply/ico_password_org.png");
}

.wrapperApply .applyForm .formList li .icoId {
    background-image: url("../../images/trade/apply/ico_id.png");
}

.wrapperApply .applyForm .formList li input:valid + .icoId {
    background-image: url("../../images/trade/apply/ico_id_org.png");
}

.wrapperApply .applyForm .formList li .icoWhatsapp {
    background-image: url("../../images/trade/apply/ico_whatsapp.png");
}

.wrapperApply .applyForm .formList li input:valid + .icoWhatsapp {
    background-image: url("../../images/trade/apply/ico_whatsapp_org.png");
}

.wrapperApply .applyForm .formList li .icoCareer {
    background-image: url("../../images/trade/apply/ico_career.png");
}

.wrapperApply .applyForm .formList li input:valid + .icoCareer {
    background-image: url("../../images/trade/apply/ico_career_org.png");
}

.wrapperApply .applyForm .formList li .icoAddress {
    background-image: url("../../images/trade/apply/ico_address.png");
}

.wrapperApply .applyForm .formList li input:valid + .icoAddress {
    background-image: url("../../images/trade/apply/ico_address_org.png");
}

#submit-button {
    margin: .2rem auto 0;
    width: 6.56rem;
    height: .88rem;
    line-height: .88rem;
}

.hfq-info {
    display: flex;
    column-gap: 5px;
    background: var(--deactive-background-color);
    border: 2px solid rgb(233, 233, 233);
    border-radius: 0.1rem;
    padding: 5px;
    margin: 0.1rem 0;
    align-items: center;
    color: #ad4907;
}

.bonus-info {
    display: flex;
    column-gap: 5px;
    background: var(--deactive-background-color);
    border: 2px solid rgb(233, 233, 233);
    border-radius: 0.1rem;
    padding: 5px;
    margin: 0.1rem 0;
    align-items: center;
    color: #ad4907;
}

.exchange-btn-wrapper {
    direction: ltr;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    bottom: 0;
    width: 100%;
    left: 0;
}

.exchange-btn {
    display: flex;
    column-gap: 5px;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(#ffd74e, #ffb742);
    padding: 5px;
    margin-bottom: 0.1rem;
    border: 2px solid rgb(245, 192, 96);
    border-radius: 0.1rem;
    color: #ad4907;
}

.btn-disabled {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#hfq-amount {
    color: rgb(39, 192, 37);
}

#exchange-bonus-extra-amount {
    color: #f27b2d
}


.btn-pay {
    font-family: simhei, serif;
    margin: .1rem auto;
    width: 2.65rem;
    height: .65rem;
    border-radius: .05rem;
    background: #40EB96;
    background: linear-gradient(#40EB96, #4CC98B);
    color: #fff;
    text-align: center;
    text-shadow: 0 0 .05rem rgb(33, 147, 90);
    box-shadow: .01rem .01rem 0 #6AB06D inset;
    border: 0;
}

.bonus-max-rate {
    position: absolute;
    left: 3.73rem;
    top: 0.68rem;
    transform: translate(-50%, -50%);
}

.bonus-max-rate img {
    height: 0.35rem;
}

.bonus-act-rate {
    direction: ltr;
    position: absolute;
    left: 1.75rem;
    top: 1.35rem;
    transform: translate(-50%, -50%);
}

.bonus-act-dates {
    direction: ltr;
    position: absolute;
    left: 3.57rem;
    top: 0.80rem;
    color: #ff9934;
    transform: translate(-50%, -50%);
    font-size: 0.21rem;
}

.bonus-act-rate img {
    height: 0.75rem;
}

.user-prop-div {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1;
    justify-content: center;
}

.count-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--default-gap);
    direction: ltr;
}

.count-panel .num {
    color: black;
    text-align: center;
    height: 3rem;
    outline: none;
    border: 1px solid #dadada;
    flex: 1;
}

.count-panel .control {
    width: 4.2rem;
    height: 3rem;
    background-color: rgb(244, 244, 244);
    border-radius: var(--default-border-radius);
}

.count-panel .control.active {
    background-color: rgb(6, 182, 253);
}

.plus-control {
    background-repeat: no-repeat;
    background-image: url("../../images/trade/ico_add_grey.png");
    background-position: center;
    background-size: 36%;
}

.plus-control.active {
    background-image: url("../../images/trade/ico_add_white.png");
}

.minus-control {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/trade/ico_minus_grey.png");
    background-size: 36%;
}

.minus-control.active {
    background-image: url("../../images/trade/ico_minus_white.png");
}


.buy-confirm-info i {
    font-style: normal;
}

.grey-div {
    background-color: #F8F5F4;
}

.flex-rows-div {
    box-sizing: border-box;
    padding-inline: 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.2rem;
}

.sub-user-row {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 0.2rem;
    background-color: white;
    border-radius: 0.2rem;
    direction: ltr;
    gap: 0.2rem;
}

.sub-user-row img {
    width: 0.5rem;
}

.sub-user-row .send-button {
    background-color: rgb(60, 177, 102);
    border-radius: 1rem;
    padding: 0.15rem;
    font-size: 12px;
    min-width: 1.5rem;
    border: none;
}

.sub-user-row .send-button:disabled {
    background-color: lightgray;
}

.sub-user-row .info {
    flex: 1;
}

.info .player-name {
    color: black;
    font-size: 0.3rem;
    font-weight: bold;
}

.info .player-id {
    color: #c8c8c8;
    font-size: 0.25rem;
}

.dialog-div {
    position: fixed;
    z-index: 102;
}

.batch-bag-div {
    bottom: 0;
    left: 0;
    min-height: 300px;
    width: 100%;
    background-color: white;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
}

.batch-bag-div-title {
    background-color: rgb(243, 236, 220);
    color: saddlebrown;
    font-size: 0.36rem;
    text-align: center;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
}

.hf-batch-bag-div-title {
    background-color: #f9dcb5;
    color: #c24e01;
    text-align: center;
}

.mini-count-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--default-gap);
    direction: ltr;
}

.mini-count-panel .num {
    color: black;
    text-align: center;
}

.mini-count-panel .control {
    width: 2rem;
    height: 2rem;
    background-color: rgb(244, 244, 244);
    border-radius: 50%;
}

.mini-count-panel .control.active {
    background-color: rgb(6, 182, 253);
}

.bag-item {
    direction: ltr;
    display: flex;
    justify-content: stretch;
    align-items: center;
    padding: 0.2rem;
    gap: 0.2rem;
    border-bottom: 1px solid #dfdfdf;
    box-sizing: border-box;
}

.bag-item > img {
    width: 0.9rem;
}

.bag-item .info {
    flex: 1;
    color: black;
}

.submit-button-div {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.2rem;
    box-sizing: border-box;
    z-index: 1;
    background-color: white;
    display: flex;
    direction: ltr;
    gap: 0.4rem;
    border-top: 1px solid #dfdfdf;
    align-items: center;
}

.total-div {
    position: relative;
}

.total-div > img {
    width: 0.9rem;
}

.total-num-div {
    font-weight: bold;
    color: black;
}

.info .name-div {
    font-size: 0.24rem;
    color: #dfdfdf;
}

.total-div > span {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    border-radius: 50%;
    width: 0.4rem;
    height: 0.4rem;
    white-space: nowrap;
    font-size: 0.24rem;
    transform: translateX(50%);
    text-align: center;
    line-height: 0.4rem;
    font-weight: bold;
}

.submit-button-div > .info {
    flex: 1;
}

.submit-button-div .send-button {
    background-color: rgb(60, 177, 102);
    border-radius: 1rem;
    font-size: 0.36rem;
    height: 70%;
    width: 2.5rem;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 5px 5px lightgray;
}

.bag-scroll-div {
    padding-bottom: 1.4rem;
    overflow: scroll;
    max-height: 5rem;
}

.info > div {
    color: black;
}

.info > .gold-info {
    color: red;
    padding: .1rem .2rem;
    width: 2rem;
    text-align: right;
    background-color: rgb(245, 245, 245);
    border-radius: 5px;
}

.info > .hf-info {
    color: black;
    padding: .1rem .2rem;
    text-align: right;
    background-color: rgb(245, 245, 245);
    border-radius: 5px;
}

.bag-item-display {
    position: relative;
}

.bag-item-display > img {
    width: 4.5rem;
}

.floating-gold-title {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    color: #f7d742;
    border-radius: 5px;
    text-align: center;
    left: 3%;
    bottom: 3%;
    width: 94%;
    box-sizing: border-box;
}

.floating-gold-title > img {
    width: 1rem;
}


.gold-info img {
    width: 0.4rem;
}


.mini-count-num {
    width: 3rem;
    outline: none;
    border: 1px solid #dadada;
}

.user-prop-info-wrapper {
    display: flex;
    gap: 0.1rem;
    direction: ltr;
    align-items: center;
    width: 100%;
}

.blue-button {
    background: linear-gradient(#2598c6, #4c59ca);
    border: none;
    border-radius: var(--default-border-radius);
    font-family: tahoma, sans-serif;
    font-weight: bold;
    color: white;
    padding: var(--default-gap);

}

.dialog-input-row {
    display: flex;
    color: black;
    margin: var(--default-gap);
    border-radius: 0.25rem;
    overflow: hidden;
    border: 1px solid #dadada;
}

.dialog-input-row > label {
    flex-basis: 10rem;
    background-color: var(--sub-main-background-color);
    color: var(--sub-main-color);
    text-align: center;
    font-weight: bold;
    padding: var(--default-gap);
}

.dialog-input-row > input {
    flex: 1;
    outline: none;
    border: none;
    background: var(--deactive-background-color);
    padding: var(--default-gap);
}

.dialog-input-row > .desc {
    color: #d7680e;
    padding-inline: 0.2rem;
    font-weight: bold;
}

.shop-item-title {
    text-align: center;
    width: 100%;
    margin-bottom: 0.15rem;
    background-color: orange;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 1.2rem;
}

.shop-item-title.normal {
    background-color: rgb(73, 154, 233);
}

.shop-item-title.vip {
    background-color: rgb(243, 179, 3);
}

.vip-title-img {
    height: 1rem;
}

.vip-title-img.tiny {
    height: 0.5rem;
}

.vip-item {
    position: absolute;
    left: 50%;
    top: 2.5rem;
    transform: translateX(-50%);
    width: 75%;
    background-image: url(../../images/trade/vip_exp_tag.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    color: #f3e56d;
}

.vip-item-origin {
    position: absolute;
    left: 50%;
    bottom: 0.8rem;
    transform: translateX(-50%);
    width: 75%;
    text-align: center;
    font-size: 0.28rem;
}

.vip-item-origin .title {
    font-size: 0.18rem;
}

.vip-item-origin .crossed-line {
    background: red;
    height: 0.03rem;
    width: 100%;
    position: absolute;
    top: 0.45rem;
}


.row-button-div {
    margin: var(--default-gap);
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
}

.row-button-div button {
    color: white;
    background: linear-gradient(#3eeb96, #4ecb8a);
    border: 1px solid #64e1a3;
    border-radius: 0.2rem;
    padding: 0.15rem;
}

.row-button-div button.orange {
    color: saddlebrown;
    background: linear-gradient(#FFCF4B, #FFBC43);
    border: 1px solid #e1af64;
    border-radius: 0.2rem;
    padding: 0.15rem;
}

.row-button-div button:active {
    background: linear-gradient(#4ecb8a, #3eeb96);
}

.row-button-div button.orange:active {
    background: linear-gradient(#FFBC43, #FFCF4B);
}

[step="0"] .confirm-pin-div {
    display: none;
}

[step="0"] .pin-code-div {
    display: none;
}

[step="1"] .choose-pin-type-div {
    display: none;
}


.form-div {
    margin: var(--default-gap);
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
}

.item-div {
    display: flex;
    gap: 0.25rem;
}

.item-div select {
    flex: 1;
    outline: 0;
    border: none;
    border-radius: var(--default-border-radius);
    color: #353535;
    background: #f3f3f1;
}

.item-div input {
    flex: 1;
    outline: 0;
    border: none;
    border-radius: var(--default-border-radius);
    color: #353535;
    background: #f3f3f1;
}

.item-div label {
    color: #353535;
    width: 6rem;
    text-align: end;
}

.fixed-video {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10000;
    background: black;
}

.card-wrapper {
    margin: 0.2rem;
    border-radius: 0.2rem;
    overflow: hidden;
    border: 1px solid #e3e3e3;
}

.simple-wrapper {
    padding: 0.2rem;
}

.wrapper-gray {
    background: #eeeeee;
}

.bold-text {
    font-weight: bold;
}

.wrapper-flex {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.col-flex-div {
    display: flex;
    flex-direction: column;
}

.fill-flex {
    flex: 1;
    height: 0;
}

.phone-scroll-div {
    overflow-y: auto;
}

.color-green {
    color: #4e9c75
}


.submit-button-div .hf-send-button {
    background: linear-gradient(#26e686, #0eb562);
    border: 1px solid #1bb065;
    box-sizing: border-box;
    padding: var(--default-gap) 2rem;
    border-radius: 10rem;
}

.hf-send-button:active {
    background: linear-gradient(#0eb562, #26e686);
}

.hf-send-button:disabled {
    background: linear-gradient(#dadada, #aaaaaa);
    border: 1px solid #999999;
}

.exchange-wrapper {
    display: flex;
    gap: var(--default-gap);
}

.exchange-history-btn {
    flex-basis: 10rem;
    border-radius: var(--default-border-radius);
    color: #d7680e;
    background: linear-gradient(#fdce22, #ffbc1a);
    border: 1px #fec21d solid;
}

.exchange-history-btn:active {
    background: linear-gradient(#ffbc1a, #fdce22);
}

.phone-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    border-radius: 0.2rem;
}

.query-table {
    overflow-y: auto;
    color: #d7680e;
}

.query-table .title-div {
    background: #FFDAB2;
    font-weight: bold;
    position: sticky;
    top: 0;
}

.query-table .row {
    display: flex;
    padding-block: 0.2rem;
    border-bottom: 1px solid gray;
    align-items: center;
}

.query-table .row > div {
    flex: 1;
    text-align: center;
}

.query-table .row > div span {
    margin-inline-start: 0.08rem;
}


.edit-form-item {
    display: flex;
    padding: 0.2rem;
    align-items: center;
    gap: 0.2rem;
}

.edit-form-item label {
    width: 1.2rem;
    color: gray;
    text-align: end;
}

.edit-form-item label.required::after {
    content: '*';
    color: red;
}

.edit-form-item input {
    flex: 1;
    width: 0;
    outline: 0;
    color: #09090b;
    border: 1px solid gray;
    background: #f9f8fd;
    font-size: 0.32rem;
    padding: 0.2rem 0.1rem;
    border-radius: 0.1rem;
}

.declaration-title-div {
    color: #d7680e;
    text-align: center;
    border-top: 1px solid #d7680e;
    border-bottom: 1px solid #d7680e;
    background: rgb(255, 240, 224)
}

.declaration-detail-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.declaration-detail-row > label {
    color: #fb933e;
}

.declare-price-row {
    display: flex;
    margin: var(--default-gap);
    color: #d7680e;
    gap: var(--default-gap);
}

.declare-price-row .equal-sign {
    display: flex;
    align-items: center;
}

.declare-price {
    display: flex;
    flex: 1;
}

.declare-price input {
    flex: 1;
    width: 0;
    outline: none;
    background: rgb(243 243 243);
    box-sizing: border-box;
    padding: var(--default-gap);
    border: 0.02rem solid #dadada;
    border-bottom-left-radius: var(--default-border-radius);
    border-top-left-radius: var(--default-border-radius);
}

.declare-price div {
    color: #d7680e;
    padding: var(--default-gap);
    font-weight: bold;
    box-sizing: border-box;

    border-right: 1px solid #dadada;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    border-bottom-right-radius: var(--default-border-radius);
    border-top-right-radius: var(--default-border-radius);
}

.declare-price select, .unit-select {
    color: #d7680e;
    padding: var(--default-gap);
    font-weight: bold;
    border-right: 0.02rem solid #dadada;
    border-top: 0.02rem solid #dadada;
    border-bottom: 0.02rem solid #dadada;
    border-left: none;
    border-bottom-right-radius: var(--default-border-radius);
    border-top-right-radius: var(--default-border-radius);
    box-sizing: border-box;
    height: 100%;
}

.user-top-div {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
}

.user-self-info-div {
    flex: 1;
    display: flex;
    border: 2px solid rgb(243, 157, 65);
    border-radius: 0.1rem;
    padding: 0.1rem;
    overflow: hidden;
}

.user-self-info-div > div {
    flex: 1;
    text-align: center;
    padding: 0.1rem;
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Display ellipsis */
    max-width: 100%; /* Allow it to take full available space */
    white-space: nowrap;
}

.user-self-info-div > div:first-child {
    border-left: 2px solid rgb(243, 157, 65);
}


.icon-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    position: relative;
    width: 2rem;
}

.icon-btn img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
    display: block;
}


.icon-btn:active {
    background-color: rgba(0, 0, 0, 0.2); /* Hover background color */
    border-radius: 50%; /* Optional: round background */
}

.refresh-btn-div {
    display: flex;
    justify-content: center;
}

.bonus-log .row > div:nth-child(2) {
    flex: 1.3;
}

.bonus-log .row > div:nth-child(5) {
    flex: 0.6;
}

.order-detail-div {
    color: #d7680e;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-block: 0.3rem;
    font-weight: bold;
}

.order-detail-div > img {
    width: .48rem;
}

.detail-item-div {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.detail-item-div > img {
    width: .6rem;
}

.order-user-div {
    border: 1px solid rgb(255, 203, 167);
    border-radius: 0.1rem;
    text-align: center;
    margin: 0.3rem;
    overflow: hidden;
    background: rgb(251, 244, 239);
}

.order-user-div > div:first-child {
    color: #d7680e;
    background: rgb(255, 218, 178);
}

.order-user-div > div:nth-child(2) {
    font-weight: bold;
    font-size: 1rem;
    color: brown;
}

.create-order-btn-div {
    margin: 0.2rem;
}

.create-order-btn {
    width: 100%;
    background: #40EB96;
    background: linear-gradient(#40EB96, #4CCA8B);
    border-radius: .1rem;
    color: white;
    text-align: center;
    border: none;
}

.row-icon {
    width: .35rem;
}

.row-arrow {
    width: .3rem;
    margin-right: .15rem;
}

.state-div button {
    width: 100%;
    height: .75rem;
    background: #40EB96;
    background: linear-gradient(#40EB96, #4CCA8B);
    border-radius: .1rem;
    border: none;
    color: white;
}

.send-limit {
    direction: ltr;
}

.notice-container {
    position: relative;
    background-color: white;
    font-size: 1rem;
}

.notice-container > .speaker {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 1.1rem;
    height: 100%;
    background-color: var(--deactive-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.1rem;
}

.notice-container > .speaker > img {
    width: 100%;
}

.nav-container {
    background-color: white;
    padding: var(--default-gap);
}

/* Container for the marquee effect */
.marquee-container {
    overflow: hidden; /* Hide overflowing content */
    white-space: nowrap; /* Keep text on one line */
    width: 100%; /* Full width; adjust as needed */
    box-sizing: border-box;
    background-color: var(--deactive-background-color);
}

/* The scrolling text */
.marquee-text {
    display: inline-block;
    animation-iteration-count: infinite;
    animation-name: marquee-content;
    animation-timing-function: linear;
    padding: 5px 15px 5px 15px;
    color: var(--main-color);
    direction: ltr;
}

/* Keyframes for left-to-right scroll (continuous loop) */
@keyframes marquee-content {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(var(--end-pos, 0));
    }
}

.infull-bullion {
    color: var(--main-color);
    font-size: 1rem;
}

.infull-bullion > img {
    width: 2rem !important;
}

.price-container {
    padding: var(--default-gap);
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
}

.box-container {
    padding: var(--default-gap);
}

.button-container {
    display: flex;
    gap: var(--default-gap);
    justify-content: center;
}

.button-container > button {
    min-width: 5.5rem;
}

.flex-col-container {
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
}

.pad-container {
    padding: 0 var(--default-gap);
}

.button-confirm-gold-store {
    color: var(--success-color);
    width: 100%;
}

.pup .pup-gray-tip {
    color: var(--deactive-color);
    text-align: center;
}

.large-text {
    font-size: 3rem;
    display: flex;
    align-items: center;
}

.main-text {
    color: var(--main-color);
}

.gold-icon {
    width: 1.2rem;
    height: 1.2rem;
    background: url("../../images/trade/ico_gold.png") no-repeat;
    background-size: contain;
    display: inline-block;
    margin-inline-end: 0.3rem;
}

.gold-icon.large {
    width: 3rem;
    height: 3rem;
    margin-inline-end: 0.8rem;
}

.bullion-icon {
    width: 1rem;
    height: 1rem;
    background: url("../../images/trade/bullion_icon.png") no-repeat;
    background-size: contain;
    display: inline-block;
    margin-inline-end: 0.3rem;
}

.bullion-icon.large {
    width: 3rem;
    height: 3rem;
    margin-inline-end: 0.8rem;
}

.store-info {
    display: flex;
    gap: var(--default-gap);
    margin: var(--default-gap);
    border: 1px solid var(--info-border-color);
    background-color: var(--info-background-color);
    padding: var(--default-gap);
    border-radius: var(--default-border-radius);
}

.store-info > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.store-info > div:nth-child(1) {
    width: 65%;
}

.store-pop-info {
    color: var(--main-color) !important;
    display: flex;
    flex-direction: column;
    gap: var(--default-gap);
    align-items: center;
}

.store-row .cell0 {
    flex: 1.7;
    direction: ltr;
}

.store-row .cell1 {
    flex: 1;
}

.store-row .cell2 {
    flex: 1.1;
}

.store-title {
    display: flex;
    justify-content: end;
    padding: 0 var(--default-gap);
}

.store-gold-info {
    display: flex;
    align-items: center;
    border: 1px solid var(--info-border-color);
    background: var(--info-background-color);
    border-radius: 10rem;
    padding: 0.25rem;
    width: max-content;
}


.store-selling {
    color: var(--success-color) !important;
    background-color: var(--success-background-color) !important;
}

.itemSubordinate {
    padding-bottom: 6.4rem;
}

.list-subordinate {
    margin: 0 auto .7rem;
    width: 90%;
    background: #ECF6E5;
    border: .13rem #9DD178 solid;
    font-size: .9rem;
    color: #92b373;
    border-radius: .5rem;
    overflow: hidden;

    direction: ltr;
}

.list-subordinate.enable {
    background: #FBF4EF;
    border-color: #FFC195;
    color: #F5B086;
}

.list-subordinate.disable {
    background: #F6F6F6;
    border-color: #CFCFCF;
    color: #B4B4B4;
}

.list-subordinate .list-title {
    padding: .5rem 0;
    background: #CDF1B1;
    border-bottom: .01rem #B7E296 solid;
    font-weight: bold;
    gap: 1.4rem;
}

.list-subordinate.enable .list-title {
    background: #FFDAB2;
    border-color: #FFCEA4;
}

.list-subordinate.disable .list-title {
    background: #E1E1E1;
    border-color: #D8D8D8;
}

.list-subordinate .dark {
    color: #22BE0D;
}

.list-subordinate .light {
    color: #75D06B;
}

.list-subordinate.enable .dark {
    color: #d7680e;
}

.list-subordinate.enable .light {
    color: #DE8B58;
}

.list-subordinate.disable .dark {
    color: #B0B0B0;
}

.list-subordinate.disable .light {
    color: #B0B0B0;
}

.list-subordinate .list-title span {
    margin-right: .3rem;
    font-size: 1rem;
}

.list-subordinate .list-info {
    padding: .5rem .8rem;
    margin: 0 auto;
    width: 96%;
    border-bottom: .03rem #9DD178 solid;
    justify-content: space-between;
    box-sizing: border-box;
}

.list-subordinate.enable .list-info {
    border-bottom: #FEC095;
}

.list-subordinate.disable .list-info {
    border-bottom: #CFCFCF;
}

.list-subordinate .list-info span {
    font-weight: bold;
}

.list-subordinate .list-details {
    margin: 0 auto;
    width: 96%;
}

.list-subordinate .list-details li {
    padding: .3rem 2.8rem .3rem 0;
    text-align: right;
}

#subordinate-aside .btn-list {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 50%;
    padding: 1.1rem 0;
    width: 92%;
    background: #fff;
    justify-content: center;
    transform: translateX(-50%);

}

#subordinate-aside .btn-list .btn-add {
    padding: .8rem 0;
    width: 100%;
}

.itemRebate .user-info {
    margin: 0 auto;
    padding: 2rem 0;
    width: 94%;
    background: #FFF0E0;
    border: .1rem #FFCCA8 solid;
    color: #F49C62;
    font-size: 1.3rem;
    border-radius: .3rem;
    font-weight: bold;
}

.itemRebate .user-info .info {
    display: flex;
    align-items: center;
    direction: ltr;

}

.info.fz-small {
    font-size: .9rem
}

.itemRebate .user-info .info span {
    margin-right: .6rem;
    width: 14rem;
    color: #20BF24;
    font-size: 1.6rem;
    text-align: right;
}

.itemRebate .btn-list {
    padding: 1rem 0;
    margin: 0 auto;
    width: 94%;
    background: #fff;
    justify-content: center;
}

.itemRebate .btn-list .btn-add {
    padding: .8rem 0;
    width: 100%;
}

.pup-subordinate-manage .user-info {
    padding: .6rem 0;
    background: #FFF0E0;
    border: .1rem #FFCCA8 solid;
    color: #F49C62;
    font-size: 1.3rem;
    border-radius: .3rem;
}

.pup-subordinate-manage .user-info .info {
    display: flex;
    justify-content: center;
    direction: ltr;

}

.pup-subordinate-manage .user-info .info span {
    margin-right: .4rem;
    color: #d7680e;
}

.pup-subordinate-manage .btn-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    direction: ltr;
}

.pup-subordinate-manage .btn-list button {
    margin-top: .6rem;
    margin-bottom: .2rem;
    padding: .8rem 0;
    flex: 0 0 48%;
}

.pup-subordinate-manage .button-container,
.pup-subordinate-add .button-container {
    padding: .5rem 0 .5rem;
}

.pup-subordinate-manage .button-container button {
    padding: .8rem 0;
    width: 100%;
}

.pup-subordinate-add {
    direction: ltr;
    color: #696969;
    font-size: 1rem;
}

.pup-subordinate-add .info {
    margin: 0 auto;
    padding: .4rem 0;
    display: flex;
    width: 96%;
    gap: 0 .5rem;
    align-items: center;
    justify-content: flex-start;
}

.pup-subordinate-add .info .text {
    width: 5rem;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 1.2rem;
    font-weight: bold;
}

.pup-subordinate-add .info .text.ft-s {
    font-size: .86rem;
}

.pup-subordinate-add .info input,
.pup-subordinate-add .info select {
    padding: .8rem .4rem;
    flex: 1;
    background: #F3F3F3;
    border: .1rem #DEDCDC solid;
    border-radius: .6rem;
    outline: none;
    box-sizing: border-box;
    text-align: right;
    font-size: 1.2rem;
    color: #000;
}

.pup-subordinate-add .info input[disabled] {
    background: #fff;
}

.pup-subordinate-add .button-container button {
    padding: .8rem 1.6rem;
}