.match-pages{padding-bottom:20px;}
.match-h1{
    background:#a32b2b;color:#fff;padding:0;margin:0;line-height:normal;margin-top:10px;
    font-family:"Kanit-medium",Tahoma,Arial;font-weight:normal;font-size:1rem;
    padding:3px 8px;text-align:left;display:flex;justify-content:space-between;
}
.match-h1 img{max-height:16px;margin-right:3px;margin-top:-2px;}
.match-h1 .h1-left{text-align:left;}
.match-h1 .h1-right{text-align:left;}

.match-navrow{padding:5px 0;text-align:left;margin-bottom:5px;color:#999;}

.match-navpage{font-family:"Kanit",Tahoma,Arial;font-size:1rem;}
.match-navpage .btn-navpage{margin-left:5px;color:#fff;}
.match-navpage .btn-navpage.disable{color:#f5acac;cursor:default;}

.match-statsnav{
    display:flex;border-bottom:1px solid #eee;padding:4px 0;
    font-family:"Kanit",Tahoma,Arial;font-size:0.8rem;color:#999;
}
.match-statsnav .subs-detail{width:72%;text-align:left;}
.match-statsnav .subs-button{width:28%;text-align:right;}
.match-statsnav a.btn-filter{
    display:inline-block;vertical-align:middle;padding:0 7px;margin-left:0;
    background:#333;font-size:0.65rem;color:#aaa;
    cursor:default;text-transform:uppercase;
    border-radius:13px;-khtml-border-radius:13px;-moz-border-radius:13px;
}
.match-statsnav a.btn-filter.first{margin-left:0;}
.match-statsnav a.btn-filter.disable{text-decoration:none;cursor:default;color:#b61919;background:none;}
.match-statsnav a.btn-filter.unactive{text-decoration:none;cursor:pointer;color:#b61919;background:none;}

.match-h2hsum{
    font-family:"Kanit",Tahoma,Arial;font-size:0.9rem;text-align:center;padding:5px 0;
    border-bottom:1px solid #eee;color:#999;
}

.match-h2h{margin-bottom:25px;}
.match-statslast{margin-bottom:25px;display:flex;justify-content:space-between;}
.match-columns{width:49%;}

.match-hrow{
    display:flex;text-align:center;padding:5px 15px 10px 15px;margin-bottom:20px;overflow:hidden;
    font-family:"Kanit",Tahoma,Arial;border-top:1px solid #eee;border-bottom:1px solid #eee;
}
.match-hrow .match-hcols{width:30%;}
.match-hrow .match-hcols.c{
    width:40%;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
    align-self:center;
}
.match-hrow .match-hcols.c div{width:100%;}
.match-hrow .head-thumbs{
    display:inline-block;vertical-align:middle;width:80px;height:80px;
    overflow:hidden;
}
.match-hrow .head-thumbs img{width:100%;display:inline-block;vertical-align:top;}
.match-hrow .head-team{font-family:"Kanit-medium",Tahoma,Arial;font-size:1.1rem;margin-top:5px;}
.match-hrow .head-stadium{font-size:0.8rem;}
.match-hrow .head-pg{font-family:"Kanit-medium",Tahoma,Arial;font-size:1.2rem;margin-top:2px;}
.match-hrow .head-final{
    font-family:"Kanit-medium",Tahoma,Arial;font-size:1.4rem;margin-top:2px;line-height:26px;
    color:#b61919;
}
.match-hrow .head-half{font-size:0.85rem;}
.match-hrow .head-date{margin-top:2px;}
.match-hrow .head-channel{padding:3px 0;text-align:center;}
.match-hrow .head-channel img{display:inline-block;max-height:20px;margin:0 4px 4px 0;}

.row-list{
    display:flex;align-items:center;padding:7px 0;border-bottom:1px solid #eee;position:relative;
    font-family:"Kanit",Tahoma,Arial;font-size:0.85rem;font-weight:normal;
}
.row-list.bg1{background:#e9e9e9;}
.row-list .cols-list{text-align:center;padding:0 3px;}
.row-list .cols-list.c-date{width:10%;}
.row-list .cols-list.c-program{width:20%;}
.row-list .cols-list.c-team{width:30%;}
.row-list .cols-list.c-team.home{text-align:right;}
.row-list .cols-list.c-team.away{text-align:left;}
.row-list .cols-list.c-score{width:10%;}
.row-list .cols-list.c-note{position:absolute;top:6px;right:5px;color:#b61919;}
.row-list .bg-date{
    color:#fff;font-family:"Kanit",Tahoma,Arial;padding:2px 8px;font-size:0.85rem;
    overflow:hidden;background:#333;
    border-radius:15px;-khtml-border-radius:15px;-moz-border-radius:15px;
}
.row-list .bg-score{
    text-align:center;margin:0 auto;
    font-family:"Kanit-medium",Tahoma,Arial;color:#b61919;
}
.row-list .team-logo{
    display:inline-block;vertical-align:middle;width:20px;height:20px;margin-left:8px;margin-top:-2px;
    overflow:hidden;background:#fff;padding:1px;border:1px solid #ddd;
    border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;
}
.row-list .team-logo img{width:100%;display:inline-block;vertical-align:top;}
.row-list .c-team.away .team-logo{margin-left:0;margin-right:8px;}
.row-list .program-pre{display:none;}
.row-list .sc-note{color:#f35858;font-size:0.65rem;}
.row-list .stadium-note{color:#f35858;font-size:0.65rem;}
.row-list .m-ckicon{
    display:inline-block;vertical-align:middle;height:13px;width:13px;line-height:13px;
    font-family:"Kanit",Tahoma,Arial;font-size:0.68rem;color:#fff;text-align:center;
    border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;
}
.row-list .m-ckicon.win{background:#4dc403;}
.row-list .m-ckicon.draw{background:#777;}
.row-list .m-ckicon.lost{background:#eb1f1f;}

.row-list.r-last{padding:7px 0;}
.row-list.r-last .sc-note{display:block;}
.row-list.r-last .program-pre{display:block;}
.row-list.r-last .program-full{display:none;}
.row-list.r-last .bg-score{padding:0 0;font-size:0.8rem;}

.match-statsbar{margin:10px 0;border-top:1px solid;border-left:1px solid;font-family:"Kanit",Tahoma,Arial;}
.match-statsbar, .match-statsbar .sbar-row .sbar-col{border-color:#ddd !important;}
.match-statsbar .sbar-row{display:flex;}
.match-statsbar .sbar-row.header{font-family:"Kanit-medium",Tahoma,Arial;font-size:1rem;color:#b61919;}
.match-statsbar .sbar-row.header .sbar-col, .match-statsbar .sbar-row.header .sbar-col.c{
    background:#f2f2f2;padding:2px;
}
.match-statsbar .sbar-row .sbar-col{
    display:flex;align-items:center;justify-content:center;width:40%;padding:5px;
    text-align:center;border:1px solid;border-left:none;border-top:none;
}
.match-statsbar .sbar-row .sbar-col.c{
    width:20%;background:#f2f2f2;font-family:"Kanit-medium",Tahoma,Arial;font-size:0.85rem;
}
.match-statsbar .sbar-row .cols-line1{width:15%;font-size:0.75rem;}
.match-statsbar .sbar-row .percent{font-family:"Kanit-medium",Tahoma,Arial;color:#111;}
.match-statsbar .sbar-row .qty{color:#999;}
.match-statsbar .sbar-row .cols-line2{width:85%;}
.match-statsbar .sbar-row .bar-boxline{
    display:flex;height:8px;width:96%;margin:0 auto;overflow:hidden;background:#ffdbdb;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.match-statsbar .sbar-row .bar-boxline .bg{display:block;background:#f35858;}

.match-tdedball{
    font-family:"Kanit",Tahoma,Arial;font-size:1.5rem;color:#b61919;
    text-align:center;margin-top:10px;text-decoration:underline;
}
.match-tdedball .i-results{
    height:18px;width:18px;line-height:18px;font-size:0.8rem;
}

@media screen and (min-width:550px) and (max-width:849px){
    .match-statslast{flex-wrap:wrap;}
    .match-columns{width:100%;}

    .row-list .program-pre{display:block;}
    .row-list .program-full{display:none;}

    .match-statsbar .sbar-row .cols-line1{width:20%;}
    .match-statsbar .sbar-row .cols-line2{width:80%;}
}

@media screen and (min-width:280px) and (max-width:549px){
    .match-h1{
        padding:5px 8px;font-size:1rem;
        border-radius:5px;-khtml-border-radius:5px;-moz-border-radius:5px;
    }
    .match-h1 .h1-left{max-width:70%;}

    .match-hrow .match-hcols{padding-left:1%;padding-right:1%;}
    .match-hrow .head-team{font-size:0.85rem;}
    .match-hrow .head-thumbs{width:45px;height:45px;}
    .match-hrow .head-pg{font-size:1rem;}
    .match-hrow .head-final{font-size:1.2rem;}

    .match-statslast{flex-wrap:wrap;}
    .match-columns{width:100%;}

    .match-statsnav{flex-wrap:wrap;}
    .match-statsnav .subs-detail{width:100%;text-align:left;}
    .match-statsnav .subs-button{width:100%;text-align:left;}
    
    .row-list{padding:6px 0;font-size:0.8rem;}
    .row-list .bg-date{padding:0 0;font-size:0.8rem;background:none;color:#141414;}
    .row-list .bg-score{width:90%;}
    .row-list .team-logo{display:none;}
    .row-list .program-pre{display:block;}
    .row-list .program-full{display:none;}
    .row-list .cols-list.c-date{width:22%;text-align:left;padding-right:4px;}
    .row-list .cols-list.c-program{width:13%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .row-list .cols-list.c-team{width:22%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .row-list .cols-list.c-score{width:14%;}
    .row-list .cols-list.c-team.away{padding-left:3px;padding-right:0px;}
    .row-list.r-last .bg-score{
        width:90%;font-size:0.6rem;
        border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;
    }

    .match-statsbar .sbar-row .sbar-col{flex-wrap:wrap;}
    .match-statsbar .sbar-row .sbar-col.c{font-size:0.8rem;padding:4px;}
    .match-statsbar .sbar-row .cols-line1{width:100%;}
    .match-statsbar .sbar-row .cols-line2{width:100%;}
    .match-statsbar .sbar-row .sbar-col.r .cols-line1{order:1;}
    .match-statsbar .sbar-row .sbar-col.r .cols-line2{order:2;}
}