/* ----------------- new -------------------------  */
:root {
    /*GRAY灰色*/
    --white:  #fff;
    --gray3:  #f9f9f9;
    --gray5:  #f5f5f5;
    --gray10: #f0f0f0;
    --gray20: #eaeaea;
    --gray30: #e5e5e5;
    --gray40: #dadada;
    --gray45: #d0d0d0;
    --gray50: #999;
    --gray60: #666;
    --gray65: #555;
    --gray70: #444;
    --gray80: #333;
    --gray90: #222;
    --gray95: #151515;
    --black:  #000;
    --black85: rgba(0, 0, 0, 0.85);
    --black60: rgba(0, 0, 0, 0.60);
    --black50: rgba(0, 0, 0, 0.50);
    --black40: rgba(0, 0, 0, 0.40);
    --black30: rgba(0, 0, 0, 0.30);
    --black20: rgba(0, 0, 0, 0.20);
    --black15: rgba(0, 0, 0, 0.15);
    --black05: rgba(0, 0, 0, 0.05);
    --white85: rgba(255, 255, 255, 0.85);
    --white70: rgba(255, 255, 255, .70);
    --white60: rgba(255, 255, 255, .60);
    --white45: rgba(255, 255, 255, .45);
    --white30: rgba(255, 255, 255, .30);
    --white20: rgba(255, 255, 255, .20);
    --white10: rgba(255, 255, 255, .10);

    /*品牌色*/
    --primary-color: #307b06;
    --second-color: #226204;
    --thirdly-color: #f60;

    /*比分功能色*/
    --red20:    #ec7979;
    --red40:    #d64444;             /*完场比分,赢*/
    --red60:    #be0000;             /*指数升*/
    --blue10:   #e7eef8;
    --blue40:   #0076e3;             /*进行中比分，中场、走*/
    --blue60:   #0057a6;
    --green40:  #0d9f1c;             /*指数降、输*/
    --yellow20: #fffae0;
    --yellow30: #fff6d1;
    --yellow60: #ffc700;             /*黄牌*/
    --redbg:    #ffe8e8;             /*指数升背景*/
    --greenbg:  #e5ffd9;             /*指数降背景*/
    --goalbg:   #ffe99c;             /*入球提示背景*/
    --home_team: #de682f;            /*主队*/
    --away_team: #2495da;            /*客队*/
    --table_header: var(--gray10);     /*表格标题*/
    --table_highlight: var(--gray5);   /*表格突出色*/
    --list_highlight: var(--gray3);    /*列表hover色*/

    /*背景色*/
    --body-bg:   var(--gray30);
    --footer-bg: var(--gray65);
    --white-bg:  var(--white);
    --bgcolor-1: var(--white);
    --bgcolor-2: var(--gray5);
    --bgcolor-3: var(--gray30);
    --bgcolor-4: var(--gray40);

    /*文字*/
    --text-white: var(--white);
    --text-primary: var(--primary-color);
    --textcolor-1: var(--gray90);
    --textcolor-2: var(--gray60);
    --textcolor-3: var(--gray50);       /*说明*/
    --textcolor-4: var(--gray40);       /*禁用*/

    /*边框*/
    --border-1: var(--white);
    --border-2: var(--gray10);
    --border-3: var(--gray30);
    --border-4: var(--gray45);
}

.dark {
    /*基础色*/
    /* --blue5: linear-gradient(0deg,#20384e,var(--gray90)); */
    --red40:    #de5b5c;
    --red60:    #d64c3e; 
    --blue10:   #223240;
    --blue20:   #224c73;
    --blue60:   #3a8ad4;
    --yellow20: #3a362f;
    --yellow30: #4e473b;
    --redbg:   #4e1c1c;               /*指数升背景*/
    --greenbg: #2c4e1c;               /*指数降背景*/
    --goalbg:  #765e00;               /*入球提示背景*/
    --table_header: var(--gray80);      /*表格标题*/
    --table_highlight: var(--gray80);   /*表格突出色*/
    --list_highlight: #2a2a2a;     /*列表hover色*/
    
    /*背景色*/
    --body-bg:   var(--gray95);
    --footer-bg: var(--gray90);
    --bgcolor-1: var(--gray90);
    --bgcolor-2: var(--gray80);
    --bgcolor-3: var(--gray70);
    --bgcolor-4: var(--gray70);
    --bg-highlight-1: #2c2818;
    --bg-highlight-2: #332f1f;
    
    /*文字*/
    --textcolor-1: var(--white);
    --textcolor-2: var(--gray50);
    --textcolor-3: var(--gray50);       /*说明*/
    --textcolor-4: var(--gray60);       /*禁用*/
    
    /*边框*/
    --border-2: var(--gray80);
    --border-3: var(--gray70);
    --border-4: var(--gray70);
}


/* 工具栏 */
.toolitem {line-height: 20px;padding: 10px 0;position: relative;}
.selectbox {border: 1px solid var(--border-3);padding: 4px 6px;border-radius: 4px;vertical-align: middle;display: inline-block;cursor: pointer;}
.selectbox::after {content:"";margin-left: 3px;vertical-align: -2px;border-width: 4px;border-style: solid;border-color: var(--textcolor-3) transparent transparent transparent;display: inline-block;}
.segmentbox {background: var(--bgcolor-3);border: 1px solid var(--border-3);margin: 0 10px;border-radius: 4px;vertical-align: middle;display: inline-block;overflow: hidden;}
.segmentbox span {color: var(--textcolor-2);padding: 4px 10px;border-radius: 3px;display: inline-block;cursor: pointer;}
.segmentbox .on {background: var(--bgcolor-1);color: var(--textcolor-1);box-shadow: 0 0 5px var(--black15);}
.searchbox {border: 1px solid var(--border-3);width: 30%;padding: 0 5px;border-radius: 4px;display: inline-block;}
.searchbox .icon {font-size: 14px;display: inline-block;}
.searchbox input {width: calc(100% - 20px);line-height: 28px;padding: 0 5px;background: none;border: none;outline: none;display: inline-block;}
.dark .searchbox input[type="text"] {background: none !important;}
.gomore {color: var(--text-primary);margin: 5px;float: right;}
.gomore::after {content:"";width: 6px;height: 6px;margin-left: 2px;vertical-align: 1px;border: 1px solid var(--text-primary);border-top: none;border-left: none;transform: rotate(-45deg);display: inline-block;}
.gomore a {color: var(--text-primary);text-decoration: none;}
.dark .gomore a:visited {color: var(--text-primary) !important;}

/* 弹框 */
.toolitem .popbox {width: 330px;transform: translate(0,0);top: 45px;left: 0;position: absolute;}
.toolitem .popbox .poptit {background: var(--list_highlight);border-bottom: 1px solid var(--border-3);font-size: 14px;line-height: 20px;text-align: center;}
.toolitem .popbox .popitem {padding-top: 10px;}
.popbox {width: 90%;background: var(--bgcolor-1);border: 1px solid var(--border-3);border-radius: 10px;transform: translate(-50%,-50%);top: 50%;left: 50%;position: fixed;box-shadow: 0 3px 15px var(--black30);overflow: hidden;z-index: 999;}
.popbox .poptit {font-size: 16px;font-weight: bold;line-height: 30px;padding: 5px 10px;position: relative;}
.popbox .poptit span {font-size: 12px;margin-right: 40px;float: right;}
.popbox .poptit span text {color: var(--text-primary);font-weight: bold;margin: 0 2px 0 5px;}
.popbox .poptit span .icon {font-size: 12px;font-weight: normal;vertical-align: 0;}
.popbox .close {width: 20px;height: 20px;top: 10px;right: 10px;position: absolute;cursor: pointer;}
.popbox .close::before,.popbox .close::after {content:"";background: var(--textcolor-2);width: 80%;height: 1px;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);position: absolute;}
.popbox .close::after {transform: translate(-50%,-50%) rotate(-45deg);}
.popbox .popitem {line-height: 20px;padding: 0 10px 10px 10px;}
.popbox .infotit {font-weight: bold;padding: 5px;}
.settingPop .popitem {padding: 5px;}
.settingPop.screenbox .info li.letter {height: auto;margin: 5px 0;}
.tploddlis {width: 28%;height: 20px !important;margin: 5px 0 !important;display: inline-block;cursor: pointer;transition: all 0.2s linear;}
.tickicon {width: 15px;height: 15px;border: 1px solid var(--border-4);border-radius: 50%;margin-right: 5px;vertical-align: -3px;display: inline-block;cursor: pointer;position: relative;}
.on .tickicon::before {content:"";width: 8px;height: 4px;border: 1px solid var(--text-white);border-right: none;border-top: none;transform: rotate(-45deg);top: 3px;left: 2px;position: absolute;}
.on .tickicon {background: var(--text-primary);border-color: var(--text-primary);}
.popbox .btsbox {border-top: 1px solid var(--border-3);padding: 10px;text-align: center;}
.popbox .btsbox span {background: var(--list_highlight);color: var(--textcolor-2);border: 1px solid var(--border-3);line-height: 20px;padding: 6px 15px;margin: 0 5px;border-radius: 2px;transition: all 0.2s linear;display: inline-block;cursor: pointer;}
.popbox .btsbox span:hover {background: var(--bgcolor-1);}
.popbox .btsbox .ent {background: var(--primary-color);border-color: var(--primary-color);color: var(--text-white);}
.popbox .btsbox .ent:hover {background: var(--thirdly-color);border-color: var(--thirdly-color);}

.popitem .teamitem {background: var(--bgcolor-2);padding: 5px 8px;border-radius: 5px;}
.teamitem .item {display: flex;align-items: center;text-align: center;margin: 5px 0;}
.teamitem .home {flex: 1;text-align: right;overflow: hidden;}
.teamitem .guest {flex: 1;text-align: left;overflow: hidden;}
.teamitem .home span,.teamitem .guest span {width: calc(100% - 25px);font-weight: 500;vertical-align: -3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;}
.teamitem img {width: 16px;height: 16px;margin: 0 4px;vertical-align: -1px;}
.teamitem .vs {width: 40px;color: var(--textcolor-3);line-height: normal;}
.teamitem .odd {width: 100px;color: var(--blue40);font-weight: bold;}
.teamitem .playbtn {background: var(--bgcolor-1);font-weight: bold;padding: 5px;border: 1px solid transparent;border-radius: 4px;flex: 1;cursor: pointer;transition: all 0.2s linear;}
.teamitem .playbtn.on {color: var(--text-primary);background: rgba(48,123,6,0.15);border-color: rgba(48,123,6,0.15);}
.popitem .itembox {margin: 15px 0;}
.popitem .itemtit {font-weight: bold;line-height: 26px;}
.popitem .count {float: right;}
.popitem .count button {background:none !important;color:var(--textcolor-2);font-size:14px;text-align:center;width:26px;height:26px;border:1px solid var(--border-3);outline:none;vertical-align:-2px;cursor:pointer;display:inline-block;}
.popitem .count input {background:none;width:80px;height: 26px;font-weight:bold !important;text-align:center;border:1px solid var(--border-3);border-left:none;border-right:none;border-radius:0;margin: 0;display:inline-block;}
.popitem .count .icon {font-size: 18px;margin-left: 5px;vertical-align: middle;}
.popitem .multiple {text-align: right;margin-top: 5px;}
.popitem .multiple button {background: none !important;color: var(--textcolor-3);font-size: 12px;border:1px solid var(--border-3);outline:none;border-radius: 3px;padding: 2px 10px;margin-left: 6px;cursor: pointer;}
.popitem .bonus {color: var(--text-primary);font-size: 14px;font-weight: bold;line-height: 26px;float: right;}
.popitem .confirmbtn {background: var(--primary-color);color: var(--text-white);font-size: 14px;font-weight: bold;text-align: center;width: 100%;padding: 7px;border: none;outline: none;border-radius: 4px;cursor: pointer;}
.tips li {color: var(--textcolor-2);font-size: 12px;line-height: normal;margin: 5px 0;padding: 0;border: none;list-style: none;}
.tips li a {color: var(--textcolor-1);text-decoration: underline !important;}

.pkSucess .icon {background: var(--primary-color);color: var(--text-white);font-size: 40px;width: 60px;height: 60px;line-height: 65px;text-align: center;border-radius: 50%;margin: 10px auto;display: block;}
.pkSucess .text {color: var(--text-primary);font-size: 16px;font-weight: bold;padding: 10px 0;display: block;}

/* 列表 */
.PKbox {}
.PKbox .PKlis.tit {background: var(--table_highlight);color: var(--textcolor-3);padding: 2px 10px;border: none;}
.PKbox .PKlis.tit img {width: 14px;height: 10px;border-radius: 2px;margin-right: 5px;vertical-align: 0;}
.PKbox .PKlis {line-height: 20px;padding: 10px;border-bottom: 1px solid var(--border-2);}
.PKbox .PKlis:last-child {border: none;}
.PKlis .item {margin: 0 0 5px 0;display: flex;align-items: center;overflow: hidden;}
.PKlis .item .time {color: var(--textcolor-3);font-size: 11px;width: 35px;line-height: 16px;text-align: center;margin-right: 5px;}
.PKlis .item .teambox {width: calc(100% - 40px);}
.PKlis .teambox .team {font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.PKlis .teambox img {width: 14px;height: 14px;vertical-align: -2px;}
.oddbox {text-align: center;margin: 5px 0;display: flex;align-items: center;justify-content: center;}
.oddbox .odds {font-weight: bold;width: 75px;}
.oddbox .oddbtn {font-weight: bold;line-height: normal;border: 1px solid var(--border-3);border-radius: 4px;padding: 3px 0;margin: 0;flex: 1;transition: all 0.2s linear;cursor: pointer;}
.oddbox .oddbtn:hover {background: rgba(48,123,6,0.15);border-color: rgba(48,123,6,0.15);}
.oddbox .oddbtn span {color: var(--textcolor-3);font-size: 12px;font-weight: normal;line-height: 18px;display: block;}
.oddbox .oddbtn .icon {font-size: 12px;line-height: normal;vertical-align: 0;}
.oddbox .oddbtn.on,.oddbox .oddbtn.on:hover {background: var(--primary-color);color: var(--text-white);border-color: var(--primary-color);}
.oddbox .oddbtn.on span,.oddbox .oddbtn.on .icon {color: var(--white60) !important;}

/* 热门 */
.matchlis {padding: 10px 0 5px 0;border-bottom: 1px solid var(--border-2);}
.matchlis:last-child {border: none;}
.matchlis .item {display: flex;cursor: pointer;}
.matchlis .team {text-align: center;flex: 1;overflow: hidden;}
.matchlis .team img {width: 30px;height: 30px;margin: 0 auto;}
.matchlis .team span {line-height: 20px;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}
.matchlis .time {color: var(--textcolor-3);font-size: 12px;text-align: center;width: 50px;padding-top: 8px;}
.matchlis .oddbox {width: 100%;margin: 5px 0;}
.matchlis .oddbox .oddbtn {font-weight: 500;margin: 0;}
.matchlis .oddbox .odds {color: var(--textcolor-1);margin: 0 5px;}
.matchlis .oddbox .odds span {font-weight: bold;line-height: 20px;}
.matchlis .pk {font-size: 18px;font-weight: bold;text-align: center;width: 50px;}
.matchlis.PK {border: none;}
.matchlis.PK .item {padding: 5px 0;align-items: center;}
.a-more {text-align: center;margin: 10px 0;}

/* 订单 */
.userCenter .title::after {content:"";clear: both;display: block;}
.userCenter .title .searchbox {line-height: 20px;margin-bottom: 5px;border-radius: 20px;float: right;}
.PkOrderbox {}
.PkOrderlis {border: 1px solid var(--border-3);border-radius: 5px;margin-bottom: 8px;overflow: hidden;}
.PkOrderlis .teamitem {background: var(--table_highlight);border-bottom: 1px solid var(--border-2);line-height: 20px;padding: 5px 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.PkOrderlis .teamitem span {font-weight: bold;}
.PkOrderlis .teamitem .score {color: var(--textcolor-3);margin: 0 3px;}
.PkOrderlis .teamitem img {width: 14px;height: 14px;margin: 0 3px;vertical-align: -2px;}
.PkOrderlis .orderinfo {padding: 5px 10px;}
.PkOrderlis .orderitem {margin: 2px 0;display: flex;align-items: center;justify-content: space-between;}
.PkOrderlis .orderitem::after {display: none;}
.PkOrderlis .orderitem text {color: var(--textcolor-3);margin-right: 4px;}
.PkOrderlis .type {min-width: 40px;font-style: normal;font-weight: bold;text-align: center;border: 1px solid var(--border-3);padding: 2px;margin-right: 6px;border-radius: 4px;display: inline-block;}
.PkOrderlis .icon {font-size: 12px;margin: 0 0 0 4px;vertical-align: 0;}
.PkOrderlis .hit,.PkOrderlis .wrong,.PkOrderlis .zoushui {background: var(--red40);color: var(--text-white);font-size: 11px;font-weight: normal;text-align: center;line-height: 16px;width: 15px;height: 15px;border-radius: 50%;margin-right: 4px;vertical-align: 0;display: inline-block;}
.PkOrderlis .wrong {background: var(--green40);}
.PkOrderlis .zoushui {background: var(--blue40);position: relative;}
.PkOrderlis .zoushui::before {content:"";background: var(--text-white);width: 60%;height: 2px;border-radius:3px;vertical-align: 3px;display:inline-block;}