/* Ranks / Table - Dark Theme */
.section-ranks{
    margin-bottom:25px;padding:10px;margin-top:5px;
}

.ranks-table{display:flex;justify-content:space-between;}
.ranks-right{
    width:20%;padding:8px;background:#0f2341;
    border-radius:3px;
}
.ranks-left{width:79%;}

.ranks-hprogram{
    font-family:"Prompt",Tahoma,Arial;font-size:1.2rem;font-weight:bold;padding:5px 0;color:#e8edf3;
    border-bottom:1px solid #00a651;margin-bottom:8px;
}
.ranks-hprogram .logo{
    display:inline-block;vertical-align:middle;width:40px;height:40px;
    border:1px solid #1a2a44;margin-right:2px;overflow:hidden;padding:2px;
    border-radius:4px;
}
.ranks-hprogram .logo img{display:inline-block;width:100%;vertical-align:top;}

.ranks-navbtn{margin:4px 6px;}
.ranks-navbtn .btn-navbtn{
    display:inline-block;vertical-align:middle;background:#1a2a44;font-size:0.7rem;color:#6b7280;
    padding:4px 15px;margin:0 5px 5px 0;text-align:center;
    border-radius:14px;
}
.ranks-navbtn a .btn-navbtn{color:#fff;background:#00a651;}

.ranks-tbpoint{
    border:1px solid #1a2a44;border-top:1px solid #1a2a44;overflow:hidden;margin-bottom:8px;
    border-top-left-radius:8px;border-top-right-radius:8px;
}
.ranks-tbpoint.mviews{margin-bottom:0;}
.ranks-tbpoint.mviews .tbp-row.row-header .tbp-col{height:22px;line-height:22px;}

.tbp-col, .tbp-row.row-header.row-htop, .tbp-row.row-header .tbp-col,
.tbp-row, .ranks-tbpoint{border-color:#1a2a44 !important;}
.tbp-row{display:flex;border-top:1px solid;text-align:center;color:#e8edf3;}
.tbp-row.bg-1{background:none;}
.tbp-row.row-header{overflow:hidden;border-top:none;background:#0f2341;color:#9ca3af;}
.tbp-row.row-header .tbp-col{
    height:30px;line-height:30px;overflow:hidden;white-space:nowrap;border-right:1px solid;
    font-family:"Prompt",Tahoma,Arial;font-size:0.75rem;font-weight:500;
}
.tbp-row.row-header .tbp-col.last{border-right:none;}
.tbp-row.row-header.row-htop{border-bottom:1px solid;}
.tbp-row.row-header.row-htop .tbp-col{width:32.5%;height:30px;line-height:30px;}
.tbp-row.row-header.row-htop .tbp-col.home{width:22.5%;}
.tbp-row.row-header.row-htop .tbp-col.away{width:22.5%;}
.tbp-row.row-header.row-htop .tbp-col.all{width:22.5%;}
.tbp-row.cup.row-header .tbp-col{width:7%;}
.tbp-row.cup.row-header .tbp-col.team{width:37%;}
.tbp-row.cup .tbp-col{width:7%;}
.tbp-row.cup .tbp-col.team{width:37%;}
.tbp-col{
    width:4.5%;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;
    font-size:0.8rem;padding:0;border-right:1px solid;
}
.tbp-col .h-group{margin-top:8px;}
.tbp-col .bg-sort{
    display:inline-block;vertical-align:middle;width:18px;height:18px;line-height:18px;
    margin-top:-2px;font-size:0.7rem;color:#fff;
    border-radius:50%;
}
.tbp-col.team{
    width:23.5%;text-align:left;padding-left:6px;text-overflow:ellipsis;
    font-family:"Prompt",Tahoma,Arial;font-size:0.8rem;font-weight:500;
}
.tbp-col.team .team-logo{
    display:inline-block;width:17px;height:17px;vertical-align:middle;
    overflow:hidden;margin-right:4px;
    border-radius:50%;
}
.tbp-col.team .team-logo img{display:inline-block;width:100%;vertical-align:top;}
.tbp-col.last{border-right:none;}


.ranks-noted{padding:3px 8px;text-align:left;color:#e74c3c;font-size:0.7rem;}
.ranks-noted.none{display:none;}

.ranks-quota{padding:6px 8px;font-size:0.7rem;border-top:1px solid #1a2a44;border-bottom:1px solid #1a2a44;color:#9ca3af;}
.ranks-quota .quota-box{display:inline-block;vertical-align:top;width:23%;text-align:left;margin-bottom:3px;}
.ranks-quota .quota-box .bg{
    display:inline-block;vertical-align:middle;width:17px;height:17px;line-height:17px;margin-right:3px;
    border-radius:50%;
}
.ranks-quota .quota-box span{display:inline-block;vertical-align:middle;}

.ranks-right .country-row{position:relative;overflow:hidden;}
.ranks-right .country-row a{
    display:block;background:#162d50;padding:6px 0 6px 15px;margin-top:3px;
    font-family:"Prompt",Tahoma,Arial;font-weight:400;color:#e8edf3;
    border-radius:4px;
}
.ranks-right .country-row a:hover{background:#1a3560;}
.ranks-right .country-row::before{
    position:absolute;top:13px;left:10px;
    font-family:"Font Awesome 5 Free";font-weight:900;content:"\f0da";color:#9ca3af;
}
.ranks-right .country-row.active::before{content:"\f0d7";left:8px;}
.ranks-right .league-row{display:none;position:relative;font-family:"Prompt",Tahoma,Arial;}
.ranks-right .league-row.active{display:block;}
.ranks-right .league-row.active a.active{color:#00a651;}
.ranks-right .league-row.active a.active::before{
    position:absolute;left:17px;top:11px;color:#00a651;font-size:0.85rem;
    font-family:"Font Awesome 5 Free";font-weight:900;content:"\f0da";
}
.ranks-right .league-row a{
    display:block;background:#0a1628;padding:6px 0 6px 30px;color:#9ca3af;
    margin-top:3px;position:relative;border-radius:4px;
}
.ranks-right .league-row a:hover{background:#0f2341;}

@media screen and (min-width: 590px) and (max-width: 799px){
    .ranks-left{width:70%;}
    .ranks-right{width:29%;}
    .ranks-right .country-row{font-size:0.8rem;}

    .ranks-hprogram{font-size:1.1rem;}
    .ranks-hprogram .logo{width:30px;height:30px;}
    
    .tbp-row.row-header.row-htop{display:none;}
    .tbp-col{width:10%;}
    .tbp-col.home, .tbp-col.away{display:none;}
    .tbp-col.team{width:30%;}
    .tbp-col.team .team-logo{display:none;}
    
    .ranks-quota .quota-box{width:32%;margin:0 0 3px 0;}
}

@media screen and (min-width: 280px) and (max-width: 589px){
    .ranks-table{flex-wrap:wrap;}
    .ranks-left{width:100%;margin-left:0;}
    .ranks-right{width:100%;margin-top:10px;}

    .ranks-hprogram{font-size:1.1rem;}
    .ranks-hprogram .logo{width:30px;height:30px;}
    
    .tbp-row.row-header.row-htop{display:none;}
    .tbp-col{width:10%;font-size:0.75rem;}
    .tbp-col.home, .tbp-col.away{display:none;}
    .tbp-col.team{width:30%;font-size:0.75rem;font-weight:400;}
    .tbp-col.team .team-logo{display:none;}
    
    .ranks-quota .quota-box{display:block;width:100%;margin:0 0 5px 0;}
}
