.match-preview{padding:15px 0 15px 0;}
.mpreview-h1{
    display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center;padding:3px 10px;color:#fff;
    margin-bottom:10px;border-bottom:4px solid #3abfef;
    border-top-left-radius:6px;-khtml-border-top-left-radius:6px;-moz-border-top-left-radius:6px;
    border-top-right-radius:6px;-khtml-border-top-right-radius:6px;-moz-border-top-right-radius:6px;
    background: rgba(58,191,239,1);
    background: -moz-linear-gradient(-45deg, rgba(58,191,239,1) 0%, rgba(32,124,229,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(58,191,239,1)), color-stop(100%, rgba(32,124,229,1)));
    background: -webkit-linear-gradient(-45deg, rgba(58,191,239,1) 0%, rgba(32,124,229,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(58,191,239,1) 0%, rgba(32,124,229,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(58,191,239,1) 0%, rgba(32,124,229,1) 100%);
    background: linear-gradient(135deg, rgba(58,191,239,1) 0%, rgba(32,124,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3abfef', endColorstr='#207ce5', GradientType=1 );
    -webkit-box-shadow: 4px 4px 18px -14px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 18px -14px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 18px -14px rgba(0,0,0,0.75);
}
.mpreview-h1 .pg-topic{font-size:1.2rem;font-weight:500;padding:0;margin:0;}
.mpreview-h1 .pg-name{font-size:0.75rem;font-weight:400;color:#333;margin-top:-2px;}
.mpreview-h1 .pg-logo{
    display:inline-block;vertical-align:middle;width:38px;height:38px;
    background:#fff;overflow:hidden;border:2px solid #ddd;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.mpreview-h1 .pg-logo img{display:inline-block;width:100%;vertical-align:top;}
.mpreview-h2{
    padding:3px 15px 3px 15px;margin:0;margin-bottom:4px;
    background:#333;color:#fff;font-size:0.9rem;font-weight:500;
    border-left:3px solid #3abfef;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}

.mpreview-head{
    display:flex;background:#f5f5f5;padding:10px 0;margin-bottom:10px;border-top:1px solid #eee;
    border-radius:6px;-khtml-border-radius:6px;-moz-border-radius:6px;
    -webkit-box-shadow: 4px 4px 18px -14px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 18px -14px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 18px -14px rgba(0,0,0,0.75);
}
.mpreview-head .head-cols{width:28%;text-align:center;padding:5px 10px;}
.mpreview-head .head-cols.score{width:44%;border-left:1px solid;border-right:1px solid;border-color:#ddd;}
.mpreview-head .h-logos{
    display:inline-block;vertical-align:middle;height:100px;width:100px;margin-bottom:6px;padding:8px;
    overflow:hidden;border:1px solid #eee;background:#fff;
    border-radius:6px;-khtml-border-radius:6px;-moz-border-radius:6px;
}
.mpreview-head .h-logos img{display:inline-block;width:100%;vertical-align:top;}
.mpreview-head .h-names{font-size:1.1rem;font-weight:600;color:#207ce5;}
.mpreview-head .h-stadiums{font-size:0.75rem;color:#999;}
.mpreview-head .h-score{margin-top:15px;font-size:1.9rem;font-weight:500;color:#cf1a1a;}
.mpreview-head .h-halfscore{font-size:0.9rem;color:#666;}
.mpreview-head .h-noted{font-size:0.7rem;color:#cf1a1a;text-align:center;}
.mpreview-head .h-channel{padding:5px 0;}
.mpreview-head .h-channel img{display:inline-block;max-height:24px;margin:0 5px 5px 0;}

.mpreview-nav{
    display:flex;background:#ddd;overflow:hidden;
    margin:0 auto 3px auto;padding:0 6px;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.mpreview-nav .navbar-cols{width:50%;padding:4px 0 4px 5px;font-size:0.55rem;text-align:left;}
.mpreview-nav .navbar-cols.right{text-align:right;}
.mpreview-nav .navbar-cols .btn-navbar{
    display:inline-block;background:none;color:#333;
    padding:1px 8px;margin-left:1px;cursor:pointer;text-transform:uppercase;
    border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;
}
.mpreview-nav .navbar-cols .btn-navbar.first{margin-left:0;}
.mpreview-nav .navbar-cols .btn-navbar.disable{background:none;cursor:default;color:#999;}
.mpreview-nav .navbar-cols .btn-navbar.unactive{background:none;color:#333;cursor:pointer;}
.mpreview-nav .navbar-cols .btn-navbar.active{background:#333;color:#999;cursor:default;}


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

.mpreview-list{display:flex;padding:5px 0;border-bottom:1px solid #ddd;}
.mpreview-list .mlist-cols{text-align:center;}
.mpreview-list .mlist-cols.date{width:10%;text-align:left;padding-left:4px;}
.mpreview-list .mlist-cols.program{
    width:32%;text-align:left;white-space:nowrap;overflow:hidden;padding:0 5px;
}
.mpreview-list .mlist-cols.score{width:6%;}
.mpreview-list .mlist-cols.team{width:20%;padding-right:6px;text-align:right;}
.mpreview-list .mlist-cols.team.away{padding-left:6px;padding-right:0px;text-align:left;}
.mpreview-list .mlist-cols.scnote{width:10%;}

.mpreview-list.box-mlast .mlist-cols{font-size:13px;}
.mpreview-list.box-mlast .mlist-cols.date{width:16%;}
.mpreview-list.box-mlast .mlist-cols.program{width:14%;}
.mpreview-list.box-mlast .mlist-cols.score{width:10%;}
.mpreview-list.box-mlast .mlist-cols.team{width:26%;padding-right:3px;}
.mpreview-list.box-mlast .mlist-cols.team.away{padding-left:3px;padding-right:0px;}
.mpreview-list.box-mlast .mlist-cols.scnote{width:6%;}

.mpreview-list .bg-score{
    display:inline-block;width:43px;font-size:0.7rem;line-height:16px;padding:1px 0;
    background:#207ce5;color:#fff;text-align:center;
    border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;
}
.mpreview-list .score-note{color:#cf1a1a;font-size:0.6rem;}
.mpreview-list .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;
}
.mpreview-list .ck-result.win{background:#0dd40d;}
.mpreview-list .ck-result.draw{background:#2b3445;}
.mpreview-list .ck-result.lost{background:#e72e29;}

@media screen and (min-width: 590px) and (max-width: 889px){
    .match-preview{padding:5px 0 15px 0;}
    
    .mpreview-head .head-cols .h-logos{height:80px;width:80px;}
    .mpreview-head .head-cols .h-logos img{max-height:none;max-width:none;height:auto;}
    .mpreview-list .mlist-cols{font-size:0.8rem;}
    .mpreview-list .mlist-cols.date{width:15%;}
    .mpreview-list .mlist-cols.program{width:27%;}
    .mpreview-list .mlist-cols.score{width:10%;}
    .mpreview-list .mlist-cols.team{width:18%;}

    .mpreview-list.box-mlast .mlist-cols{font-size:0.7rem;}
    .mpreview-list.box-mlast .mlist-cols.score{width:14%;}
    .mpreview-list.box-mlast .mlist-cols.team{width:24%;}
}

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

    .mpreview-h1 .pg-topic{font-size:1.1rem;}
    .mpreview-h1 .pg-logo{width:32px;height:32px;}
    .mpreview-h2{display:block;}

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

    .mpreview-head .head-cols{width:28%;text-align:center;}
    .mpreview-head .head-cols.score{width:44%;}
    .mpreview-head .h-logos{height:60px;width:60px;}
    .mpreview-head .h-logos img{max-height:none;max-width:none;height:auto;}
    .mpreview-head .h-names{font-size:0.85rem;}
    .mpreview-head .h-stadiums{font-size:0.7rem;}
    .mpreview-head .h-score{font-size:18px;}
    .mpreview-head .h-date{font-size:0.8rem;}
    .mpreview-head .h-channel img{max-height:18px;}
    
    .mpreview-list{padding:6px 0;font-size:0.85rem;flex-wrap:wrap;}
    .mpreview-list .mlist-cols.date{
        width:25%;font-size:0.8rem;line-height:20px;font-weight:500;
        order:1;margin-bottom:3px;
    }
    .mpreview-list .mlist-cols.program{
        width:65%;text-align:left;font-weight:500;
        order:2;margin-bottom:3px;font-size:0.83rem;
    }
    .mpreview-list .mlist-cols.score{width:20%;text-align:center;order:5;}
    .mpreview-list .mlist-cols.team{width:35%;order:6;font-size:0.83rem;}
    .mpreview-list .mlist-cols.team.home{clear:both;order:4;}
    .mpreview-list .mlist-cols.scnote{width:10%;order:3;margin-bottom:3px;}

    .mpreview-list.box-mlast .mlist-cols.date{width:25%;font-size:0.8rem;line-height:20px;}
    .mpreview-list.box-mlast .mlist-cols.program{width:65%;text-align:left;font-size:0.83rem;}
    .mpreview-list.box-mlast .mlist-cols.score{width:20%;text-align:center;}
    .mpreview-list.box-mlast .mlist-cols.team{width:40%;}
    .mpreview-list.box-mlast .mlist-cols.scnote{width:10%;}
}