body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #2b2929;
    color: white;

}
.titleyc {
    color: #5e7797;
    font-size: 36px;
}
header {
    background-color: #444;
    padding: 1em;
    text-align: center;
}

    header h1 {
        color: #00d3ee;
    }

nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #333;
    padding: 1em 0;
}

    nav a {
        padding: 1em;
        margin: 0.5em 0;
        text-decoration: none;
        color: #ebffbd;
        text-align: center;
        width: 90%;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgb(66 207 221);
        background-color: #444;
        transition: background-color 0.3s ease;
        font-weight: bold;
    }

        nav a:hover {
            background-color: #6f3333;
        }

.content {
    padding: 2em;
    text-align: center;
}


.table {
    border-collapse: collapse;
    margin: 5px auto;
    text-align: center;
}

    .table td, table th {
        border: 1px solid #614f06;
        color: #fbd2d2;
        height: 24px;
        font-size: 12px;
        font-weight: bold;
    }

    .table thead th {
        background-color: #000000;
        font-size: 12px;
    }

    .table tr:nth-child(odd) {
        background: #342c2c;
        color: #fbd2d2; 
    }

    .table tr:nth-child(even) {
        background: #242121;
        color: #fbd2d2;
    }

    .table td em {
        text-align: center;
        background: #F76464;
        width: 36px;
        color: #fff;
        padding: 0 10px;
        line-height: 22px;
        display: inline-block;
        border-radius: 100px;
        margin-right: 5px;
    }

    .table td span {
        text-align: center;
        background: #00fa2d;
        width: 36px;
        color: #fff;
        padding: 0 10px;
        line-height: 22px;
        display: inline-block;
        border-radius: 100px;
        margin-right: 5px;
    }

.tablezy {
    border-collapse: collapse;
    margin: 2px auto;
    text-align: center;
}

.table th {
    border: 1px solid #614f06;
    color: #bbb;
    height: 24px;
    font-size: 14px;
    /*font-weight: bold;
    color: #7acd7a;*/
}

.tablezy th {
    border: 1px solid #614f06;
    color: #bbb;
    height: 24px;
    font-size: 10px;
    /*font-weight: bold;
    color: #7acd7a;*/
}
    .tablezy td {
        color: #7acd7a;
        border: 1px solid #614f06;
        font-size: 10px;
    }


.menu {
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}

    .menu a {
        text-decoration: none;
        width:100%;
        color: #333;
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #f0f0f0;
        margin: 0 10px; /* 缩小按钮之间的间距 */
        transition: background-color 0.3s ease;
    }

        .menu a:hover {
            background-color: #ddd;
        }


.middle-column {
    border-left: 2px solid #ab8c0f;
}
.middle-column2 {
    border-right: 2px solid #ab8c0f;
}

.tablezy thead th {
    background-color: #000000;
    font-size: 10px;
}

    .tablezy tr:nth-child(odd) {
        background: #342c2c;
    }

.table tr:nth-child(even) {
    background: #242121;
}

.tablezy td em {
    text-align: center;
    background: #F76464;
    width: 36px;
    color: #fff;
    padding: 0 10px;
    line-height: 22px;
    display: inline-block;
    border-radius: 100px;
    margin-right: 5px;
}

.tablezy td span {
    text-align: center;
    background: #00fa2d;
    width: 36px;
    color: #fff;
    padding: 0 10px;
    line-height: 22px;
    display: inline-block;
    border-radius: 100px;
    margin-right: 5px;
}


.buy_choice02a {
    padding: 2px;
    overflow: hidden;
}

    .buy_choice02a ul {
    }

        .buy_choice02a ul li {
            color: #d8d1d1;
            width: 50%;
            float: left;
            padding-top: 4px;
            padding-bottom: 3px;
            padding-right: 2px;
            padding-left: 2px;
            box-sizing: border-box;
        }

            .buy_choice02a ul li p {
                background: #4d4d4d;
                padding: 0px;
                line-height: 28px;
                border: 1px solid #204622;
                overflow: hidden;
                display: flex;
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }

                .buy_choice02a ul li p span {
                    flex: 1;
                    text-align: center;
                }

                .buy_choice02a ul li p.up span {
                    background: #353146;
                }

                .buy_choice02a ul li p.down span {
                    background: #204622;
                }

                .buy_choice02a ul li p em {
                    text-align: center;
                    width: 50px;
                }
                /*-- --- --*/
        .buy_choice02a ul li p.active {
                    border: 1px solid #fffbfb;
                    color: #fff;
                }

                    .buy_choice02a ul li p.active.up span {
                        background: #DD2F2F;
                    }

                    .buy_choice02a ul li p.active.down span {
                        background: #073C7F;
                    }

                    .buy_choice02a ul li p.active em {
                        color: #fff;
                        background: #2400d2;
                    }

.order_status_dxc {
    padding: 1px 2px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
}

    .order_status_dxc ul {
        display: flex;
    }

    .order_status_dxc li {
        /* border: 1px solid #cb2929;*/
        flex: 1;
        box-sizing: border-box;
        padding: 0 0px;
        text-align: center;
        border-radius: 8px;
       
    }



    .order_status_dxc a {
        display: inline-block;
        text-align: center;
        box-sizing: border-box;
        /* border: solid 1px #da7c0c;*/
        border: solid 1px #538312;
        width: 100%;
        font-weight:bold;
        height: 32px;
        line-height: 26px;
        border-radius: 8px;
        color: #d8d1d1;
        border: solid 1px #0076a3;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top, #00adee, #0078a5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    }

    .order_status_dxc a:hover {
        background: #007ead;
        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
        background: -moz-linear-gradient(top, #0095cc, #00678e);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
    }


    .order_status_dxc a.active {
        /* background: #f60300;*/
        box-sizing: border-box;
        border-radius: 8px;
        border: solid 1px #7a84ab;
        color: #d8d1d1;
        background: -webkit-gradient(linear, left top, left bottom, from(#002bac), to(#690639));
        background: -moz-linear-gradient(top, #002bac, #690639);
    }

.order_status_tab05 {
    padding: 10px 7px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}

    .order_status_tab05 ul {
        display: flex;
    }

    .order_status_tab05 li {
        flex: 1;
        line-height: 32px;
        box-sizing: border-box;
        padding: 0 3px;
        text-align: center;
    }

    .order_status_tab05 a {
        display: inline-block;
        text-align: center;
        box-sizing: border-box;
        /* border: solid 1px #da7c0c;*/
        border: solid 1px #538312;
        width: 100%;
        height: 32px;
        line-height: 26px;
        border-radius: 8px;
        color: #d9eef7;
        border: solid 1px #0076a3;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top, #00adee, #0078a5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    }

        .order_status_tab05 a:hover {
            background: #007ead;
            background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
            background: -moz-linear-gradient(top, #0095cc, #00678e);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
        }
        .order_status_tab05 a.active {
            /* background: #f60300;*/
            box-sizing: border-box;
            border-radius: 8px;
            border: solid 1px #795d3e;
            color: #ffffff;
            background: -webkit-gradient(linear, left top, left bottom, from(#e73cff), to(#690639));
            background: -moz-linear-gradient(top, #4f2655, #690639);
        }

.menu-container {
    position: fixed; /* 固定定位，保持在页面底部 */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* 增加背景高度 */
    background-color: #333; /* 修改背景颜色 */
    display: flex;
    justify-content: space-around; /* 平均分配按钮间距 */
    align-items: center; /* 垂直居中按钮 */
    padding: 5px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.menu-button {
    text-align: center;
    padding: 5px 15px; /* 调整按钮内边距 */
    cursor: pointer;
    font-size: 18px; /* 按钮字体大小 */
    color: #bbb; /* 字体颜色 */
    text-transform: uppercase; /* 字母转换为大写 */
    border: none; /* 移除按钮边框 */
    background-color: transparent; /* 设置背景透明 */
    outline: none; /* 移除点击时的轮廓 */
    transition: background-color 0.3s; /* 添加过渡效果 */
    font-weight: bold;
}

    .menu-button:hover {
       
        background-color: rgba(125, 121, 121, 0.25);
        border-radius: 20px;
        
    }

.menu-buttonAct {
    background-color: rgba(125, 121, 121, 0.25);
    border-radius: 20px;
    padding: 5px 15px;
}
/* 响应式设计：当屏幕宽度小于等于600px时，调整菜单按钮的样式 */
@media screen and (max-width: 600px) {
    .menu-container {
        padding: 5px 0; /* 减少按钮间距 */
        height: 40px; /* 增加背景高度 */
    }

    .menu-button {
        font-size: 16px; /* 减小字体大小 */
    }
}

.order_status_blue {
    padding: 1px 2px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    /*background: #d9eef7;*/
}

    .order_status_blue ul {
        display: flex;
    }

    .order_status_blue li {
        /* border: 1px solid #cb2929;*/
    flex: 1;
    box-sizing: border-box;
    padding: 0 0px;
    text-align: center;
}

    .order_status_blue a {
        display: inline-block;
        text-align: center;
        box-sizing: border-box;
        /* border: solid 1px #da7c0c;*/
        /*border: solid 1px #538312;*/
        border-radius: 10px;
        width: 100%;
        /*height: 42px;*/
        line-height: 42px;
        font-size: 16px;
        font-weight:500;
        color: #d9eef7;
        background: #fff;
        background: -webkit-gradient(linear, left top, left bottom, from(#4778ec), to(#023d53));
        background: -moz-linear-gradient(top, #4778ec, #023d53);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4778ec', endColorstr='#023d53');
    }

        .order_status_blue a:hover {
            background: #538018;
            background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
            background: -moz-linear-gradient(top, #ff1212, #0f0460);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
        }


        .order_status_blue a.active {
            background: #538018;
            background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
            background: -moz-linear-gradient(top, #ff1212, #0f0460);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
          
        }


.chat_choice {
    padding: 7px;
    overflow: hidden;
}

    .chat_choice ul {
    }

        .chat_choice ul li {
            color: #595959;
            width: 100%;
            float: left;
            padding: 0px;
            box-sizing: border-box;
        }

            .chat_choice ul li p {
                background: #1A1A1A;
                padding: 0 4px;
                border: 1px solid #212121;
                overflow: hidden;
                display: flex;
            }

                .chat_choice ul li p span {
                    color: #fff;
                    flex-basis: 44px;
                    text-align: center;
                    padding-top: 0px;
                    vertical-align: middle;
                }
                /*.chat_choice ul li p img { width: 40px;height: 40px;border-radius: 50%;}*/



                .chat_choice ul li p em {
                    flex: 1;
                    padding-left: 5px;
                }

                    .chat_choice ul li p em a {
                        display: block;
                        color: #676666;
                        font-size: 16px;
                        text-align: center;
                        padding: 3px 0;
                        border-radius: 2px;
                        margin: 4px 0;
                    }

                        .chat_choice ul li p em a.up {
                            color: #111;
                            width: 85%;
                            text-align: left;
                            padding: 5px;
                            display: inline-table;
                            background-color: #eee;
                            border: 1px solid #ddd;
                            border-radius: 14px 14px 14px 0;
                        }

                        .chat_choice ul li p em a div {
                            color: #111;
                            width: 85%;
                            text-align: left;
                            padding: 5px;
                            background-color: #eee;
                            border: 1px solid #ddd;
                            border-radius: 14px 14px 14px 0;
                        }

                        .chat_choice ul li p em a.down {
                            color: #c4c0bf;
                            font-size: 12px;
                            text-align: left;
                        }

                        .chat_choice ul li p em a.upy {
                            color: rgb(73, 73, 73);
                            background-color: rgb(92, 238, 92);
                            border: 1px solid rgb(92, 238, 92);
                            border-radius: 14px 14px 0 14px;
                            float: right;
                            width: 85%;
                            text-align: right;
                            padding: 5px;
                        }

                        .chat_choice ul li p em a.downy {
                            color: #c4c0bf;
                            font-size: 12px;
                            width: 85%;
                            text-align: right;
                            float: right;
                        }





.chathead {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.smsinput {
    width: 96%;
    height: 30px;
    border-radius: 4px;
    padding-left: 9px;
    padding-right: 9px;
    font-size: 20px;
    border: none;
}

.smsinputtouid {
    width: 60px;
    height: 30px;
    border-radius: 4px;
    padding-left: 9px;
    padding-right: 9px;
    font-size: 20px;
    border: none;
}

.smsinputtd {
    text-align: right;
}


.smsinputtdsent {
    text-align: center;
    padding-right: 5px;
    width: 57px;
}

    .smsinputtdsent a {
      
        padding-left: 9px;
        padding-right: 9px;
        margin-top: 0px;
        text-align: center;
        box-sizing: border-box;
        border: solid 1px #0c0702;
        display: inline-block;
        height: 32px;
        line-height: 32px;
        border-radius: 8px;
        color: #d9eef7;
        background: #64991e;
        background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
        background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
    }

        .smsinputtdsent a:hover {
            background: #538018;
            background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
            background: -moz-linear-gradient(top, #6b9d28, #436b0c);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
        }


.smsinputtdchajian {
    text-align: center;
    padding-left: 2px;
    width: 42px;
}

    .smsinputtdchajian a {
       
        padding-left: 2px;
        padding-right: 2px;
        margin-top: 0px;
        color: #fef4e9;
        border: solid 1px #0c0702;
        background: #f78d1d;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius: 8px;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top, #00adee, #0078a5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }

        .smsinputtdchajian a:hover {
            background: #f47c20;
            background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
            background: -moz-linear-gradient(top, #0095cc, #00678e);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
        }


 



.chatinput {
    position: fixed;
    bottom: 48px;
    height: 48px;
    width: 100%;
    line-height: 48px;
    background: #202020;
    border-bottom: 1px solid #444444;
    width: 100%;
    z-index: 2;
}



.emo {
    width: 348px;
    padding: 2px;
    background-color: #FFFFFF;
    border: 1px solid #bcbcbc;
    padding-right: 0px;
}

.emobox a {
    width: 25px;
    height: 22px;
    background-color: #FFFFFF;
    border: 1px solid #cacaca;
    text-align: center;
    padding-top: 3px;
    float: left;
    margin-right: 2px;
    margin-bottom: 2px;
    display: block;
}

    .emobox a:hover {
        width: 25px;
        height: 22px;
        background-color: #FFFFFF;
        border: 1px solid #ab683c;
        text-align: center;
        padding-top: 3px;
        float: left;
        margin-right: 2px;
        margin-bottom: 2px;
        display: block;
    }



.ejIcon {
    width: 150px;
    height: auto;
}

.spacer {
    height: 100px; /* 添加一个高度为100px的空白元素 */
}

.avatar-container {
    width: 120px; /* 缩小头像框的大小 */
    height: 120px; /* 缩小头像框的大小 */
    margin: 0 auto;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nickname {
    font-size: 24px;
    margin-bottom: 20px;
}

.expiration {
    font-size: 16px;
    margin-bottom: 10px;
}

.card {
    background-color: #373636;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* 将标题居中 */
    font-size: 15px;
    padding-bottom: 0px;
}

.logout-btn, .renew-btn, .cdkey-btn, .auto-renew-btn, .app-btn {
    position: absolute;
    background-color: #373737; /* 修改背景色 */
    color: #fff;
    border: none;
    padding: 10px 20px; /* 增加字体大小 */
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}

.module-btn {
    background-color: #373737; /* 修改背景色 */
    color: #fff;
    border: none;
    padding: 10px 20px; /* 增加字体大小 */
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}



.logout-btn {
    top: 15px;
    left: 10px;
}

.renew-btn {
    top: 15px;
    right: 10px;
}

.auto-renew-btn {
    top: 15px;
    right: 90px;
}

.cdkey-btn {
    top: 70px;
    right: 10px;
}

.app-btn {
    top: 70px;
    right: 10px;
}


.buy_choice02abs {
    padding: 2px;
    overflow: hidden;
}

    .buy_choice02abs ul {
    }

        .buy_choice02abs ul li {
            color: #d8d1d1;
            width: 50%;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-right: 2px;
            padding-left: 2px;
            box-sizing: border-box;
        }

            .buy_choice02abs ul li p {
                background: #4d4d4d;
                padding: 0px;
                /*line-height: 28px;*/
                border: 1px solid #204622;
                overflow: hidden;
                display: flex;
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }

                .buy_choice02abs ul li p span {
                    flex: 1;
                    text-align: center;
                    color: #ffe300;
                }

                .buy_choice02abs ul li p.up span {
                    background: #353146;
                    color: #ffe300;
                }

                .buy_choice02abs ul li p.down span {
                    background: #204622;
                    color: #ffe300;
                }

                .buy_choice02abs ul li p em {
                    text-align: center;
                    width: 100px;
                }
                /*-- --- --*/
                .buy_choice02abs ul li p.active {
                    border: 1px solid #fffbfb;
                    color: #fff;
                }

                    .buy_choice02abs ul li p.active.up span {
                        background: #DD2F2F;
                    }

                    .buy_choice02abs ul li p.active.down span {
                        background: #073C7F;
                    }

                    .buy_choice02abs ul li p.active em {
                        color: #fff;
                        background: #2400d2;
                    }



.game-header-room {
    font-family: jgt;
}

.game-header-room {
    font-family: PingFangSC-Regular;
    display: flex;
    background-color: #0d099b;
    padding: .3rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #000;
    border-bottom: 1px solid #70738e;
}

    .game-header-room > div {
        flex: 1;
        text-align: center;
        font-size: 15px;
        color: #fff;
        margin: 0 .2rem;
        padding: .2rem;
        border-radius: 20px;
        transition: background-color .3s ease,color .3s ease
    }

    .game-header-room .active {
        /*background-color: #eee;*/
        background-color: rgba(255, 255, 255, 1);
        color: rgb(255, 17, 17);
    }
sub,
sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}


.chat-view {
    margin: 5px;
    font-family: 黑体,serif
}
.chat-container {
    flex-direction: column;
    margin: 0;
    padding: 1.1rem 0;
    height: var(--d6c5f12a);
    overflow-y: auto
}


.addscore_a_left {
    font-size: 14px;
    color: #eee;
    display: inline-block;
    margin-right: 5px;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    border-radius: 8px;
    background: #535ca3;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.addscore_a_right {
    font-size: 14px;
    color: #eee;
    display: inline-block;
    margin-left: 5px;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    border-radius: 8px;
    background: #535ca3;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.addscore_input {
    border-radius: 20px;
    text-align: center;
    height: 28px;
    width: 100px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #e1f2ef;
}