/* body抖动处理 */
body.handle{ overflow:hidden;padding-right:12px; }
/* 工具栏 */
.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;margin:0 10px;}
.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: 450px;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: 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;vertical-align: 0;}
.popbox .close::before,.popbox .close::after {background: var(--textcolor-2);}
.popbox .popitem {line-height: 20px;padding: 0 10px 10px 10px;}
.popbox .infotit {font-weight: bold;padding: 5px;}
.popbox .tploddlis {width: 28%;margin: 5px;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 10px;border-radius: 5px;}
.popitem .teamitem .item {display: flex;align-items: center;text-align: center;margin: 5px 0;}
.popitem .teamitem .home {flex: 1;text-align: right;overflow: hidden;}
.popitem .teamitem .guest {flex: 1;text-align: left;overflow: hidden;}
.popitem .teamitem .home span,.popitem .teamitem .guest span {width: calc(100% - 25px);vertical-align: -3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;}
.popitem .teamitem img {width: 14px;height: 14px;margin: 0 4px;vertical-align: 0;}
.popitem .teamitem .vs {width: 30px;color: var(--textcolor-3);}
.popitem .teamitem .odd {width: 100px;color: var(--blue40);font-weight: bold;}
.popitem .teamitem .playbtn {background: var(--bgcolor-1);font-weight: bold;padding: 5px;border: 1px solid transparent;border-radius: 4px;flex: 1;position: relative;cursor: pointer;transition: all 0.2s linear;}
.popitem .teamitem .playbtn.on {color: var(--text-primary);}
.popitem .teamitem .playbtn.on:before {content:"";background:var(--bg-hover);border:1px solid var(--bg-hover);border-radius: 4px;width:100%;height:100%;position:absolute;top:0;left:0;}
.popitem .itembox {margin: 15px 0;}
.popitem .itemtit {font-weight: bold;line-height: 26px;}
.popitem .count {float: right;}
.popitem .count button {background:none;color:var(--textcolor-2);font-size:14px;text-align:center;width:26px;height:26px;border:1px solid var(--border-3);outline:none;vertical-align:-1px;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;display:inline-block;}
.popitem .count .icon {font-size: 18px;margin-left: 5px;}
.popitem .multiple {text-align: right;margin-top: 5px;}
.popitem .multiple button {background: none;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;padding: 0 5px;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: 20px;margin: 2px 0;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 {min-height: 443px;}
.PKlis.tit {background: var(--table_header);color: var(--textcolor-3);padding: 2px 8px;border: none;}
.PKlis {line-height: 20px;padding: 10px 3px;border-bottom: 1px solid var(--border-2);display: flex;align-items: center;}
.PKlis:last-child {border: none;}
.PKlis .item {flex: 1;display: flex;align-items: center;overflow: hidden;}
.PKlis .item img {width: 14px;height: 10px;border-radius: 2px;margin-right: 5px;vertical-align: 0;}
.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 {width: 30%;text-align: center;display: flex;align-items: center;justify-content: center;}
.oddbox:last-child {margin-left: 10px;}
.oddbox .odds {color: var(--blue40);font-weight: bold;width: 45px;}
.oddbox .oddbtn {font-weight: bold;line-height: normal;border: 1px solid var(--border-3);border-radius: 4px;padding: 3px 0;margin: 0 5px;flex: 1;transition: all 0.2s linear;cursor: pointer;}
.oddbox .oddbtn:hover {background: var(--bg-hover);border-color: var(--bg-hover);}
.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 .league { text-align: center; margin-bottom: 8px; padding: 0 15px; font-size: 13px; width: 100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.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: bold;margin: 0;}
.matchlis .oddbox .odds {color: var(--textcolor-1);margin: 0 5px;}
.matchlis .oddbox .odds span {font-weight: bold;display: block;}
.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;}

/* 订单 */
.userCenter .title::after {content:"";clear: both;display: block;}
.userCenter .title .searchbox {line-height: 20px;margin-bottom: 5px;border-radius: 20px;float: right;}
.userCenter .summary { margin-bottom: 8px; margin-left: 5px; font-size: 14px; }
.PkOrderbox {}
.PkOrderlis {width: calc(50% - 5px);border: 1px solid var(--border-3);border-radius: 5px;margin-bottom: 10px;display: inline-block;overflow: hidden;}
.PkOrderlis:nth-child(even) {margin-left: 5px;}
.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 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-left: 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;}

/* 教程 */
.oddbtn.guide,.playbtn.guide,.count.guide,.bonus.guide,.confirmbtn.guide,.confirmpop.guide {outline:2px dashed #f44336;position:relative;z-index:50;cursor:auto;}
.oddbtn.guide,.oddbtn.guide:hover,.count.guide,.bonus.guide {background:#fff;color: #333;}
.guide:after {content:attr(data-content);color:#fff;font-size:16px;font-weight: bold;text-shadow: 0 0px 5px rgb(217,22,22,0.8);width:max-content;top:50%;left:85px;transform:translateY(-50%);position:absolute;z-index:45;}
.guide.LS:after {left: auto;right: 50px;}
.guide.BS:after {bottom: -40px;top: auto;left: 50%;transform: translateX(-50%);}
.playbtn.guide:after {left: 165px;}
.count.guide.LS:after {right: 165px;}
.popitem .count.guide input {background: #fff !important;color: #333 !important;}
.pkGuidePop {background:var(--black60);position:fixed;width:100%;height:100%;top:0;left:0;z-index:30;}
.pkGuidePop .pkGuideinfo {width: 1060px;height: 65vh;transform: translate(-50%,0);top: 8%;left: 50%;position: relative;}
.pkGuidePop .pkGuideinfo .popbox {overflow: inherit;z-index: 25;}
.pkGuidePop .pkGuideinfo .popbox::after {content:"";background: var(--black60);width: calc(100% + 2px);height: calc(100% + 2px);border-radius: 10px;top: -1px;left: -1px;position: absolute;}
.pkGuidePop .close.off {background: var(--black30);width: 36px;height: 36px;left: 50%;bottom: -25px;top: auto;right: auto;transform: translate(-50%,0);border-radius: 50%;}
.pkGuidePop .close.off::before, .pkGuidePop .close.off::after {background: #fff;}
.pkGuidePop .pkGuideBtn {transform: translateX(-50%);left: 50%;bottom: 5%;position: absolute;z-index: 30;}
.pkGuidePop .pkGuideBtn span {background: #f44336;color: #fff;font-size: 16px;text-align: center;padding: 8px;width: 120px;margin: 0 20px;border-radius: 5px;display: inline-block;cursor: pointer;}
.pkGuidePop .confirmpop {background:#fff;color: #666;font-size:1.125em;text-align: center;font-family:inherit;min-width:32em;max-width:100%;padding:1.25em;border:none;border-radius:0.3125em;transform: translate(-50%,-50%);top: 45%;left: 50%;position: absolute;}
.pkGuidePop .confirmpop p {margin: 0 0 1.25em 0;}
.pkGuidePop .confirmpop span {background:#aaa;color:#fff;font-size:1.0625em;font-weight:500;margin:0 0.3125em;padding:0.625em 2em;box-shadow:none;border-radius:0.25em;display: inline-block;}
.pkGuidePop .confirmpop .on {background: var(--second-color);}