@charset "utf-8";

#topList, #topList * { box-sizing: border-box; margin: 0px; padding: 0px; list-style: none; font-family: inherit; }

@keyframes progress-bar-stripes { 
  0% { background-position: 40px 0px; }
  100% { background-position: 0px 0px; }
}

#topList { width: 100%; margin: 31px 0px 15px; overflow-x: hidden; }

#topList li { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }

.topList__person { display: flex; align-items: center; width: 40%; gap: 10px; }

.topList__person--number { width: 25px; text-align: right; }

.topList__person--ava img { width: 50px; height: 50px; border-radius: 50%; }

.topList__person--name { line-height: 1; flex-grow: 1; }

.topList__progress { display: flex; align-items: center; width: 50%; gap: 10px; }

.progressBar { height: 25px; background-color: green; 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: 2s linear 0s infinite normal none running progress-bar-stripes; transition: width 800ms ease-out; }

.progressCount { white-space: nowrap; }

@media screen and (max-width: 800px) {
  #topList li { flex-direction: column; align-items: flex-start; margin-bottom: 12px; }
  .topList__person, .topList__progress { width: 100%; }
  .topList__progress { margin-top: 8px; padding-left: 35px; }
  .topList__person--number { width: 25px; }
  .topList__person--ava img { width: 40px; height: 40px; }
}