#topList, #topList * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: inherit;
}
@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
#topList{
    width: 100%;
}
#topList{
    width: 100%;
}
#topList li{
    display: flex;
    justify-content: space-between;
        font-size: 14px;
}
.topList__person {
    width: 40%;
    display: grid;
    grid-template-columns: 25px min-content 1fr;
    align-items: center;
}
.topList__person--name{
    line-height: 1;
}

.topList__person--ava img {
    width: 50px;
    height: 50px;
    margin-left: 14px !important;
    margin-right: 8px !important;
}
.topList__progress{
    display: flex;
    align-items: center;
    width: 50%;
}

.progressBar {
    display: block;
    height: 25px;
    margin: 0 20px !important;
    background-color: #1976D2;
    background-image: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.1) 25%,
            transparent 25%,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.1) 75%,
            transparent 75%,
            transparent
    );
    background-size: 40px 40px;
    border-radius: 3px;
    animation: progress-bar-stripes 2s linear infinite;
    transition: 800ms ease-out;
    width: 40%;

}
@media screen and (max-width: 800px) {
    #topList li{
        flex-direction: column;
        margin-bottom: 12px !important;
    }
    .topList__progress {
        margin-top: 2px !important;
        margin-left: 19px !important;
    }
    .topList__person, .topList__progress {
        width: 100%;
    }
}