.play-leaderboard {
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
  left: 10px;
  max-height: 680px;
  position: absolute;
  width: 260px;
}

.play-leaderboard.done-leaderboard {
  left: unset;
  width: 417px;
}

.play-leaderboard md-list-item {
  width: 228px;
}

.play-leaderboard.done-leaderboard md-list-item {
  width: 385px;
}

.play-leaderboard.done-leaderboard .play-leaderboard--rank-item--name {
   min-width: 190px;
   max-width: 190px;
}

.isMe {
  background: rgb(57,73,171) !important;
  color: white;
}

.play-leaderboard md-list {
  padding: 0;
  max-height: 680px;
}

.play-leaderboard md-list .md-subheader {
  height: 40px !important;
  min-height: 40px !important;
}

.play-leaderboard--rank-item--done-in,
.play-leaderboard--rank-item--done-at,
.play-leaderboard--rank-item--progress {
  border-left: 2px solid gray;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px;
}

.play-leaderboard.done-leaderboard .play-leaderboard--rank-item { border-right: none; }

.play-leaderboard--rank-item {
  background-color: white;
  /*border-right: 2px solid gray;*/
  font-size: 0.75rem;
  height: 40px !important;
  min-height: 40px !important;
  position: absolute !important;
  top: 0;

  transition-duration        : 0.5s;
  transition-property        : border-radius, box-shadow, height, left, opacity, top, font-size;
  transition-timing-function : ease-in-out;
  width: 168px;
}

/*.play-leaderboard--rank-item[data-order="1"]{*/
/*  font-size: 0.8rem;*/
/*}*/

.play-leaderboard--rank-item--is-moving {
  box-shadow    : 6px 6px 12px black;
  left          : -1mm;
  z-index: 2;
}

.play-leaderboard--rank-item--order {
  color: #636363;
  -webkit-transition: color 0.5s ease-in-out;
  -moz-transition: color 0.5s ease-in-out;
  transition: color 0.5s ease-in-out;
  min-width: 20px;
  max-width: 20px;
}
.play-leaderboard--rank-item--order[data-order="1"]{
  color: gold;
}
.play-leaderboard--rank-item--order[data-order="2"]{
  color: silver;
}
.play-leaderboard--rank-item--order[data-order="3"]{
  color: brown;
}

.play-leaderboard--rank-item--name {
  max-width: 190px;
  min-width: 190px;
}

.play-leaderboard--rank-item--progress {
  max-width: 25px;
  min-width: 25px;
  text-align: center;
}

.play-leaderboard--rank-item--done-at {
  max-width: 70px;
  min-width: 70px;
  text-align: center;
}

.play-leaderboard--rank-item--done-in {
  max-width: 70px;
  min-width: 70px;
  text-align: right;
}