@charset "UTF-8";

.wallet[data-v-7a83798f] {
    flex: 1;
    margin-left: 10px
}

.network[data-v-7a83798f] {
    overflow: hidden
}

.network .input input[data-v-7a83798f] {
    width: 100%
}

.wallet[data-v-818a63fc] {
    background: var(--wallet-bg-color);
    padding: 60px 0
}

.wallet .page[data-v-818a63fc] {
    position: relative;
    z-index: 1
}

.wallet .rank[data-v-818a63fc] {
    padding-top: 20px
}

.wallet .rank .small-card[data-v-818a63fc] {
    margin-right: 15px
}

.wallet .rank .blank[data-v-818a63fc] {
    flex: 1
}

.wallet .rank button[data-v-818a63fc] {
    padding: 4px 15px
}

.wallet .rank button img[data-v-818a63fc] {
    height: 18px
}

.wallet .rank button span[data-v-818a63fc] {
    padding: 0 15px
}

.wallet .rank .btn[data-v-818a63fc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.wallet .rank .btn[data-v-818a63fc] {
    display: flex;
    flex-direction: column
}

.wallet .rank .btn .history[data-v-818a63fc] {
    margin-top: 12px;
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: #67686c;
    text-align: right;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

@media (max-width: 800px) {
    .wallet .rank[data-v-818a63fc] {
        flex-wrap: wrap
    }

    .wallet .rank .small-card[data-v-818a63fc] {
        margin-right: 0;
        margin-bottom: 10px
    }
}

body[color-scheme=light] .wallet-outer[data-v-818a63fc] {
    position: relative;
    background-color: #fff
}

body[color-scheme=light] .wallet-outer .wallet-logo[data-v-818a63fc] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 320px
}

body[color-scheme=light] .black[data-v-818a63fc],
body[color-scheme=light] .light[data-v-818a63fc] {
    color: #000
}

body[color-scheme=light] .dark[data-v-818a63fc] {
    color: #000;
    opacity: .6
}

body[color-scheme=light] .small-card[data-v-818a63fc] {
    background: linear-gradient(90deg, #eeeeee 56.71%, #dddddd 99.91%, #cecdcb 100%)
}

.total[data-v-2ddab619] {
    padding: 30px 0;
    align-items: stretch
}

.total .cursor[data-v-2ddab619] {
    cursor: pointer
}

.total .box[data-v-2ddab619] {
    width: 24%;
    text-align: center;
    -webkit-user-select: none;
    user-select: none
}

.total .box .icon[data-v-2ddab619] {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background: #131313;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.total .box .icon img[data-v-2ddab619] {
    width: 25px;
    height: 25px
}

.total .box h4[data-v-2ddab619] {
    font-size: 18px;
    padding: 10px 0 0
}

.total .box .medium[data-v-2ddab619] {
    font-size: 12px
}

@media (max-width: 700px) {
    .total[data-v-2ddab619] {
        flex-wrap: wrap
    }

    .total .box[data-v-2ddab619] {
        width: 100%;
        margin-bottom: 10px
    }
}

body[color-scheme=light] .gbg[data-v-2ddab619] {
    background: #ffffff
}

body[color-scheme=light] .dark[data-v-2ddab619] {
    color: #000
}

.wrapper[data-v-338f2699] {
    padding-bottom: 60px
}

.wrapper .data[data-v-338f2699] {
    padding-top: 20px;
    align-items: flex-start
}

.wrapper .data .table[data-v-338f2699] {
    width: 66%
}

.wrapper .invite[data-v-338f2699] {
    background: url('./invite-3d1af1e0.png') right center no-repeat;
    background-size: 40% auto;
    width: 32%;
    position: relative;
    flex-shrink: 0;
    padding: 30px 20px
}

.wrapper .invite h4[data-v-338f2699] {
    padding-bottom: 10px;
    font-size: 18px;
    width: 65%;
    line-height: 1.3
}

.wrapper .chart-wrapper[data-v-338f2699] {
    align-items: flex-start
}

.wrapper .chart-wrapper h3[data-v-338f2699] {
    padding: 30px 0 20px
}

.wrapper .chart-wrapper>.left[data-v-338f2699] {
    width: 66%
}

.wrapper .chart-wrapper>.right[data-v-338f2699] {
    width: 32%
}

.wrapper .chart-wrapper .tpLeader[data-v-338f2699] {
    padding: 15px 14px 5px
}

.wrapper .chart-wrapper .tpLeader .tpLeaderGroup[data-v-338f2699] {
    padding: 5px 0
}

.wrapper .chart-wrapper .tpLeader .tpLeaderGroup .left[data-v-338f2699] {
    float: left
}

.wrapper .chart-wrapper .tpLeader .tpLeaderGroup .right[data-v-338f2699] {
    float: right
}

.wrapper .chart-wrapper .tpLeader .tnoticebox[data-v-338f2699] {
    margin: 5px 0;
    height: 20px
}

.wrapper .chart-wrapper .tpLeader .tnotice[data-v-338f2699] {
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    font-style: italic;
    -webkit-transform-origin: top center;
    -webkit-transform: scale(.8) translate(-1%, -30%) skew(-10deg)
}

.wrapper .chart-wrapper .tpLeader .progressBar[data-v-338f2699] {
    padding: 4px 0;
    clear: both
}

@media (max-width: 800px) {
    .wrapper .data[data-v-338f2699] {
        flex-wrap: wrap
    }

    .wrapper .data .table[data-v-338f2699],
    .wrapper .data .invite[data-v-338f2699] {
        width: 100%
    }

    .wrapper .data .invite[data-v-338f2699] {
        margin-top: 20px
    }

    .wrapper .chart-wrapper[data-v-338f2699] {
        flex-wrap: wrap
    }

    .wrapper .chart-wrapper>.left[data-v-338f2699],
    .wrapper .chart-wrapper>.right[data-v-338f2699] {
        width: 100%
    }

    .wrapper .chart-wrapper .tpLeader[data-v-338f2699] {
        width: 100%;
        margin-top: 20px
    }
}

body[color-scheme=light] .light[data-v-338f2699] {
    color: #000
}

body[color-scheme=light] .invite[data-v-338f2699] {
    background-color: #ffcb0a
}

body[color-scheme=light] .invite h4[data-v-338f2699] {
    color: #000
}

body[color-scheme=light] .invite button[data-v-338f2699] {
    color: #111319;
    background: #fff
}