.rank-page{
display: grid;
    gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--main-background3);
    padding: 20px;
    border-radius: 8px;  
    user-select:none;
} 
.rank-page .rank{
    color: var(--main-color-hight);    
    background: var(--main-background);
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 8px;
    cursor:pointer;
    text-align: center;    
}  
.rank-page .rank:hover{
    filter: brightness(0.8);  
}
.rank-page .rank.active{
background:var(--main-gradient)!important;
    color: #000!important;
}
.rank-page .rank hr{
margin: 0.4rem;    
    background: currentColor;
}
.rank-page .rank img{
    width: 100%;    
}  
.rank-page .rank .description{
    align-items: center;
    display: flex;
    justify-content: center; 
} 
.rank-page .rank .description .badges{
color: currentColor;
    font-size: 12px;
    background: #ffffff1f;
    font-weight: bold;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 8px;
    margin-left: 10px;
} 

.rank-page .rank .needDeposit{
    font-size: 13px;
    text-align: center;
}
.rank-page .rank .name{
    font-weight: bold;    
}    


.rank .wagerProgress{
    width: 100%;
    height: 20px;
    background-color: transparent;
    border: 1px solid #348c3438;
    border-radius: 11px;
}
.rank .wagerProgress::-webkit-progress-bar {
background:transparent;
border-radius:8px;
}
.rank .wagerProgress::-webkit-progress-value {
background:linear-gradient(45.87deg, #30952f 6.6%, #5ae357 102.94%);
border-radius:8px;
opacity:0.8;
}
.rank .progressWag{
    position: relative;
}

.rank .progressWag .progres{
position: absolute;
    font-size: 11px;
    left: 0;
    right: 0;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding: 0 4px;
}   
.rank .progressWag .symbolOk{
position: absolute;
    font-size: 12px;
    left: 0;
    right: 0;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    display:none;
}   

@media screen and (max-width:960px) {
.rank-page {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}   
@media screen and (max-width:768px) {
.rank-page {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}   
@media screen and (max-width:640px) {
.rank-page {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}  
@media screen and (max-width:480px) {
.rank-page {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}