.main_shkala {
    box-shadow: 0 0 0 1px #cfcabf;
    position: absolute;
    top: 40px;
    margin-left: 1px; 
    width: 98.5%; 
    height: 32px;
    border-radius: 8px;
    z-index: -1;
}
  
.gradient_shkala {
    background: linear-gradient(90deg, #8b332f 0%, #fe968f 100%); 
    position: absolute;
    left: 0; 
    top: 0;
    width: 15%;
    height: 100%;
    box-sizing: border-box;
    animation: grow-horizontal 1.5s ease-out forwards; 
    transform-origin: left;
    border-radius: 8px;
}

@keyframes grow-horizontal {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.procent_shkala{   
    position: absolute;
    font-family: 'Roboto Condensed';
    top: 3px;
    font-size: 14px;
    left: -7px;
    z-index: 3;
    font-weight: bold;
    color: transparent;
    transition: all .5s;
    text-align: center;
    width: 21px;
}

.procent_shkala:hover {
font-size: 14px;
    left: -7px;
    color: var(--mem-col-v3);
    text-align: center;
    width: 21px;
    text-shadow: 0 0 2px var(--mem-col-v1);
    background: var(--mem-bac-v2);
    border-radius: 15px;
    border: 1px solid white;
}

.img_shkala{
position: absolute;
    left: 8px;
    top: 54px;
    opacity: 0.8;
}

.img_shkala img {
    height: 20px !important;
    width: 20px !important;
}

#profile-right .main_shkala, #profile-right .img_shkala {
    display: none;
}

@media screen and (max-width: 540px) {
    .main_shkala {
        top: 30px;
        width: 99.5%; 
    }
}