.matchs-preview{padding:0 8px;}
.mpreview-h1{
    font-family:"Kanit-medium",Tahoma,Arial;font-size:1.1rem;font-weight:normal;color:#fff;
    padding:8px 12px;margin-bottom:10px;text-align:left;
    background:#333;border-left:3px solid #4dc403;border-bottom:1px solid #444;
}
.mpreview-h2{
    font-family:"Kanit-medium",Tahoma,Arial;font-size:1rem;font-weight:normal;color:#fff;
    padding:4px 10px;text-align:left;background:#333;border-bottom:1px solid #444;
    display:flex;margin-top:10px;
}
.mpreview-h2.brd{border-left:3px solid #4dc403;}
.mpreview-h2 img{max-height:22px;margin-right:5px;}
.mpreview-h2 .text{width:80%;text-align:left;}
.mpreview-h2 .button{width:20%;text-align:right;}
.mpreview-h2 .button a{
    display:inline-block;padding:2px 12px;border:1px solid #4dc403;
    font-family:"Kanit-light",Tahoma,Arial;font-size:0.8rem;font-weight:normal;
}
.mpreview-h2 .button a:hover{background:#222;}

.mpreview-head{display:flex;}
.mhead-cols{padding:8px;text-align:center;}
.mhead-cols.team{width:35%;}
.mhead-cols.program{width:30%;padding-top:25px;}
.mhead-cols.program .pg-score{
    font-family:"Kanit-medium",Tahoma,Arial;font-size:1.6rem;line-height:22px;color:#fd5e56;
    margin-bottom:5px;
}
.mhead-cols.program .pg-score .halftime{font-family:"Kanit",Tahoma,Arial;font-size:0.8rem;}
.mhead-cols .hteam-logo{
    display:inline-block;height:110px;width:110px;margin:0 auto 0 auto;
    padding:5px;overflow:hidden;
}
.mhead-cols .hteam-logo img{width:100%;vertical-align:top;}
.mhead-cols .hteam-name{font-family:"Kanit-medium",Tahoma,Arial;font-size:1rem;color:#fff;margin-bottom:5px;}

.mhead-cols .hteam-last{display:block;width:100%;}
.mhead-cols .hteam-last .icon-items{
    display:inline-block;font-size:0.65rem;color:#fff;text-align:center;
    width:15px;height:16px;line-height:15px;margin-right:4px;
    border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;
}
.mhead-cols .hteam-last .icon-items.win{background:#4dc403;}
.mhead-cols .hteam-last .icon-items.draw{background:#747379;}
.mhead-cols .hteam-last .icon-items.lost{background:#ca0303;}

.hstats-row{display:flex;background:#222;padding:10px 0;margin-bottom:3px;}
.hstats-row .hstats-cols{width:33.33%;text-align:center;color:#aaa;}
.hstats-row .hstats-name{font-family:"Kanit-medium",Tahoma,Arial;color:#fff;padding:3px 0;}
.hstats-row .hstats-graph{padding:0;position:relative;}
.hstats-row .hstats-graph .bar-label{
    position:absolute;bottom:10px;left:11%;color:#aaa;font-size:0.8rem;
}
.hstats-row .hstats-graph .bar-label.r{left:auto;right:11%;}
.hstats-row .hstats-graph .bar{
    display:flex;height:8px;overflow:hidden;width:80%;margin:0 auto;background:#666;
    border-radius:6px;-khtml-border-radius:6px;-moz-border-radius:6px;
}
.hstats-row .hstats-graph .bar .bar-win{background:#83c55a;}
.hstats-row .hstats-graph .bar .bar-lost{background:#fa7878;}
.hstats-row .hstats-per{font-size:0.7rem;padding:2px 0;}
.hstats-row .hstats-per .tx-per{
    font-family:"Kanit-medium",Tahoma,Arial;color:#fff;font-size:0.8rem;
    margin-right:8px;
}
.hstats-row.view2{align-items:center;}
.hstats-row.view2 .hstats-cols{width:10%;}
.hstats-row.view2 .hstats-cols.c{width:80%;}
.hstats-row.view2 .hstats-per .tx-per{margin-right:0;}

.perform-tb{padding:0;}
.perform-tb .perform-row{display:flex;}
.perform-tb .perform-row.per-header{background:#222;border-bottom:1px solid #111;color:#fff;}
.perform-tb .perform-row.per-header .perform-cols{border-bottom:none;}
.perform-tb .perform-row.per-header .perform-cols.l{justify-content:flex-start;border-right:none;}
.perform-tb .perform-row.per-header .perform-cols.c{border-right:none;}
.perform-tb .perform-row.per-header .perform-cols.r{justify-content:flex-end;}
.perform-tb .perform-cols{
    display:flex;align-items:center;justify-content:center;
    width:40%;padding:8px 10px;text-align:center;
    border:1px solid #111;border-left:none;border-top:none;
}
.perform-tb .perform-cols.l{text-align:right;border-left:1px solid #222;border-color:#222;}
.perform-tb .perform-cols.c{width:20%;background:#222;}
.perform-tb .perform-cols.r{text-align:left;border-color:#222;}
.perform-tb .perbar-row{display:flex;align-items:center;width:100%;}
.perform-tb .perbar-text{width:15%;text-align:center;font-size:0.7rem;}
.perform-tb .perbar-text .tx-per{
    font-family:"Kanit-medium",Tahoma,Arial;color:#fff;font-size:0.8rem;
    margin-right:8px;
}
.perform-tb .perbar-graph{width:85%;}
.perform-tb .perbar-graph .bar{
    display:flex;height:8px;overflow:hidden;width:90%;margin:0 auto;background:#666;
    border-radius:6px;-khtml-border-radius:6px;-moz-border-radius:6px;
}
.perform-tb .perbar-graph .bar .bar-percent{background:#5abec5;}
.perform-tb .perform-cols.l .perbar-graph .bar .bar-percent{margin-left:auto;}

.trends-row{background:#222;padding:8px 10px;margin-bottom:3px;color:#aaa;}
.trends-row strong{font-family:"Kanit-medium",Tahoma,Arial;color:#fff;font-weight:normal;}

.mpreview-box{margin:0 auto 20px auto;}
.mpreview-box a{color:#aaa;}
.mpreview-box.m-last{display:flex;justify-content:space-between;}
.mpreview-box .box-columns{width:49.2%;}
.mpreview-box .mpreview-nav{display:flex;background:#222;padding:3px 8px;}
.mpreview-box .mpreview-nav .mnav-btn{display:inline-block;padding:0 6px;color:#fff;font-size:0.65rem;}
.mpreview-box .mpreview-nav .mnav-btn.active{
    background:#4dc403;border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;
}
.mlist-row{
    display:flex;align-items:center;flex-wrap:wrap;background:#222;padding:6px 0;
    margin-top:3px;color:#aaa;
}
.mlist-row:hover{background:#292929;transition:all .3s ease-in-out;color:#aaa;}
.mlist-row .mlist-cols{position:relative;padding:0 5px;text-align:center;}
.mlist-row .mlist-cols.date{width:10%;}
.mlist-row .mlist-cols.team{width:31%;}
.mlist-row .mlist-cols.team.home{text-align:right;}
.mlist-row .mlist-cols.team.away{text-align:left;}
.mlist-row .mlist-cols.score{width:12%;}
.mlist-row .mlist-cols.program{width:16%;}
.mlist-row .score-note{font-size:0.65rem;color:#c43d03;}
.mlist-row .icon-results{
    display:inline-block;font-size:0.65rem;color:#fff;text-align:center;
    width:15px;height:16px;line-height:15px;margin-right:4px;
    border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;
}
.mlist-row .icon-results.win{background:#4dc403;}
.mlist-row .icon-results.draw{background:#747379;}
.mlist-row .icon-results.lost{background:#ca0303;}

.mlist-row.r-matchlast .mlist-cols.date{width:20%;}
.mlist-row.r-matchlast .mlist-cols.team{width:25%;}
.mlist-row.r-matchlast .mlist-cols.score{width:15%;}
.mlist-row.r-matchlast .mlist-cols.program{width:15%;}
.mlist-row.r-matchlast .bg-score{width:50px;padding:0 0;}

.mpreview-tded{
    margin:40px 0 20px 0;text-align:center;
    font-family:"Kanit-medium",Tahoma,Arial;font-size:1.35rem;color:#fff;
}
.mpreview-tded .h-label{color:#fd5e56;}


@media screen and (min-width:590px) and (max-width:919px){
    .matchs-preview{padding:0 0;}
    .mhead-cols.team{width:15%;}
    .mhead-cols.program{width:70%;}

    .mlist-row .mlist-cols{font-size:0.8rem;}
    .mlist-row .mlist-cols.team{width:31%;}
    .mlist-row .mlist-cols.score{width:18%;}
    .mlist-row .mlist-cols.program{font-size:0.7rem;}

    .mlist-row.r-matchlast .mlist-cols.team{width:23%;}
    .mlist-row.r-matchlast .mlist-cols.score{width:19%;}
}

@media screen and (min-width:280px) and (max-width:589px){
    .matchs-preview{padding:0 0;}
    .mpreview-h1{font-size:1rem;}
    .mpreview-h2{font-size:0.9rem;}
    .mpreview-h2 img{max-height:18px;}
    .mpreview-h2 .text{width:70%;text-align:left;}
    .mpreview-h2 .button{width:30%;}

    .mpreview-head{flex-wrap:wrap;}
    .mhead-cols.team{width:50%;order:1;}
    .mhead-cols.program{width:100%;order:3;padding-top:0;}
    .mhead-cols .hteam-logo{height:70px;width:70px;}

    .hstats-row{gap:4px 4px;}
    .hstats-row .hstats-cols{font-size:0.7rem;}
    .hstats-row .hstats-graph .bar-label{font-size:0.7rem;left:0;}
    .hstats-row .hstats-graph .bar-label.r{right:0;}
    .hstats-row .hstats-graph .bar{width:100%;}
    .hstats-row.view2 .hstats-cols{width:15%;}
    .hstats-row.view2 .hstats-cols.c{width:70%;}
    
    .perform-tb .perbar-row{flex-wrap:wrap;}
    .perform-tb .perbar-text{width:100%;}
    .perform-tb .perbar-graph{width:100%;}
    .perform-tb .perform-cols.c{font-size:0.8rem;}
    .perform-tb .perform-cols.r .perbar-text{order:1;}
    .perform-tb .perform-cols.r .perbar-graph{order:2;}
    
    .trends-row{font-size:0.8rem;}

    .mpreview-box.m-last{flex-wrap:wrap;}
    .mpreview-box .box-columns{width:100%;}

    .mlist-row .mlist-cols{font-size:0.8rem;}
    .mlist-row .mlist-cols.team{width:31%;}
    .mlist-row .mlist-cols.score{width:18%;}
    .mlist-row .mlist-cols.program{font-size:0.7rem;}

    .mlist-row.r-matchlast .mlist-cols.team{width:23%;}
    .mlist-row.r-matchlast .mlist-cols.score{width:19%;}

    .mpreview-tded{margin:20px 0 20px 0;}
}