.rank-table {
    margin: 0 auto px2rem(100) auto;
    .game-table-bg {
        margin: 0 auto;
        width: px2rem(1250);
        padding: px2rem(16);
        background: #4b3a2a;
        border-radius: 15px;
        border: 1px solid #5d4d39;
    }
    .player-name {
        display: inline-block;
        width: px2rem(146);
        text-align: left;
    }
    .table-nav {
        display: flex;
        justify-content: center;
        button {
            background: url("../../assets/but_touzhu_y.png") no-repeat;
            background-size: 100% 100%;
            width: px2rem(180);
            height: px2rem(55);
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            cursor: pointer;
            text-transform: uppercase;
            border: none;
            font-size: px2rem(24);
            color: #c2aa8b;
            position: relative;
            margin: px2rem(68);
            &.active {
                color: #ffffff;
                background-image: url("../../assets/but_touzhu_x.png");
            }
        }
    }
    table {
        width: 100%;
        margin: 0 auto;
        color: #ffffff;
        text-align: center;
        table-layout: fixed;
        border-collapse: collapse;
        tbody {
            background-color: #2b5e38;
            box-shadow: 0 0 px2rem(18) #000000;
            border: px2rem(8) solid #2b5e38;
        }
        &.en-lang {
            td {
                padding: px2rem(18) px2rem(8);
            }
            .type {
                font-size: px2rem(16);
                margin: 0 px2rem(2);
            }
            .dice {
                margin: 0 px2rem(2);
            }
        }
        tr {
            background: #234a2c;
            border-bottom: px2rem(5) solid #2b5e38;
            &:last-child {
                border-bottom: none;
            }
        }
        th {
            font-size: px2rem(18);
            color: #f1e6dc;
            padding-bottom: px2rem(18);
            font-weight: normal;
        }
        td {
            font-size: px2rem(18);
            line-height: px2rem(55);
            .result {
                margin: 0 px2rem(15);
            }
            .offer-result {
                margin-right: px2rem(8);
            }
            .money {
                color: #d5c965;
                padding: 0 px2rem(5);
                vertical-align: middle;
            }
            .money-tate {
                color: #23b14d;
                vertical-align: middle;
            }
            .eos-icon {
                background: url("../../assets/icon_eos.png");
                background-size: 100%;
                display: inline-block;
                vertical-align: middle;
                width: px2rem(16);
                height: px2rem(24);
                background-size: contain;
                margin-right: px2rem(4);
            }
            .money-icon {
                background: url("../../assets/icon_eos.png") no-repeat;
                background-size: 100% 100%;
                display: inline-block;
                vertical-align: middle;
                width: px2rem(22);
                height: px2rem(26);
                background-size: contain;
            }
            .link {
                cursor: pointer;
                color: #ffffff;
                text-decoration: none;
                &:hover {
                    border-bottom: 1px solid #ffffff;
                }
            }
            &.history-td {
                color: #ffffff;
                text-shadow: none;
            }
            &.left {
                text-align: left;
                position: relative;
                &.enable {
                    cursor: pointer;
                }
            }
        }
    }
    .type {
        display: inline-block;
        margin: 0 px2rem(4);
        min-width: px2rem(20);
        vertical-align: middle;
    }
    .dice {
        display: inline-block;
        vertical-align: middle;
        width: px2rem(30);
        height: px2rem(30);
        margin: 0 px2rem(4);
    }
    .load-more {
        text-align: center;
        font-size: px2rem(26);
        color: #ffffff;
        margin-top: px2rem(20);
    }
    .vip-level {
        display: inline-block;
        display: inline-block;
        width: px2rem(46);
        height: px2rem(38);
        vertical-align: middle;
    }
    @for $i from 1 through 10 {
        .icon-level#{$i} {
            background: url("../popup/vip/img/icon-level#{$i}.png") no-repeat;
            background-size: 100%;
        }
    }
    &.td-underline {
        .enable {
            &:hover {
                &::after {
                    content: "";
                    position: absolute;
                    left: px2rem(16);
                    width: px2rem(220);
                    bottom: px2rem(10);
                    height: 1px;
                    background-color: #ffffff;
                }
            }
        }
    }
}

.moblie-list {
    display: none;
    background-color: #2b5e38;
    border-radius: px2rem(10);
    overflow: hidden;
    box-shadow: 0 0 px2rem(5) #000;
    margin: px2rem(12) px2rem(16);
    .list-item {
        margin: px2rem(10) px2rem(10) px2rem(20);
        background-color: #234a2c;
        padding-bottom: px2rem(10);
        .top {
            height: px2rem(52);
            line-height: px2rem(52);
            background-color: #1a3f23;
            color: #ffffff;
            font-size: px2rem(24);
            padding-left: px2rem(10);
            .amount {
                float: right;
                margin-right: px2rem(10);
            }
        }
        .content {
            padding: px2rem(16) px2rem(16) px2rem(8);
            padding-right: 0;
            color: #ffffff;
            font-size: 0;
        }
        .bottom {
            height: px2rem(40);
            line-height: px2rem(40);
            text-align: right;
            font-size: px2rem(24);
            color: #fff;
            padding-right: px2rem(10);
        }
        .m-dice-item {
            display: inline-block;
            vertical-align: top;
            width: px2rem(30);
            height: px2rem(30);
            margin-right: px2rem(10);
        }
        .type {
            display: inline-block;
            margin: 0 px2rem(6);
            font-size: px2rem(28);
        }
        .money-tate {
            color: #23b14d;
        }
        .right {
            float: right;
            font-size: px2rem(24);
            margin-right: px2rem(12);
            em {
                color: #e8d86c;
            }
            .status {
                color: #23b14d;
                display: inline-block;
                margin-left: px2rem(6);
            }
            .game-eos-icon {
                margin-right: px2rem(10);
            }
        }
    }
    .game-eos-icon {
        transform: scale(1.3);
        margin-left: px2rem(10);
        vertical-align: middle;
    }
}

@media #{$phone} {
    .moblie-list {
        display: block;
    }
    .rank-table {
        background-color: #4b3a2a;
        margin: 0 px2rem(10);
        border-radius: px2rem(20);
        overflow: hidden;
        box-shadow: 0 0 px2rem(10) #000;
        .table-nav {
          padding: px2rem(10) 0;
          background-color: #372617;
          border-bottom: px2rem(1) solid #251d15;
            button {
                width: px2rem(184);
                height: px2rem(59);
                margin: 0 px2rem(36);
                line-height: px2rem(59);
            }
        }
        .game-table-border {
            width: 100%;
            border-radius: 10px;
        }
        .game-table-bg {
            width: 100%;
            box-sizing: border-box;
            border-radius: 0;
            padding: 0;
        }
        table {
            display: none;
        }
    }
}

.huge-table {
    &.en-lang {
        td {
            &:nth-child(4) {
                font-size: px2rem(16);
            }
        }
    }
}