/* ================================================
 * 彩票开奖号码球统一样式管理
 * 包含所有号码球、容器、布局相关样式
 * ================================================ */

/* ================================================
 * 基础颜色定义
 * ================================================ */
:root {
    --primary-color: #ff2700;
    --primary-light: #ffeaf1;
    --accent-yellow: #FFEB3B;
    --text-dark: #333;
    --text-light: #fff;
    --border-color: #ff2700;

    /* 号码球颜色 */
    --ball-red: linear-gradient(#ff3333 0%, #980a00 100%);
    --ball-blue: linear-gradient(#3198ff 0%, #0060c1 100%);
    --ball-green: linear-gradient(#1fef59 0%, #007e23 100%);
    --ball-pink: linear-gradient(#ffc3d7 0%, #e9a3ba 100%);
}

/* ================================================
 * 开奖球盒容器样式
 * ================================================ */
.open-qiu-box {
    background-color: var(--primary-light) !important;
    border: 1px solid var(--border-color) !important;
    width: 99%;
    box-sizing: border-box;
    margin: auto;
    padding: .2rem .05rem;
    border-radius: 0 0 .1rem .1rem;
}

.open-qiu-box > .head {
    display: flex;
    font-size: .28rem;
    justify-content: space-around;
}

.open-qiu-box > .head .qishu span {
    color: var(--primary-color);
}

.open-qiu-box > .head .text {
    color: var(--primary-color);
    font-size: .25rem;
}

.open-qiu-box > .head .gd-log {
    color: var(--primary-color);
}

.open-qiu-box > .foot {
    padding-top: .2rem;
    font-size: .26rem;
    color: var(--primary-color);
    text-align: center;
    width: 100%;
}

/* ================================================
 * 号码球容器样式
 * ================================================ */
.open-qiu-box > .open-num {
    display: flex !important;
    justify-content: space-between !important;
/*    justify-content: space-around !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 .1rem;
    align-content: center;
    padding-top: .2rem;*/
}

/* ================================================
 * 单个号码格样式
 * ================================================ */
.open-qiu-box > .open-num .box {
/*    width: 12% !important;
    height: 1rem !important;*/
    width: .85rem !important;
    height: .85rem !important;
    min-width: .85rem !important;
    max-width: .85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.open-num {
    margin: 0 .05rem !important;
}

.open-qiu-box > .open-num .box > div {
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
}

/* ================================================
 * 号码球样式
 * ================================================ */
.open-qiu-box > .open-num .box .qiu {
/*    height: .8rem !important;*/
    width: .8rem !important;
/*    line-height: .8rem !important;*/
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
/*    margin: 0 auto .1rem auto !important;
    font-size: .30rem !important;
    font-weight: 800;
    color: #000;*/
}

.qiu {
    height: auto !important;
    line-height: normal !important;
    color: var(--text-light) !important;
    margin-bottom: 0 !important;
    font-size: .30rem !important;
}

/* 加号图标样式 */
.open-qiu-box > .open-num .box .bi {
    padding-top: .15rem;
    font-size: .4rem;
}

/* 号码球下方文字样式 */
.open-qiu-box > .open-num .box .text {
    margin-top: -3px;
    font-size: .26rem;
    margin-bottom: 10px;
}

/* ================================================
 * 号码球颜色变体样式
 * ================================================ */
.box-num-0,
.box-num-1,
.box-num-2,
.box-num-3,
.box-num-4,
.box-num-5,
.box-num-6,
.box-num-100 {
    color: var(--text-light);
    border-radius: 50%;
    padding: 5px 3px;
    margin: 0 1px;
}

/* 红球 - 渐变效果 */
.box-num-0 {
    background: var(--ball-red);
}

/* 蓝球 - 渐变效果 */
.box-num-1 {
    background: var(--ball-blue);
}

/* 红球 - 纯色 */
.box-num-2 {
    background-color: #ff3333;
}

/* 蓝球 - 纯色 */
.box-num-3 {
    background-color: #3399ff;
}

/* 红球 - 备用 */
.box-num-4 {
    background-color: #ff3333;
}

/* 蓝球 - 备用 */
.box-num-5 {
    background-color: #3399ff;
}

/* 绿球 - 渐变效果 */
.box-num-6 {
    background: var(--ball-green);
}

/* 粉球 - 渐变效果 */
.box-num-100 {
    background: var(--ball-pink);
}

/* ================================================
 * 背景图片覆盖样式
 * ================================================ */
.bg-amage-0,
.bg-amage-1,
.bg-amage-2,
.bg-amage-3,
.bg-amage-4,
.bg-amage-5 {
    background-image: none !important;
}

/* ================================================
 * 辅助颜色样式
 * ================================================ */
.bj1 {
    color: #00bcd4;
}

.bj2 {
    color: #dc004b;
}

.bj3 {
    color: #4caf50;
}

.bj4 {
    color: #607D8B;
}

/* 排期颜色 */
.paiqi {
    color: #4caf50;
}

/* 蓝色文字 */
.color-lanse {
    color: #FF5722;
}

/* 中奖标记 */
.zhong {
    background-color: var(--accent-yellow);
    color: var(--primary-color);
}

/* 内容文字颜色 */
.open-log > .content .text {
    color: #3F51B5;
}

/* ================================================
 * 表格相关样式
 * ================================================ */
.qxm {
    text-align: center;
}

.qxm1 {
    text-align: left;
}

.jg1 {
    background-color: #ffc8da;
}

/* ================================================
 * 弹出框头部样式
 * ================================================ */
.diy-pop-head {
    background: #de0000;
}

/* ================================================
 * 导航栏固定定位
 * ================================================ */
#nav2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999999;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

/* ================================================
 * 背景颜色覆盖样式
 * ================================================ */
.img-box,
.nav2,
.open-log,
.bg-fff,
.bui-btn,
.white-box {
    background-color: var(--primary-light) !important;
}

.open-log > .host {
    background-color: var(--primary-light) !important;
}

/* ================================================
 * 导航和标签页样式
 * ================================================ */
.nav2 ul li a,
.bui-tab-head > .diy-tab-btn > .active,
.bui-tab-head > .diy-tab-btn > .active:after,
.zxgg,
.biaoti {
    background-color: var(--primary-color) !important;
}

.open-log > .biaoti {
    border-radius: 18px;
}

.biaoti > .text1,
.biaoti > .text2 {
    color: var(--accent-yellow) !important;
}

.view2 .open-qiu-box > .head .qishu span,
.view2 .open-qiu-box > .head .gd-log {
    color: var(--primary-color);
}

/* ================================================
 * 记录模块样式
 * ================================================ */
.view2 .open-log .host .title {
    color: #9C27B0;
}

.view2 .open-log .host .url {
    background: var(--accent-yellow);
    color: var(--primary-color);
    font-weight: 900;
    padding: 0 .1rem;
}

.open-log,
.img-box {
    border: 1px solid var(--primary-color);
}

.open-log > .shangxuxian-000 .text:not(:first-child) {
    border-top: 1px solid var(--primary-color);
}