/* 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;cursor: pointer;transition: all 0.2s linear;}
.popitem .teamitem .playbtn.on {color: var(--text-primary);background: var(--bg-hover);border-color: var(--bg-hover);}
.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;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 .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;}
.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;}
