.container-fluid { background: #FFFFFF; width: auto; height: 100%; margin: 10px; padding: 10px; border-radius: 10px; }
.btn-default { background: grey; }
.btn-block {display: block;width: 100%;}
.btn-xs {padding: 3px 5px; font-size: 85%; border-radius: 5px}
.error { color: red; }
.no-records { text-align: center; color: #000000; }
/*i.fa { margin-right: 5px;}*/
.text-bold {
    font-weight: bold;
}

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

.text-red {
    color: red;
}

.text-green {
    color: green;
}

.text-black {
    color: #333;
}

.text-coral {
    color: coral;
}

.text-skyblue {
    color: lightskyblue;
}

.text-yellow, .text-yellow a {
    color: yellow;
}

.text-blue {
    color: blue;
}
.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}
.hide {
    display: none !important;
}
.show {
    display: block !important;
}
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}
.pagebar {
    overflow: hidden; margin-bottom: 10px; color: #333333;
}
.my-login-btn { display: flex; align-items: center; justify-content: center; width:100%; border: 0; }
.my-login-btn .divider { width: 6px; background: #FFFFFF; }
.my-login-btn a {flex: 1; height: 35px; line-height: 35px; text-align: center; color: #000000; background: linear-gradient(180deg, #fee285, #d79742); border-radius: 5px;}
.my-reg-btn { background: linear-gradient(180deg, #b786ff 0%, #5d2fff 100%); width: 100%; }
#modifyPwd .form-group { margin-bottom: 15px; }
#modifyPwd .form-group label {margin-bottom: 5px; }
.marginBox { margin-left: 10px; margin-right: 10px; border-radius: 10px; background: #FFFFFF; }
.marginBox.no-bg { background: none; }
.my-btn-default, .my-btn-default:hover { background: linear-gradient(180deg, #fee285, #d79742); color: #000000; border-radius: 5px; padding: 5px 10px; border: none; line-height: 30px; }

.my-box { margin: 10px; }
.my-box .title { padding: 10px 0; overflow: hidden; }
.my-box .title a, .my-box .title button { padding: 5px 10px; }
.my-box .body { padding: 15px; background: #FFFFFF; border-radius: 10px; color: #000000; }

#changePwdForm .van-cell { padding: 0 0.3rem; }
#changePwdForm .VCommonInputBox .van-cell { font-size: 14px; }
#changePwdForm .van-field__label { width: 5rem; line-height: 130%; }

#packageDetail .row21 {}
#packageDetail .row21 img {width: 100%;display: block;}
#packageDetail .row22 {display: flex;align-items: center;justify-content: space-between;background: #22b3aa;color: #fff;margin-top: 0.5rem;}
#packageDetail .row22 .col1 {padding: 0 0.5rem;}
#packageDetail .row22 .col2 {background: #b122b3; padding: 0.3rem 0.5rem; /*text-decoration:underline;*/}
#packageDetail .row23 {display: flex;align-items: center;justify-content: space-between;padding: 1rem 0 0.3rem 0;}

#packageDetail .row24 { }
#packageDetail .row25 { padding-top: 1rem;}
#packageDetail .row26 {margin-top: 0.5rem; }
#packageDetail .row26 td {border-color: lightgrey;font-size: 92%;padding: 2px 5px;}
#packageDetail .row26 .col1 {}
#packageDetail .row26 .col2 {width: 100%;border: solid 0.05rem #ffffff;box-sizing: border-box;margin-top: 0.5rem;padding: 0.5rem;overflow: hidden;}

.record-page {flex: 1; margin-bottom: 8rem; border-radius: 10px; background: #FFFFFF; padding: 0.5rem; overflow: hidden; }
.record-page .block1 .row2 {display: flex;align-items: center;border: 1px solid #ddd;background: #f5f5f5;margin: 0.5rem;border-radius: 5px;height: 1.5rem;}
.record-page .block1 .row2 .col1 {background: #efefef;padding: 0 0.2rem;border-right: 1px solid #ddd;height: 1.5rem;display: flex;align-items: center;justify-content: center;}
.record-page .block1 .row2 .col1 img {width: 0.8rem;display: block;}
.record-page .block1 .row2 .col2 {display: flex;align-items: center;}
.record-page .block1 .row2 .col2 input {width: 100%;border: none;height: 1rem;margin: 0;box-sizing: border-box;padding: 0;background: none;outline: none;text-align: center;}
.record-page .block1 .row2 .col3 {background: #efefef;height: 1.5rem;display: flex;align-items: center;justify-content: center;padding: 0 0.3rem;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
.record-page .block2 {}
.record-page .block2 .row2 {margin: 0 0.5rem;}
.record-page .block2 .row2 select {height: 1.5rem;width: 100%;border: 1px solid #ddd;}
.record-page .block2 .row2 select option {}
.record-page .block3 {}
.record-page .block3 .row2 {display: flex;margin: 0; color: #fff;}
.record-page .block3 .row2 .col1 {flex: 1;background: #5960a6;border: 1px solid #fff;padding: 0.2rem;}
.record-page .block3 .row22 {display: flex;margin: 0.5rem;margin-top: 0;font-size: 0.55rem;color: #fff;}
.record-page .block3 .row22 .col1 {flex: 1;background: #59a0a6;border: 1px solid #fff;padding: 0.2rem;}
.record-page .block4 {}
.record-page .block4 .row2 {margin: 0.5rem 0;}
.record-page .block4 .row2 .item {background: #fff;border-radius: 10px;overflow: hidden;position: relative;margin-bottom: 0.5rem;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
.record-page .block4 .row2 .item .txt1 { /* background:#000;*/
    color: #fff;font-size: 15px;padding: 5px 10px;background-image: linear-gradient(0deg, #0161eb, #07c5ff);line-height: 20px;height: 50px;}
.record-page .block4 .row2 .item .txt1 br {}
.record-page .item .status-draw, .record-page .item .status-win, .record-page .item .status-lose {position: absolute;top: 24px;right: 0;height: 50px;width: 120px;font-size: 15px;padding: 5px 10px 5px 30px;text-align: center;background: #CCCCCC; /*border-top:20px solid transparent;border-right:50px solid red;border-bottom:20px solid transparent;*/
}
.record-page .item .status-draw {color: white;background: url("/assets_m/img/record-item-status-draw.png") no-repeat;background-size: cover;}
.record-page .item .status-win {color: aqua;background: url("/assets_m/img/record-item-status-win.png") no-repeat;background-size: cover;}
.record-page .item .status-lose {color: red;background: url("/assets_m/img/record-item-status-lose.png") no-repeat;background-size: cover;}
.record-page .block4 .row2 .item .txt2 br {}
.record-page .block4 .row2 .item .txtG {position: relative;border-bottom: 1px solid #ddd;}
.record-page .block4 .row2 .item .txtG .txt3 {font-size: 85%;padding: 10px;line-height: 150%;color: #666666;}
.record-page .block4 .row2 .item .txtG .txt3 strong {}
.record-page .block4 .row2 .item .txtG .txt3 br {}
.record-page .block4 .row2 .item .txtG .txt4 {position: absolute;bottom: 0;right: 0;padding: 0 10px 10px 10px;text-align: right;line-height: 1.6em;color: #666666;}
.record-page .block4 .row2 .item .txtG .txt4 a {color: limegreen;}
.record-page .block4 .row2 .item .txtG .txt4 p {margin: 0;font-size: 0.4rem;line-height: 20px;}
.record-page .block4 .row2 .item .txtG .txt4 br {}
.record-total {
    border-bottom: 1px solid #dddddd;
    margin-bottom: 10px;
    font-size: 100%;
    padding: 5px; color: red;
}
.record-page th, .record-page td { font-weight: normal; }

.red-bg {background: #c00 !important;}
.black-bg {background: #000 !important;}
.valid-code-input {
    margin: 10px auto;
    text-align: center;
    display: flex;
    justify-content: center;
}

.valid-code-input input {
    width: 35px;
    height: 35px;
    font-size: 20px;
    margin: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    color: #333333;
    outline: none;
}

.valid-code-input input:last-child {
    margin-right: 0;
}

/* 焦点样式 */
.valid-code-input input:focus {
    border-color: #ffa500;
    background: #d0e9c6;
}
/*倍场选择模态窗口*/
#slots_modal {
    display: none;
    width: 80%;
    height: fit-content;
    color: #FFFFFF;
    border: 1px solid #337b87;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    margin: 20% auto 0 auto;left: 10%;
}
#slots_modal p {
    color: black;font-size: 10px;text-align: left;margin: 0;line-height: 20px
}

.slots_modal-header {
    background: #337b87;
    padding: 5px 10px;
    text-align: center;
}

.slots_modal-body {
    padding: 20px 20px 0 20px;
    background: #dbeced;
}

.slots_modal-btn {
    display: inline-block;
    text-align: center;
    width: 40%;
    margin: 0 0 5% 5%;
    background: #337b87;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 2px 0;
}

.slots_modal-btn:nth-child(odd) {
    margin-left: 0;
}
.statement { color: #000000; }
.statement .current-local a { font-size: 85% !important; font-weight: normal;}
.statementBox { background: gainsboro; padding: 5px; border: 0.01rem solid #FFFFFF;}
.table-filter .form-control, .datePickView { font-size: 85% !important;}
.top, .top-up2 { color: #333333; flex: 1; margin-top: 1rem; border-radius: 10px; background: #FFFFFF; padding: 0.8rem; overflow: hidden; }

/*.top, .top-up {flex: 1; margin-bottom: 8rem; border-radius: 10px; background: #FFFFFF; padding: 0.5rem; overflow: hidden; }*/
.top-up {margin-top: 1rem;margin-bottom: 5rem; }
.top-up .block1 {}
.top-up .block1 .row2 {width: 11.62rem;margin: 0 auto 10px auto;}

.top-up .block2 {padding-top: 0.4rem;}
.top-up .block2 a {display: block;margin: auto;margin-bottom: 1.19rem;}
.top-up .block2 a img {width: 10.52rem;height: 3.57rem;display: block;margin: auto;}

.top-up2 {margin-bottom: 6rem;}
.top-up2 .block1 .ico {}
.top-up2 .block1 .ico img { width: 1.5rem; display: block; margin: auto; }
.top-up2 .block1 .ico .txt { text-align: center; font-size: 0.8rem; color: #fff; margin-top: 0.2rem;}
/*.top-up2 .block1 {margin-top: -2.5rem;position: relative;}*/
.top-up2 .block1 .row2 {background: #FFFFFF; padding: 0.5rem; border-radius: 15px; box-sizing: border-box; overflow: hidden;}
.top-up2 .block1 .row2 .col1 {border: 1px solid #fff; padding-top: 0;}
.top-up2 .block1 .row2 .col1 img {width: 100%; display: block;}
.top-up2 .block1 .row2 .col1 .t {font-size: 15px; padding: 0.2rem;}
.top-up2 .block1 .row2 .col1 .t br {}
.top-up2 .block1 .row2 .col2 {font-size: 15px;display: flex;align-items: center;margin-top: 0.5rem;}
.top-up2 .block1 .row2 .col2 .c1 { text-align: right; padding: 0 1rem;}
.top-up2 .block1 .row2 .col2 .c2 {flex: 1;}
/*.top-up2 .block1 .row2 .col2 .c2 input{width:100%;height:1.3rem;border:none;}
.top-up2 .block1 .row2 .col2 .c2 select{width:100%;height:1.3rem;border:none;color:#000;}
*/
.top-up2 .block1 .row2 .col3 { margin-top: 0.5rem;}
.top-up2 .block1 .row2 .col3 .btn {font-size: 16px;padding: 8px 16px;}
.top-up2 .block1 .row2 .col3 .c1 {font-size: 0.4rem;flex: 1;}
.top-up2 .block1 .row2 .col3 .c2 { }
.top-up2 .block1 .row2 .col3 .c2 a {width: 3.6rem;height: 1.6rem;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 5px;color: #000;font-size: 16px;}
.top-up2 .block2 { }
.top-up2 .block2 .row2 { padding: 0.5rem; }
.top-up2 .block2 .row2 .col1 { color: #b80490; font-weight: bold; padding: 0.2rem; text-align: center;}
.top-up2 .block2 .row2 .col2 { font-size: 1.2rem;text-align: center;margin-top: 0.5rem;}
.top-up2 .block2 .row2 .col3 { background: #1f70e6; width: 40%;text-align: center; border-radius: 1rem; padding: 0.2rem 0.5rem; margin: 0.5rem auto; line-height: 30px;}
.top-up2 .block2 .row2 a.copy {color: white;display: block; }
.top-up2 .block2 .row2 .col4 {text-align: center;margin-top: 0.5rem; }
.top-up2 .block2 .row2 .col5 { margin-top: 0.5rem;}
.top-up2 .block2 .row2 .col5 br {}
.top-up2 .block2 .row2 .col6 {margin-top: 0.8rem; text-align: center; line-height: 30px; /*display: flex;justify-content: space-between;align-items: center;*/}
.top-up2 .block2 .row2 .col6 .a {}
.top-up2 .block2 .row2 .col6 .b {}

.recharge-warn {
    text-align: center;
    color: red;
    margin-top: 20px;
}

.pkg-item {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 5px;
    color: #000000;
}

.pkg-item:hover {
    border-color: #1f70e6;
}

.pkg-item img {
    border-radius: 5px 5px 0 0;
    border: 0;
}

.pkg-item p {
    padding: 0;
    margin: 0;
}

.pkg-item .intro {
    padding: 5px;
    overflow: hidden;
    line-height: 22px;
}

.pkg-item .intro a {
    padding-right: 0;
    color: #888;
}

.pkg-item .choosePkg {
    float: right;
    margin: 5px;
    display: inline-flex; gap: 5px;
}
.btn-choose-package { float: right; background: linear-gradient(180deg, #fee285, #d79742); border-radius: 5px; padding: 8px 16px !important; color: #000000 !important;}
.btn-logout { color: #000000; border: 1px solid #000000; padding: 5px; border-radius: 5px; }

.btn-logout:hover { }

.announce {
    width: auto;
    height: 100%;
    margin: 10px;
    padding: 5px 0;
    border-radius: 10px;}
.announce .card { background: #FFFFFF; border: 1px solid #FFFFFF; }
.announce .card:hover { border: 1px solid #1f70e6; cursor: pointer; }
.btn-warning { background: linear-gradient(180deg, #fee285, #d79742) !important; border-color: linear-gradient(180deg, #fee285, #d79742) !important;}
.btn-group-vertical > .btn, .btn-group > .btn { background: linear-gradient(180deg, #fee285, #d79742); }
.input-group .input-group-addon { color: #000000; }
.card { color: #000000; }
input.form-control:focus { color: #000000 !important; }
select.form-control, select.form-control:focus { color: #000000 !important; }
input[type=datetime-local] { width: 110px !important;}
.datePickView i.fa { margin-right: 0;}

#contactList { display: none; padding: 5px 10px 0 10px; overflow: hidden;}
#contactList li { list-style: none; border-bottom: 1px dashed #cccccc; overflow: hidden;}
#contactList li:last-child { border-bottom: 0;}
#contactList li a { display: block; width: 100%; text-align: center; padding: 5px; }
#commCollect {display: flex;align-items: center;justify-content: space-between;background: #27282a;color: #FFFFFF;margin: 0; font-size: 14px; height: 35px; }
#commCollect .col1 {padding-left: 0.5rem; padding-top: 2px; flex: 1; }
#commCollect .col1 button { font-size: 14px; padding: 4px 8px; margin-right: 10px; background: #056125; border: 0; margin-top: -2px; border-radius: 5px; float: right; }
.float-support-btn { z-index: 9999; position: fixed; right: 1rem !important; bottom: 4rem !important; width: 50px; height: 50px; background: #705BF5; border-radius: 50%; }
.layui-layer-dialog .layui-layer-content { color: #333333; }
.floating-tips {
    position: fixed;
    width: 60px;
    bottom: 130px;
    right: 10px;
    z-index: 1;
    animation: tng 15s infinite;
}

.floating-tips img {
    width: 100%;}
@keyframes tng {
    0% {transform: translateY(0)}
    50% {transform: translateY(-250px)}
    100% {transform: translateY(0)}
}

.hot-game { margin: 10px; border-radius: 15px; background: url("../img/hot-bg.891595b3.png"); background-size: cover; padding: 6px; overflow: hidden; }
.hot-game-title { padding: 8px 10px; text-align: left; }

.hot-game .owl-nav { padding: 0; }
.hot-game .owl-nav button { background: #333333 !important; width: 30px; height: 32px; line-height: 25px !important; border-radius: 50%; }
.hot-game .owl-nav button span { font-size: 42px; font-weight: 100;}
#hot-game-carousel { }
#hot-game-carousel .owl-dots { overflow: hidden; bottom: -20px; }

.game-list { padding: 10px 10px 80px 10px; }
.game-item { margin-bottom: 10px;}
.game-list .title { display: flex; justify-items: center;  align-items: center; font-size: 100%; }
.game-list .title img { float: left; width: 40px; margin-right: 5px; }

.amount-opts {display: inline-flex; gap: .35rem; margin-top: .5rem; overflow: hidden; justify-content: stretch;flex-direction: row;flex-wrap: wrap;}
.amount-opts-item { padding: 3px 7px; border-radius: 5px; font-size: 95%;background: #0dcaf0;}
.float-mission-icon { z-index: 400; position: fixed; right: 0.6rem !important; bottom: 7.5rem !important; width: 64px; overflow: hidden; }
.float-mission-icon img { width: 100%; }
.section_nav { display: flex; width: 100%; line-height: 25px; padding: 5px 0; margin-bottom: 5px; margin-top: 5px; }
.section_nav a { display: block; flex-basis: 100%; gap: 5px; text-align: center; border-bottom: 2px solid #cccccc; background: none; color: #FFFFFF; }
.section_nav a.active { border-bottom-color: #1f70e6; color: #1f70e6; }

.login-btn, .register-btn { display: inline;
    border-radius: 1rem; padding: 5px 15px; font-size: 90%; }
.login-btn {
    background-color: hsla(0, 0%, 100%, .2) !important;

}
.register-btn {
    min-width: 1.6rem;
    color: #fff;
    background-image: linear-gradient(180deg, #eedc86 1%, #bb9b48 99%);
}
.MenuBox { margin: 0 0 0 5px;}
.game-menu { padding-top: 20px; display: flex; width: 100%; overflow: auto; justify-content: stretch; }
.game-menu .item { flex-grow: 1; text-align: center; align-items: center;
    justify-content: center;}
.game-menu .item img { border-radius: 50%; background: #1d3a61; padding: 5px; display: block; width: 50px; margin: 0 auto -8px auto; }
.game-menu .item span { display: none; }
.game-menu .item.active span { display: inline-block; background: #bb9b48; border-radius: 10px; padding: 0 5px; font-size: 11px; color: #FFFFFF; margin-top:10px;}
/* Make active image “goldish” */
.game-menu .item.active img {
    filter: hue-rotate(45deg) saturate(3) brightness(1.2);
}