.stats-preview{padding:5px 12px 15px 12px;}
.stats-preview .head1{border-bottom:2px solid #eee;padding-bottom:10px;}

.preview-cols{padding:12px 0px;}
.preview-cols.halfs{display:flex;flex-direction:row;justify-content:space-between;}
.preview-cols .preview-rows{width:49%;}

.preview-h1{
    transform:skew(-25deg);padding:3px 20px 3px 8px;width:auto;margin:0 0;position:relative;
    display:inline-block;
    background:#232323;color:#fff;font-size:0.9rem;font-weight:500;margin-bottom:6px;
    border-right:3px solid #fed000;margin-left:8px;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.preview-h1 > span{transform:skew(25deg);display:inline-block;padding-left:45px;}
.preview-h1 .img{
    position:absolute;left:5px;top:-5px;overflow:hidden;border:2px solid #999;padding:2px;
    display:inline-block;vertical-align:middle;width:32px;height:32px;background:#fff;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.preview-h1 .img img{display:inline-block;width:100%;vertical-align:top;}

.preview-topic{background:#232323;padding:3px 10px;color:#aaa;display:flex;position:relative;}
.preview-topic .topic-league{width:50%;text-align:left;line-height:25px;padding-left:50px;}
.preview-topic .topic-league .pg-img{
    position:absolute;left:10px;top:-5px;overflow:hidden;border:2px solid #fed000;
    display:inline-block;vertical-align:middle;width:42px;height:42px;background:#fff;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.preview-topic .topic-league .pg-img img{display:inline-block;width:100%;vertical-align:top;}
.preview-topic .topic-date{width:50%;text-align:right;font-weight:300;font-size:0.75rem;line-height:25px;}

.preview-boxhead{display:flex;padding:10px;border-bottom:2px solid #232323;justify-content:center;}
.preview-boxhead .boxhead-cols{width:12%;text-align:center;}
.preview-boxhead .boxhead-cols.pg{width:44%;}
.preview-boxhead .head-logo{
    display:inline-block;vertical-align:middle;height:70px;width:70px;
    overflow:hidden;border:1px solid #ccc;margin-bottom:6px;padding:6px;
    border-radius:50%;-khtml-border-radius:50%;-moz-border-radius:50%;
}
.preview-boxhead .head-logo img{display:inline-block;width:100%;vertical-align:top;}
.preview-boxhead .head-name{font-size:1rem;font-weight:600;}
.preview-boxhead .head-note{font-size:0.75rem;color:#999;}
.preview-boxhead .head-score{margin-top:15px;font-size:1.9rem;font-weight:600;color:#d30404;}
.preview-boxhead .head-scnote{font-size:10px;color:#d30404;text-align:center;}
.preview-boxhead .head-schalf{font-size:0.9rem;color:#666;}
.preview-boxhead .head-livetv{padding:4px 0;}
.preview-boxhead .head-livetv img{display:inline-block;max-height:22px;margin:0 6px 4px 0;}

.preview-navbtn{
    display:flex;overflow:hidden;background:#ddd;
    transform:skew(-25deg);padding:0 6px;width:98%;margin:0 auto 3px auto;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.preview-navbtn .navbtn-cols{
    transform:skew(25deg);width:50%;padding:4px 0 4px 5px;font-size:0.55rem;text-align:left;
}
.preview-navbtn .navbtn-cols.right{text-align:right;}
.preview-navbtn .navbtn-cols .btn-navpreview{
    display:inline-block;padding:1px 8px;color:#232323;margin-left:1px;
    background:none;cursor:pointer;text-transform:uppercase;
    border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;
}
.preview-navbtn .navbtn-cols .btn-navpreview.first{margin-left:0;}
.preview-navbtn .navbtn-cols .btn-navpreview.disable{background:none;cursor:default;color:#aaa;}
.preview-navbtn .navbtn-cols .btn-navpreview.unactive{background:none;color:#232323;cursor:pointer;}
.preview-navbtn .navbtn-cols .btn-navpreview.active{background:#232323;color:#aaa;cursor:default;}

.preview-boxlist{display:flex;padding:5px 0;background:#fdf1ba;border-bottom:1px solid #fff;}
.preview-boxlist .bg-score{
    display:inline-block;width:45px;font-size:0.7rem;line-height:16px;padding:1px 0;
    background:#d78708;color:#fff;text-align:center;
    border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;
}
.preview-boxlist .bg-score:hover{background:#d78708;}
.preview-boxlist .scnote{color:#df251e;font-size:0.6rem;}
.preview-boxlist .ck-result{
    display:inline-block;vertical-align:middle;width:16px;height:16px;
    font-weight:400;font-size:0.7rem;color:#fff;line-height:17px;
    border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;
}
.preview-boxlist .ck-result.win{background:#04d839;}
.preview-boxlist .ck-result.draw{background:#908e9c;}
.preview-boxlist .ck-result.lost{background:#d30404;}

.preview-boxlist .p-columns{text-align:center;}
.preview-boxlist .p-columns.date{width:10%;text-align:left;padding-left:4px;}
.preview-boxlist .p-columns.program{
    width:32%;text-align:left;white-space:nowrap;overflow:hidden;padding:0 5px;
}
.preview-boxlist .p-columns.score{width:6%;}
.preview-boxlist .p-columns.team{width:20%;padding-right:6px;text-align:right;}
.preview-boxlist .p-columns.team.away{padding-left:6px;padding-right:0px;text-align:left;}
.preview-boxlist .p-columns.scnote{width:10%;}

.preview-boxlist.m-last .p-columns{font-size:13px;}
.preview-boxlist.m-last .p-columns.date{width:16%;}
.preview-boxlist.m-last .p-columns.program{width:14%;}
.preview-boxlist.m-last .p-columns.score{width:10%;}
.preview-boxlist.m-last .p-columns.team{width:26%;padding-right:3px;}
.preview-boxlist.m-last .p-columns.team.away{padding-left:3px;padding-right:0px;}
.preview-boxlist.m-last .p-columns.scnote{width:6%;}


@media screen and (min-width: 590px) and (max-width: 889px){
    .stats-preview{padding:5px 0 15px 0;}
    
    .preview-boxhead .boxhead-cols .head-logo{height:80px;width:80px;}
    .preview-boxhead .boxhead-cols .head-logo img{max-height:none;max-width:none;height:auto;}
    .preview-boxlist .p-columns{font-size:0.8rem;}
    .preview-boxlist .p-columns.date{width:15%;}
    .preview-boxlist .p-columns.program{width:27%;}
    .preview-boxlist .p-columns.score{width:10%;}
    .preview-boxlist .p-columns.team{width:18%;}

    .preview-boxlist.m-last .p-columns{font-size:0.7rem;}
    .preview-boxlist.m-last .p-columns.score{width:14%;}
    .preview-boxlist.m-last .p-columns.team{width:24%;}
}

@media screen and (min-width:280px) and (max-width:589px){
    .stats-preview{padding:5px 0 15px 0;}

    .preview-topic{flex-wrap:wrap;}
    .preview-topic .topic-league{width:100%;}
    .preview-topic .topic-date{width:100%;}

    .preview-h1{display:block;white-space:nowrap;overflow:hidden;text-overflow:'..';}

    .preview-cols.halfs{flex-wrap:wrap;}
    .preview-cols .preview-rows{width:100%;margin-bottom:25px;}

    .preview-boxhead .boxhead-cols{width:28%;text-align:center;}
    .preview-boxhead .boxhead-cols.pg{width:44%;}
    .preview-boxhead .boxhead-cols .head-logo{height:65px;width:65px;}
    .preview-boxhead .boxhead-cols .head-logo img{max-height:none;max-width:none;height:auto;}
    .preview-boxhead .boxhead-cols .head-name{font-size:0.85rem;}
    .preview-boxhead .boxhead-cols .head-note{font-size:0.8rem;}
    .preview-boxhead .boxhead-cols .head-score{font-size:18px;}
    .preview-boxhead .boxhead-cols .program-pg{font-size:0.8rem;}
    .preview-boxhead .program-date{font-size:0.8rem;}
    .preview-boxhead .boxhead-cols .head-livetv img{max-height:18px;}
    
    .preview-boxlist{padding:6px 0;font-size:0.85rem;flex-wrap:wrap;}
    .preview-boxlist .p-columns.date{
        width:25%;font-size:0.8rem;line-height:20px;font-weight:500;
        order:1;margin-bottom:3px;
    }
    .preview-boxlist .p-columns.program{
        width:65%;text-align:left;font-weight:500;
        order:2;margin-bottom:3px;font-size:0.83rem;
    }
    .preview-boxlist .p-columns.score{width:20%;text-align:center;order:5;}
    .preview-boxlist .p-columns.team{width:35%;order:6;font-size:0.83rem;}
    .preview-boxlist .p-columns.team.home{clear:both;order:4;}
    .preview-boxlist .p-columns.scnote{width:10%;order:3;margin-bottom:3px;}
    .preview-boxlist .p-columns .noted{display:none;}

    .preview-boxlist.m-last .p-columns.date{width:25%;font-size:0.8rem;line-height:20px;}
    .preview-boxlist.m-last .p-columns.program{width:65%;text-align:left;font-size:0.83rem;}
    .preview-boxlist.m-last .p-columns.score{width:20%;text-align:center;}
    .preview-boxlist.m-last .p-columns.team{width:40%;}
    .preview-boxlist.m-last .p-columns.scnote{width:10%;}
}