.programball{padding:5px 12px 15px 12px;}

.programs-box{margin:5px 0;text-align:center;}
.program-head{
    margin:8px 0 0 0;padding:4px;text-align:left;
    font-size:1rem;font-weight:500;color:#d78708;
}
.program-head .pg-img{
    display:inline-block;vertical-align:middle;width:20px;height:20px;overflow:hidden;
    margin:-5px 3px 0 0;text-align:center;
    border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;
}
.program-head .pg-img img{vertical-align:top;width:100%;}

.program-rows{
    display:flex;flex-direction:row;background:#fdf1ba;font-family:Tahoma,Arial;font-size:0.8rem;
    border-left:1px solid #fff;border-right:1px solid #fff;
}
.program-rows.pg-header{font-family:"Kanit",Tahoma,Arial;font-weight:500;background:#fed000;}
.program-cols{
    text-align:center;position:relative;
    padding:3px 6px;border:1px solid #fff;border-left:none;border-top:none;
}
.program-cols.pg-time{width:8%;}
.program-cols.pg-live{width:4%;}
.program-cols.pg-team{width:40%;display:flex;flex-direction:row;padding:0 6px;}
.program-cols.pg-team .home{width:43%;text-align:right;padding:3px 0;padding-right:8px;}
.program-cols.pg-team .rate{width:14%;border-left:1px solid #fff;border-right:1px solid #fff;padding:3px 0;}
.program-cols.pg-team .away{width:43%;text-align:left;padding:3px 0;padding-right:0;padding-left:8px;}
.program-cols.pg-team .home.active, .program-cols.pg-team .away.active{background:#ace7fc;}
.program-cols.pg-team .logo-team{
    display:inline-block;vertical-align:middle;width:18px;height:18px;
    margin-left:3px;overflow:hidden;
    border-radius:50%;-khtml-border-radius:50%;-moz-border-radius:50%;
}
.program-cols.pg-team .away .logo-team{margin-left:0;margin-right:3px;}
.program-cols.pg-half{width:8%;}
.program-cols.pg-full{width:8%;}
.program-cols.pg-channel{width:26%;}
.program-cols.pg-channel img{display:inline-block;margin-right:3px;max-height:20px;}
.program-cols.pg-stats{width:6%;border-right:none;}
.program-cols.pg-stats img{max-height:18px;}

.program-cols .m-card{
    display:inline-block;vertical-align:middle;width:11px;height:13px;text-align:center;
    background:#666;color:#fff;font-weight:400;font-size:7px;line-height:13px;
    margin:-2px 2px 0 2px;border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;
    -webkit-box-shadow: 2px 2px 7px -4px rgba(0,0,0,0.55);
    -moz-box-shadow: 2px 2px 7px -4px rgba(0,0,0,0.55);
    box-shadow: 2px 2px 7px -4px rgba(0,0,0,0.55);
}
.program-cols .m-card.yellow{background:#ff0;color:#212121;}
.program-cols .m-card.red{background:#df251e;color:#fff;}
.program-cols .m-card.none{display:none;}
.program-cols .m-time{color:#4871e4;font-size:0.7rem;font-weight:600;}
.program-cols .m-time.half{color:#fab226;font-size:0.7rem;font-weight:600;}
.program-cols .m-time img{
    display:inline-block;vertical-align:top;margin:4px 0 0 2px;max-height:3px;
}
.program-cols .score-final{color:#d30404;font-size:0.7rem;font-weight:600;}
.program-cols .bg-score{
    display:block;background:#232323;margin:0 auto 0 auto;
    font-size:13px;color:#fff;width:50px;max-width:100%;
    position:relative;border-radius:15px;-khtml-border-radius:15px;-moz-border-radius:15px;
}
.program-cols .bg-score.none{background:none;color:#262626;}
.program-cols .bg-score .m-note{
    display:inline-block;position:absolute;right:-8px;top:-6px;
    font-weight:400;font-size:0.85rem;color:#df251e;
}

@media screen and (min-width: 590px) and (max-width: 889px){
    .programball{padding:5px 0 15px 0;}

    .program-cols{font-size:0.8rem;}
    .program-cols.pg-team .rate{width:14%;font-size:0.7rem;padding-top:3px;}
    .program-cols.pg-team .logo-team{display:none;}
}

@media screen and (min-width:280px) and (max-width:589px){
    .programball{padding:5px 0 15px 0;}
    
    .program-rows{flex-wrap:wrap;}
    .program-rows.pg-header{border-radius:5px;-khtml-border-radius:5px;-moz-border-radius:5px;}
    .program-rows.pg-header .program-cols.tv, .program-rows.pg-header .program-cols.stats{border-top:1px solid #ddd;}
    .program-rows.pg-header .program-cols.pg-team{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;}
    .program-rows.pg-header .program-cols.pg-team .home, .program-rows.pg-header .program-cols.pg-team .away{width:100%;}
    .program-rows.pg-header .program-cols.pg-team .away{text-align:right;}
    .program-rows.pg-header .program-cols.pg-team .home, 
    .program-rows.pg-header .program-cols.pg-team .away{display:block;width:50%;text-align:center;}
    .program-rows.pg-header .program-cols .rate{display:none;}
    .program-cols.pg-time{width:18%;}
    .program-cols.pg-live{width:11%;}
    .program-cols.pg-half{width:11%;}
    .program-cols.pg-full{width:11%;border-right:none;}
    .program-cols.pg-team{width:49%;}
    .program-cols.pg-channel{width:78%;}
    .program-cols.pg-stats{width:22%;}
    .program-cols.pg-team{font-size:0.8rem;position:relative;display:flex;flex-direction:row;flex-wrap:wrap;}
    .program-cols.pg-team .home{
        display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
        width:78%;text-align:left;padding-right:0;
    }
    .program-cols.pg-team .rate{
        position:absolute;top:4px;right:0;justify-content:flex-end;
        font-size:0.7rem;width:35px;text-align:right;border-left:none;border-right:none;
    }
    .program-cols.pg-team .away{
        display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
        width:78%;text-align:left;padding-left:0;
    }
    .program-cols.pg-team .m-vs{display:none;}
    .program-cols.pg-team .pg-team1{order:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .program-cols.pg-team .pg-team2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .program-cols.pg-team .fx-team{order:3;}
    .program-cols.pg-team .fx-tbhome{order:2;margin-left:2px;font-size:0.7rem;}
    .program-cols.pg-team .fx-tbaway{margin-left:2px;font-size:0.7rem;}

    .programs-box .bg-score{line-height:19px;}
    .program-cols .score-final1, .program-cols .score-final2{display:block;line-height:19px;font-size:0.8rem;}
    .program-cols .score-half1, .program-cols .score-half2{display:block;line-height:19px;font-size:0.8rem;}
    .program-cols .score-dashe{display:none;}
    .program-cols .bg-score{background:none;margin:0 auto 0 auto;font-size:0.8rem;color:#262626;}

    .program-cols.pg-team .logo-team{display:none;}
}