.tb-main{margin-top:10px;margin-bottom:15px;}

.table-box{display:flex;}
.table-side{
    width:20%;padding:8px;overflow:hidden;background:#207ce5;
    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);
}
.table-side .side-country{position:relative;overflow:hidden;}
.table-side .side-country a{
    display:block;font-weight:400;color:#fff;background:#3abfef;
    padding:6px 0 6px 15px;margin-top:3px;
    border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;
}
.table-side .side-country::before{
    position:absolute;left:10px;top:14px;color:#fff;
    font-family:"Font Awesome 5 Free";font-weight:900;content:"\f0da";
}
.table-side .side-country.active::before{content:"\f0d7";left:8px;}
.table-side .side-pg{display:none;position:relative;}
.table-side .side-pg.active{display:block;}
.table-side .side-pg.active a.active{color:#207ce5;}
.table-side .side-pg.active a.active::before{
    position:absolute;left:15px;top:9px;color:#207ce5;font-size:0.85rem;
    font-family:"Font Awesome 5 Free";font-weight:900;content:"\f0da";
}
.table-side .side-pg a{
    display:block;padding:4px 0 4px 25px;color:#999;
    background:#fff;margin-top:2px;position:relative;
}
.table-side .side-pg a:last-child{margin-bottom:4px;}
.table-side .side-pg a:hover{background:#f2f2f2;}

.table-detail{width:79%;margin-left:1%;}
.table-league{
    padding:5px 0 5px 0;margin:0 auto 10px auto;border-bottom:1px solid #3abfef;
    font-size:1.1rem;font-weight:600;color:#333;
}
.table-league .p-logo{
    display:inline-block;vertical-align:middle;width:35px;height:35px;
    background:#fff;border:2px solid #ddd;overflow:hidden;margin-right:6px;
    border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;
}
.table-league .p-logo img{display:inline-block;width:100%;vertical-align:top;}

.table-navseason{margin:4px 6px;}
.table-navseason .btn-season{
    display:inline-block;vertical-align:middle;padding:2px 15px;margin:0 6px 6px 0;
    background:#ddd;font-size:0.7rem;color:#999;text-align:center;
    border-radius:12px;-khtml-border-radius:12px;-moz-border-radius:12px;
}
.table-navseason a .btn-season{color:#fff;background:#d78708;}

.table-ranking{
    border:1px solid;border-top:1px solid;text-align:center;overflow:hidden;margin-bottom:10px;
    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;
}
.table-ranking.mpreview-tb{margin-bottom:0;}
.table-ranking.mpreview-tb .ranking-row.h-ranks{background:#999;}
.table-ranking.mpreview-tb .ranking-row.h-ranks .ranking-cols{height:22px;line-height:22px;}
.ranking-row{display:flex;border-top:1px solid;}
.ranking-row.h-ranks{background:#333;border-top:none;overflow:hidden;}
.ranking-row.h-ranks .ranking-cols{
    height:30px;line-height:30px;font-size:0.75rem;font-weight:500;color:#fff;
    overflow:hidden;white-space:nowrap;border-right:1px solid;
}
.ranking-row.h-ranks .ranking-cols.last{border-right:none;}
.ranking-row.h-ranks.h-labels{border-bottom:1px solid;}
.ranking-row.h-ranks.h-labels .ranking-cols{
    width:32.5%;height:30px;line-height:30px;
    font-size:0.75rem;font-weight:500;color:#fff;
}
.ranking-row.h-ranks.h-labels .ranking-cols.home{width:22.5%;}
.ranking-row.h-ranks.h-labels .ranking-cols.away{width:22.5%;}
.ranking-row.h-ranks.h-labels .ranking-cols.all{width:22.5%;}
.ranking-row.nohome.h-ranks .ranking-cols{width:7%;}
.ranking-row.nohome.h-ranks .ranking-cols.club{width:37%;}
.ranking-row.nohome .ranking-cols{width:7%;}
.ranking-row.nohome .ranking-cols.club{width:37%;}
.ranking-cols{
    width:4.5%;height:30px;line-height:30px;font-size:0.8rem;
    white-space:nowrap;overflow:hidden;padding:0;border-right:1px solid;
}
.ranking-cols .h-group{margin-top:8px;}
.ranking-cols .bg-orders{
    display:inline-block;vertical-align:middle;width:18px;height:18px;line-height:18px;
    margin-top:-2px;font-size:0.65rem;color:#fff;
    border-radius:50%;-khtml-border-radius:50%;-moz-border-radius:50%;
}
.ranking-cols.club{
    width:23.5%;padding-left:6px;text-align:left;text-overflow:ellipsis;
    font-size:0.8rem;font-weight:500;
}
.ranking-cols.club .club-logo{
    display:inline-block;width:16px;height:16px;vertical-align:middle;
    overflow:hidden;margin-right:5px;
    border-radius:50%;-khtml-border-radius:50%;-moz-border-radius:50%;
}
.ranking-cols.club .club-logo img{display:inline-block;width:100%;vertical-align:top;}
.ranking-cols.last{border-right:none;}
.ranking-cols, .ranking-row.h-ranks.h-labels, .ranking-row.h-ranks .ranking-cols,
.ranking-row, .table-ranking{border-color:#ddd !important;}

.raking-nfoot{font-size:0.7rem;color:#cf1a1a;padding:2px 6px;text-align:left;}
.raking-nfoot.none{display:none;}

.ranking-colors{background:#eee;padding:5px 8px;font-size:0.7rem;}
.ranking-colors .box-color{display:inline-block;width:23%;vertical-align:top;margin-bottom:3px;text-align:left;}
.ranking-colors .box-color .bg{
    display:inline-block;vertical-align:middle;width:16px;height:16px;line-height:16px;
    margin-right:3px;border-radius:50%;-khtml-border-radius:50%;-moz-border-radius:50%;
}
.ranking-colors .box-color span{display:inline-block;vertical-align:middle;}

@media screen and (min-width: 590px) and (max-width: 889px){
    .tb-main{padding:5px 0 15px 0;}
    
    .table-detail{width:73%;}
    .table-side{width:26%;}
    .table-side .side-country{font-size:0.8rem;}
    
    .ranking-row.h-ranks.h-labels{display:none;}
    .ranking-cols{width:10%;}
    .ranking-cols.home, .ranking-cols.away{display:none;}
    .ranking-cols.club{width:30%;}
    .ranking-cols.club .club-logo{display:none;}
    
    .ranking-colors .box-color{width:32%;margin:0 0 3px 0;}
}

@media screen and (min-width: 280px) and (max-width: 589px){
    .tb-main{padding:5px 0 15px 0;}
    
    .table-box{flex-wrap:wrap;}
    .table-detail{width:100%;margin-left:0;order:1;}
    .table-side{width:100%;margin-top:10px;order:2;}
    
    .ranking-row.h-ranks.h-labels{display:none;}
    .ranking-cols{width:10%;font-size:0.75rem;}
    .ranking-cols.home, .ranking-cols.away{display:none;}
    .ranking-cols.club{width:30%;font-size:0.75rem;font-weight:400;}
    .ranking-cols.club .club-logo{display:none;}
    
    .ranking-colors .box-color{display:block;width:100%;margin:0 0 5px 0;}
}