@import "base/variables";
@import "vendor/normalize";

@import "objects/contextmenu";

@keyframes glue-keyframes-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@import "base/type";
@import "base/reset";
@import "objects/grid";
@import "components/icons";
@import "utilities/clearfix";
@import "utilities/layout";
@import "utilities/scrollbar";
@import "utilities/drag-drop";

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}
.collapse.in {
  height: auto;
}

@import "components/buttons";
@import "components/forms";
@import "components/dropdowns";
@import "components/divider";
@import "components/tables";
@import "components/list-groups";
@import "components/share-object";
@import "components/carousel";
@import "components/navs";
@import "components/navbar";
@import "components/main-menu";
@import "components/tooltips";
@import "components/popovers";
@import "components/alerts";
@import "components/labels";
@import "components/badges";
@import "components/slider";
@import "components/progress-bar";
@import "components/media-objects";

/**
 * Puffs
 *
 * Puff is a component that's surfacing few images and is a link to the
 * page with more content. <br />
 * In order for puffs to get the right sizes they need to be placed in
 * the grid in <code>.col-sm-6</code> (two puffs per row) or
 * <code>.col-sm-4</code> (three puffs per row). To keep the right
 * proportion the row should take the full width of the container.
 * Putting puffs in other grid classes than <code>.col-sm-6</code>
 * or <code>.col-sm-4</code> might make puffs not behave
 * as expected.
 * <br />
 * <a href="puff-page.html" class="button">See Demo Page</a>
 *
 * Template: puff-demo
 * Data: puffs-object-demo
 *
 * Styleguide 70.20
 */
.puff {
  background-color: $secondary-view-bg-color;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  will-change: -webkit-filter;
  border-bottom: none;
}
.puff:hover .pf-title {
  border-bottom-color: currentcolor;
}
.pf-images {
  padding-bottom: 80px;
  flex: 1;
}
.pf-bg {
  background-size: cover;
  position: absolute;
  bottom: -100px;
  left: -100px;
  right: -100px;
  top: -100px;
  -webkit-filter: blur(50px);
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.pf-media-object {
  box-shadow: 0px 1px 5px rgba($primary-text-color, 0.4);
  top: 36px;
  display: none;
  left: 50%;
  position: absolute;
  width: 80px;
  z-index: 1;
}
.pf-media-object:nth-child(1) {
  display: block;
  top: 25px;
  margin-left: -40px;
  z-index: 3;
}
.pf-media-object:nth-child(2) {
  display: block;
  margin-left: -80px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.pf-media-object:nth-child(3) {
  display: block;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.pf-info-container {
  flex: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: $primary-border-color;
  position: relative;
  z-index: 4;
  padding: 0 10px;
}
.pf-info-container > * {
  max-width: 100%;
}
.pf-title {
  font-family: $font-replacement;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $primary-text-color;
  text-transform: normal;
  border-bottom: 1px solid transparent;
}
.pf-subtitle {
  display: none;
  font-size: 12px;
}
.pf-title-with-subtitle {
  margin-bottom: 0;
}
@media (min-width: 586px) {
  .pf-images {
    padding-bottom: 90px;
  }
  .pf-media-object {
    top: 33.75px;
    width: 90px;
  }
  .pf-media-object:nth-child(1) {
    top: 22.5px;
    margin-left: -45px;
  }
  .pf-media-object:nth-child(2) {
    margin-left: -90px;
  }
  .pf-title-with-subtitle {
    margin-bottom: 0;
  }
  .pf-subtitle {
    display: none;
  }
  .col-sm-6 .pf-images {
    padding-bottom: 110px;
  }
  .col-sm-6 .pf-media-object {
    top: 41.25px;
    width: 110px;
  }
  .col-sm-6 .pf-media-object:nth-child(1) {
    top: 27.5px;
    margin-left: -55px;
  }
  .col-sm-6 .pf-media-object:nth-child(2) {
    margin-left: -110px;
  }
  .col-sm-6 .pf-info-container {
    flex-basis: 64px;
  }
  .col-sm-6 .pf-title-with-subtitle {
    margin-bottom: 5px;
  }
  .col-sm-6 .pf-subtitle {
    display: block;
  }
}
@media (min-width: 854px) {
  .pf-images {
    padding-bottom: 120px;
  }
  .pf-media-object {
    top: 45px;
    width: 120px;
  }
  .pf-media-object:nth-child(1) {
    top: 30px;
    margin-left: -60px;
  }
  .pf-media-object:nth-child(2) {
    margin-left: -120px;
  }
  .pf-info-container {
    flex-basis: 64px;
  }
  .pf-title-with-subtitle {
    margin-bottom: 5px;
  }
  .pf-subtitle {
    display: block;
  }
  .col-sm-6 .pf-images {
    padding-bottom: 132px;
  }
  .col-sm-6 .pf-media-object {
    top: 49.5px;
    width: 132px;
  }
  .col-sm-6 .pf-media-object:nth-child(1) {
    top: 33px;
    margin-left: -66px;
  }
  .col-sm-6 .pf-media-object:nth-child(2) {
    margin-left: -132px;
  }
  .col-sm-6 .pf-info-container {
    flex-basis: 64px;
  }
  .col-sm-6 .pf-title-with-subtitle {
    margin-bottom: 5px;
  }
  .col-sm-6 .pf-subtitle {
    display: block;
  }
}
@media (min-width: 1274px) {
  .pf-images {
    padding-bottom: 132px;
  }
  .pf-media-object {
    top: 49.5px;
    width: 132px;
  }
  .pf-media-object:nth-child(1) {
    top: 33px;
    margin-left: -66px;
  }
  .pf-media-object:nth-child(2) {
    margin-left: -132px;
  }
  .pf-info-container {
    flex-basis: 64px;
  }
  .pf-title-with-subtitle {
    margin-bottom: 5px;
  }
  .pf-subtitle {
    display: block;
  }
  .col-sm-6 .pf-images {
    padding-bottom: 164px;
  }
  .col-sm-6 .pf-media-object {
    top: 61.5px;
    width: 164px;
  }
  .col-sm-6 .pf-media-object:nth-child(1) {
    top: 41px;
    margin-left: -82px;
  }
  .col-sm-6 .pf-media-object:nth-child(2) {
    margin-left: -164px;
  }
  .col-sm-6 .pf-info-container {
    flex-basis: 64px;
  }
  .col-sm-6 .pf-title-with-subtitle {
    margin-bottom: 5px;
  }
  .col-sm-6 .pf-subtitle {
    display: block;
  }
  .col-sm-6 .pf-info-container {
    flex-basis: 70px;
  }
  .col-sm-6 .pf-title-with-subtitle {
    margin-bottom: 5px;
  }
  .col-sm-6 .pf-subtitle {
    display: block;
  }
}
.genre-card {
  /* Needed because all links have hover/focus styles with a bottom border */
  border-bottom-color: transparent !important;
}
.gc-image-container {
  overflow: hidden;
  position: relative;
}
.gc-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 198px;
}
.gc-image-cols-1 {
  height: auto;
  margin-top: 0px;
  padding-bottom: 100%;
}
@media (min-width: 586px) {
  .gc-image-cols-1 {
    margin-top: 0px;
  }
}
@media (min-width: 854px) {
  .gc-image-cols-1 {
    margin-top: 0px;
  }
}
@media (min-width: 1274px) {
  .gc-image-cols-1 {
    margin-top: 0px;
  }
}
.gc-image-cols-2 {
  height: auto;
  margin-top: -8px;
  padding-bottom: 50%;
}
@media (min-width: 586px) {
  .gc-image-cols-2 {
    margin-top: -8px;
  }
}
@media (min-width: 854px) {
  .gc-image-cols-2 {
    margin-top: -10px;
  }
}
@media (min-width: 1274px) {
  .gc-image-cols-2 {
    margin-top: -12px;
  }
}
.gc-image-cols-3 {
  height: auto;
  margin-top: -10.66666667px;
  padding-bottom: 33.33333333%;
}
@media (min-width: 586px) {
  .gc-image-cols-3 {
    margin-top: -10.66666667px;
  }
}
@media (min-width: 854px) {
  .gc-image-cols-3 {
    margin-top: -13.33333333px;
  }
}
@media (min-width: 1274px) {
  .gc-image-cols-3 {
    margin-top: -16px;
  }
}
.gc-image-cols-4 {
  height: auto;
  margin-top: -12px;
  padding-bottom: 25%;
}
@media (min-width: 586px) {
  .gc-image-cols-4 {
    margin-top: -12px;
  }
}
@media (min-width: 854px) {
  .gc-image-cols-4 {
    margin-top: -15px;
  }
}
@media (min-width: 1274px) {
  .gc-image-cols-4 {
    margin-top: -18px;
  }
}
.gc-image-cols-5 {
  height: auto;
  margin-top: -12.8px;
  padding-bottom: 20%;
}
@media (min-width: 586px) {
  .gc-image-cols-5 {
    margin-top: -12.8px;
  }
}
@media (min-width: 854px) {
  .gc-image-cols-5 {
    margin-top: -16px;
  }
}
@media (min-width: 1274px) {
  .gc-image-cols-5 {
    margin-top: -19.2px;
  }
}
.gc-image-cols-6 {
  height: auto;
  margin-top: -13.33333333px;
  padding-bottom: 16.66666667%;
}
@media (min-width: 586px) {
  .gc-image-cols-6 {
    margin-top: -13.33333333px;
  }
}
@media (min-width: 854px) {
  .gc-image-cols-6 {
    margin-top: -16.66666667px;
  }
}
@media (min-width: 1274px) {
  .gc-image-cols-6 {
    margin-top: -20px;
  }
}
.gc-label-container {
  position: absolute;
  top: 50%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertical centering */
  text-align: center;
  /* horizontal centering */
  max-width: 338px;
  margin: 0 auto;
  padding: 16px;
}
@media (min-width: 586px) {
  .gc-label-container {
    max-width: 554px;
    padding: 16px;
  }
}
@media (min-width: 854px) {
  .gc-label-container {
    max-width: 814px;
    padding: 20px;
  }
}
@media (min-width: 1274px) {
  .gc-label-container {
    max-width: 1226px;
    padding: 24px;
  }
}
.gc-label-text-wrapper {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gc-label-text {
  font-size: 16px;
  border-bottom: 1px solid transparent;
}
.genre-card:hover .gc-label-text {
  border-bottom-color: currentcolor;
}
/**
 * Spotify Headers
 *
 * We try to have consistency in our entity headers.
 * Album and Playlist should look the same.
 * User and Artist should as well.
 *
 * Styleguide 80.1
 */
/**
 * Plain Headers
 *
 * Non-entity pages (Discover, Messages, Browse etc) they need this header.
 *
 * Markup: <h1 class="main-header">Main Header</h1>
 *
 * Styleguide 80.1.1
 */
/**
 * Playlist Header
 *
 * This header wraps the common elements with some custom components. NOTE: This
 * example is a little busted as the header element should be the
 * child of the body element, not encased in a page like this. <br>
 * <a href="header-playlist.html" class="button">
 * See Demo Page</a>
 *
 * Template: $header-playlist
 * Data: demo-playlist
 *
 * Styleguide 80.1.3
 */
/**
 * Album Header
 *
 * This header wraps the common elements with some custom components. NOTE: This
 * example is a little busted as the header element should be the
 * child of the body element, not encased in a page like this. <br>
 * <a href="header-album.html" class="button">
 * See Demo Page</a>
 *
 * Template: $header-album
 * Data: demo-album
 *
 * Styleguide 80.1.4
 */
/**
 * Artist Header
 *
 * This header wraps the common elements with some custom components. NOTE: This
 * example is a little busted as the header element should be the
 * child of the body element, not encased in a page like this. <br>
 * <a href="header-artist.html" class="button">
 * See Demo Page</a>
 *
 * Template: $header-artist
 * Data: demo-artist
 *
 * Styleguide 80.1.5
 */
/**
 * Profile Header
 *
 * This header wraps the common elements with some custom components. NOTE: This
 * example is a little busted as the header element should be the
 * child of the body element, not encased in a page like this. <br>
 * <a href="header-profile.html" class="button">
 * See Demo Page</a>
 *
 * Template: $header-profile
 * Data: demo-user
 *
 * Styleguide 80.1.6
 */
/**
 * Header Inline
 *
 * Template: $header-inline
 * Data: demo-album
 *
 * Styleguide 80.3
 */
.header {
  background: $header-bg-color;
  clear: left;
  margin: 0 auto;
  position: relative;
}
.h-main-content {
  padding-top: 16px;
  padding-bottom: 0;
  position: relative;
}
.h-media {
  float: left;
  padding-bottom: 16px;
  width: 210px;
}
.h-label {
  font-family: $font-replacement;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $secondary-text-color;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.h-title {
  margin: 0;
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-title a {
  border: none !important;
  color: $primary-text-color !important;
}
.h-description,
.h-meta-info {
  font-size: 14px;
  line-height: 20px;
}
.h-description {
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
  position: relative;
  white-space: normal;
  margin-top: 4px;
}
.h-description .ellipsis {
  content: ' ';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 20px;
  position: absolute;
  right: 0;
  top: 20px;
  width: 100%;
  background-image: -webkit-gradient(linear, 70% top, 100% top, from(rgba($primary-text-color, 0)), to($main-view-bg-color));
  background-image: -moz-linear-gradient(left, rgba($primary-text-color, 0) 70%, $main-view-bg-color 100%);
  background-image: linear-gradient(to right, rgba($primary-text-color, 0) 70%, $main-view-bg-color 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00181818', endColorstr='#ff181818', GradientType=1);
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .h-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
  }
  .h-description .ellipsis {
    display: none !important;
  }
}
.h-meta-info {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}
.h-data {
  float: left;
  margin-left: -214px;
  padding-left: 230px;
  width: 100%;
}
.h-extra {
  bottom: 10px;
  right: 32px;
  position: absolute;
  text-align: right;
}
.h-extra .enable-pointer {
  transition: color .2s;
}
.h-extra .enable-pointer:hover {
  color: #FFFFFF;
}
.h-extra .listeners-count {
  font-family: $font-replacement;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $secondary-text-color;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.h-controllers {
  bottom: 16px;
  position: absolute;
}
.h-controllers .button {
  margin-right: 12px;
}
.h-bar {
  border-top: 1px solid $primary-border-color;
  border-bottom: 1px solid $primary-border-color;
  line-height: 36px;
  margin: 0;
}
.h-search-bar {
  border-top: 1px solid $primary-border-color;
  line-height: 36px;
  margin: 0;
}
.h-search-field-outer-wrapper {
  height: 56px;
}
.h-search-field-wrapper {
  padding-top: 10px;
  padding-bottom: 10px;
}
.h-search-field-wrapper.sticky-top {
  background-color: $main-view-bg-color;
  position: fixed;
  z-index: 1020;
  left: 0 !important;
  /* spotify-events/sticky sets other values */
  right: 0 !important;
  margin-right: auto;
  margin-left: auto;
  max-width: 1490px;
}
.h-search-field-wrapper.sticky-top:before,
.h-search-field-wrapper.sticky-top:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.h-search-field-wrapper.sticky-top:after {
  clear: both;
}
.h-search-field-wrapper.sticky-top {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 586px) {
  .h-search-field-wrapper.sticky-top {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (min-width: 854px) {
  .h-search-field-wrapper.sticky-top {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1274px) {
  .h-search-field-wrapper.sticky-top {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.h-search-wrapper {
  max-width: 525px;
  position: relative;
  width: 100%;
}
.h-search-wrapper:before {
  margin-left: 10px;
  position: absolute;
  pointer-events: none;
}
.h-search-wrapper:hover:before {
  color: $primary-text-color;
}
.h-search-wrapper:hover .h-search::-webkit-input-placeholder {
  color: $primary-text-color;
}
.h-search-wrapper:hover .h-search::-moz-placeholder {
  color: $primary-text-color;
}
.h-search {
  width: 100%;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: $primary-text-color;
  display: block;
  outline: 0;
  padding-bottom: 0;
  padding-left: 36px;
  padding-right: 36px;
}
.focus .h-search,
.h-search:focus {
  background: $primary-text-color;
}
.h-search-close {
  bottom: 0;
  display: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 36px;
}
.h-search-close:hover {
  color: $primary-text-color;
}
.focus .h-search-close {
  display: block;
}
.h-search-suggestions {
  background: $primary-border-color;
  border-radius: 3px;
  display: none;
  position: absolute;
  padding: 0;
  list-style: none;
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  top: 100%;
}
.focus .h-search-suggestions {
  display: block;
}
.h-search-suggestion {
  border-radius: 3px;
  color: $secondary-text-color;
  cursor: pointer;
  padding-left: 36px;
  padding-right: 10px;
}
.h-search-suggestion:hover {
  background: #333333;
  color: #FFFFFF;
}
.h-search-result {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-search-matches {
  float: right;
  padding-left: 10px;
}
.header-image {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  background-color: $main-view-bg-color;
  border-bottom: 1px solid $primary-border-color;
  min-height: 320px;
  max-width: 1480px;
}
.header-image:before {
  background: rgba(255, 255, 255, 0.6);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.header-image .h-main-content {
  height: 275px;
}
.header-image .nav {
  border-bottom: 0;
}
.header-album .h-title {
  text-overflow: clip;
  white-space: normal;
}
.header-album .h-meta-info {
  margin-bottom: 65px;
}
.header-artist.version_1-5 .h-data {
  padding-left: 130px;
}
.header-artist.version_1-5 .h-title {
  padding-top: 25px;
}
.header-artist.version_1-5 .verified .mo-verified {
  display: inline;
  bottom: 48px;
  right: auto;
}
.header-artist.version_1-5:before {
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.83) 0%, rgba(255,255,255,0.83) 28%, rgba(255,255,255,0.92) 58%, rgba(255,255,255,1) 77%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.83) 0%,rgba(255,255,255,0.83) 28%,rgba(255,255,255,0.92) 58%,rgba(255,255,255,1) 77%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0.83) 0%,rgba(255,255,255,0.83) 28%,rgba(255,255,255,0.92) 58%,rgba(255,255,255,1) 77%,rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4ffffff', endColorstr='#ffffff',GradientType=0 );

  opacity: 0.95;
}

.header-artist.header-image {
  background-image: url('../img/standard-artist-header.png');
  background-size: cover;
  background-position: 50% 0;
}
.header-artist .h-main-content {
  padding-top: 129px;
}
.header-artist .h-data {
  padding-top: 16px;
  padding-left: 146px;
  padding-right: 100px;
  margin-left: -130px;
}
.header-artist .h-media {
  width: 130px;
}
.header-artist .h-spotlight-image {
  position: absolute;
  top: 20px;
  right: 17px;
  width: 104px;
  height: 56px;
  background: url('https://d2j0f09xqmv212.cloudfront.net/images/spotlight.png') top left no-repeat;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.header-artist .h-spotlight-image:hover {
  border: none;
  opacity: .8;
}
.header-station .media-object-station .mo-image {
  display: none;
}
.header-station .media-object-station .mo-station-mask {
  background-image: url("https://d2j0f09xqmv212.cloudfront.net/images/station-header-wave.svg");
}
.header-station .media-object-station .mo-station-overlay {
  height: 50.46%;
  left: 24.77%;
  top: 24.77%;
  width: 50.46%;
}
.header-station .media-object-station.media-object-station-artist .mo-station-overlay {
  border-radius: 32767px;
  height: 59.52%;
  left: 20.24%;
  top: 20.24%;
  width: 59.52%;
}
.header-user .h-main-content {
  padding-top: 16px;
}
.header-user .h-title {
  padding-right: 100px;
}
.header-user .h-data {
  padding-top: 16px;
  padding-left: 146px;
  margin-left: -130px;
}
.header-user .h-media {
  width: 130px;
}
.header-inline .h-main-content {
  padding: 0;
}
.header-inline .h-media {
  padding: 0;
  width: 134px;
}
.header-inline .h-data {
  margin-left: -134px;
  padding-left: 150px;
  padding-top: 0;
}
.header-inline .h-controllers {
  bottom: 0;
}
.header-inline .h-title {
  font-family: $font-replacement;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: $primary-text-color;
  text-transform: normal;
  margin-bottom: 36px;
  max-height: inherit;
}
.fade-in {
  animation: fadeIn .7s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 853px) {
  .h-extra {
    display: none;
  }
  .h-title {
    font-family: $font-replacement;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.005em;
    font-weight: 400;
    color: $primary-text-color;
    text-transform: normal;
  }
  .h-media,
  .header-artist .h-media {
    width: 130px;
    padding-bottom: 60px;
  }
  .header-artist.version_1-5 .h-data {
    margin-top: 0;
  }
  .header-artist.version_1-5 .h-title {
    padding-top: 45px;
  }
  .header-artist.version_1-5 .verified .mo-verified {
    bottom: 36px;
    right: auto;
  }
  .header-artist .h-main-content {
    padding-top: 145px;
  }
  .header-artist .h-data {
    margin-top: -29px;
    padding-top: 0;
    padding-right: 0;
  }
  .header-artist .h-media {
    margin-top: -60px;
    padding: 0;
  }
  .header-artist.header-small .h-main-content {
    padding-top: 0;
  }
  .header-artist.header-small .h-media {
    margin-top: 0;
    padding: 10px 0 0 0;
    width: 45px;
  }
  .header-user .h-data {
    padding-top: 32px;
  }
  .header-user .h-title {
    padding-right: 0;
  }
  .header-inline .h-title {
    max-height: 88px;
  }
  .h-controllers {
    left: 32px;
  }
  .header-small .h-controllers {
    left: inherit;
  }
  .header-inline .h-controllers {
    left: inherit;
  }
}
.h-sticky-header {
  bottom: 66px;
  height: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.h-sticky-header .h-sticky-header-inner {
  background-color: $main-view-bg-color;
  overflow: hidden;
  padding: 0;
  width: 100%;
  z-index: 1020;
  left: 0 !important;
  right: 0 !important;
}
.h-sticky-header .h-sticky-header-inner.sticky-top {
  position: fixed;
  top: 0;
}
.h-sticky-header .h-sticky-container {
  border-bottom: 1px solid $primary-border-color;
  padding-bottom: 16px;
  padding-top: 16px;
}
.h-sticky-header .h-sticky-container > * {
  height: 36px;
}
.h-sticky-header .h-sticky-image {
  background-size: cover;
  background-position: center;
  float: left;
  height: 36px;
  margin-right: 15px;
  position: relative;
  width: 36px;
}
.h-sticky-header .h-sticky-image .mo-image {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.h-sticky-header .h-sticky-controllers {
  float: right;
  margin-left: 15px;
}
.h-sticky-header .h-sticky-controllers .button:not(:first-child) {
  margin-left: 12px;
}
.h-sticky-header .h-sticky-title {
  color: $primary-text-color;
  font-family: $font-replacement;
  font-size: 28px;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: $primary-text-color;
  text-transform: normal;
  line-height: 36px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-sticky-header .h-sticky-controllers:before,
.h-sticky-header .h-sticky-title:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}
/**
 * Tracklists
 *
 * Lists of tracks for different purposes, customization is not possible.
 * Every tracklist has a unique set of columns and properties.
 *
 * Styleguide 90.1
 */
/**
 * Album list
 *
 * Used mainly on artist and album views.
 *
 * Template: $tracklist-album
 * Data: demo-album
 *
 * Styleguide 90.2
 */
/**
 * View specific lists
 *
 * Styleguide 90.7
 */
/*
 * Album list (Collection)
 *
 * Template: $tracklist-collection-album
 * Data: demo-album
 *
 * Styleguide 90.7.1
 */
/*
 * Artist list (Collection)
 *
 * BASED ON ALBUMS
 *
 * Template: $tracklist-collection-artist
 * Data: demo-album
 *
 * Styleguide 90.7.2
 */
/**
 * Chart list
 *
 * Used on chart view
 *
 * Template: $tracklist-chart
 * Data: demo-chart
 *
 * Styleguide 90.8
 */
.trend-mark.trend-new::before {
  content: '\00a0';
  background-color: #4687D6;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  height: 10px;
  width: 10px;
}
.trend-mark.trend-equal::before {
  content: '\00a0';
  background-color: $primary-text-color;
  display: block;
  margin: 0 auto;
  height: 2px;
  width: 8px;
}
.trend-mark.trend-up {
  color: $spotify-green;
}
.trend-mark.trend-down {
  color: #CD1A2B;
}
/*
 * Messages
 *
 * Used in messages view
 *
 * Template: $tracklist-messages
 * Data: demo-messages
 *
 * Styleguide 90.6
 */
/*
 * Playlist & Collection
 *
 * Shared list for playlist and collection.
 *
 * Template: $tracklist-playlist
 * Data: demo-playlist
 *
 * Styleguide 90.4
 */
.list-playlist .tl-time {
  width: 72px;
}
@media screen and (max-width: 1200px) {
  .tracklist-playlist.narrow .tl-added-by {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .tracklist-playlist.narrow .tl-date-added {
    display: none;
  }
}
@media screen and (max-width: 950px) {
  .tracklist-playlist .tl-time {
    display: none;
  }
}
@media screen and (max-width: 850px) {
  .tracklist-playlist .tl-albums {
    display: none;
  }
  .tracklist-playlist .tl-albums {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  .tracklist-playlist .tl-added-by {
    display: none;
  }
}
@media screen and (max-width: 586px) {
  .tracklist-playlist .tl-date-added {
    display: none;
  }
}
/*
 * Popular list
 *
 * Used on artist views.
 *
 * Template: $tracklist-popular
 * Data: demo-toplist
 *
 * Styleguide 90.3
 */
/*
 * Search
 *
 * Search views.
 *
 * Template: $tracklist-search
 * Data: demo-search-results
 *
 * Styleguide 90.5
 */
@media screen and (max-width: 800px) {
  .tracklist-search .tl-popularity {
    display: none;
  }
  .tracklist-search .tl-time {
    padding-right: 12px;
  }
}
/*
 * Station track list
 *
 * Track list for station view.
 *
 * Template: $tracklist-station
 * Data: demo-station
 *
 * Styleguide 90.4
 */
@media screen and (max-width: 850px) {
  .tracklist-station .tl-albums {
    display: none;
  }
  .tracklist-station .tl-albums {
    display: none;
  }
}
/*
 * Trackset
 *
 * Extracted from Playlist but without the "Added by" column.
 *
 * Template: $tracklist-trackset
 * Data: demo-playlist
 *
 * Styleguide 90.4
 */
.tracklist-album,
.tracklist-chart,
.tracklist-dev,
.tracklist-messages,
.tracklist-playlist,
.tracklist-popular,
.tracklist-station,
.tracklist-trackset,
.tracklist-search {
  border-bottom: 1px solid $primary-border-color;
  color: $secondary-text-color;
  table-layout: fixed;
  width: 100%;
}
.tl-header th,
.tl-cell {
  padding: 0 0 0 12px;
  border-top: 1px solid $primary-border-color;
  position: relative;
}
.tl-header th {
  border-top: 0;
  font-family: $font-replacement;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $secondary-text-color;
  letter-spacing: 0.16em;
  line-height: 28px;
  text-transform: uppercase;
  vertical-align: bottom;
  cursor: default;
}
.tl-header .tl-time {
  padding-top: 0;
  padding-bottom: 0;
}
.tl-header .tl-time:before {
  font-family: "glue1-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f152";
  font-size: 16px;
}
.tl-header .tl-popularity {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.tl-header .tl-popularity:before {
  font-family: "glue1-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f150";
  font-size: 16px;
}
.tl-header .tl-date-added,
.tl-header .tl-time-sent {
  padding-top: 0;
  padding-bottom: 0;
}
.tl-header .tl-date-added:before,
.tl-header .tl-time-sent:before {
  font-family: "glue1-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f198";
  font-size: 16px;
}
.tl-header-hidden {
  display: none;
}
.tl-header th:last-child {
  padding-right: 12px;
}
.tl-cell {
  height: 40px;
}
.tl-cell:last-child {
  padding-right: 12px;
}
.tl-cell,
.tl-cell > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-save {
  overflow: visible;
}
.tl-row:focus {
  outline: 0;
}
.tl-number,
.tl-empty,
.tl-play {
  width: 40px;
}
.tl-local {
  width: 40px;
}
.tl-image {
  padding: 0;
  width: 40px;
}
.tl-image img {
  display: block;
  max-width: none;
}
.tl-time {
  text-align: right;
  width: 70px;
  padding-left: 0;
}
.tl-listen-count {
  text-align: right;
  width: 120px;
}
.tl-date-added {
  width: 110px;
}
.tl-time-sent {
  width: 120px;
}
.tl-popularity {
  width: 54px;
}
.tl-explicit {
  padding: 0;
  width: 70px;
}
.tl-more,
.tl-save,
.tl-trend,
.tl-thumbs {
  padding: 0;
  width: 40px;
}
.tl-trend {
  text-align: center;
}
.tl-row .button-play {
  display: none;
  margin-left: -4px;
  height: 28px;
  line-height: 26px;
  padding-top: 2px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 14px;
  background: $secondary-text-color;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px $primary-border-color;
  width: 28px;
  padding-left: 0;
  padding-right: 0;
}
.tl-row .button-play .b-alt-text {
  margin-top: -26px;
}
.tl-row .button-play.contextmenu-active,
.tl-row .button-play:not(:disabled):hover {
  background-color: $secondary-text-color;
  color: #ffffff;
}
.tl-row .button-play:not(:disabled):hover:active {
  background: $secondary-text-color;
  color: #ffffff;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play {
    transition-duration: 50ms;
  }
}
.tl-row .button-play:after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play:after {
    transition-duration: 50ms;
  }
}
.tl-row .button-play.contextmenu-active,
.tl-row .button-play:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play.contextmenu-active,
  .tl-row .button-play:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.tl-row .button-play.contextmenu-active:after,
.tl-row .button-play:not(:disabled):hover:after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play.contextmenu-active:after,
  .tl-row .button-play:not(:disabled):hover:after {
    transition-duration: 66ms;
  }
}
.tl-row .button-play:not(:disabled):hover:active {
  transition: none;
}
.tl-row .button-play:not(:disabled):hover:active:after {
  transition: none;
}
.tl-row .button-play:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px $primary-border-color;
}
.tl-row .button-play.contextmenu-active,
.tl-row .button-play:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px $primary-text-color, 0 0 0 1px transparent;
}
.tl-row .button-play.contextmenu-active:after,
.tl-row .button-play:not(:disabled):hover:after {
  box-shadow: inset 0 0 0 1px $primary-text-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play.contextmenu-active,
  .tl-row .button-play:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px $primary-text-color;
  }
  .tl-row .button-play.contextmenu-active:after,
  .tl-row .button-play:not(:disabled):hover:after {
    box-shadow: inset 0 0 0 1px $primary-text-color;
  }
}
.tl-row .button-play:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px $secondary-text-color-hover;
}
.tl-row .button-play:not(:disabled):hover:active:after {
  box-shadow: inset 0 0 0 1px $secondary-text-color-hover;
}
.tl-row .button-play.contextmenu-active,
.tl-row .button-play:not(:disabled):hover {
  transform: scale(1.07142857);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play.contextmenu-active,
  .tl-row .button-play:not(:disabled):hover {
    transform: scale(1.07142857);
  }
}
.tl-row .button-play:before {
  font-family: "glue1-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  border-radius: 500px;
  line-height: 28px;
  font-size: 16px;
  padding-left: 6px;
  width: calc(100% - 6px);
}
.tl-row .button-play.button-play:before {
  content: "\f132";
}
.tl-row .button-play.button-play.playing:not(:hover),
.tl-row.playing .tl-row .button-play.button-play:not(:hover),
.tl-row.playing.tl-row .button-play.button-play:not(:hover),
.media-object.playing .tl-row .button-play.button-play:not(:hover),
.media-object.playing.tl-row .button-play.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row .button-play.button-play.playing:not(:hover):after,
.tl-row.playing .tl-row .button-play.button-play:not(:hover):after,
.tl-row.playing.tl-row .button-play.button-play:not(:hover):after,
.media-object.playing .tl-row .button-play.button-play:not(:hover):after,
.media-object.playing.tl-row .button-play.button-play:not(:hover):after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row .button-play.button-play.playing:not(:hover).contextmenu-active,
.tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active,
.tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active,
.media-object.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active,
.media-object.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active,
.tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover,
.tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover,
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover,
.media-object.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover,
.media-object.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row .button-play.button-play.playing:not(:hover).contextmenu-active:after,
.tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
.tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
.media-object.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
.media-object.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
.tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:after,
.tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after,
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after,
.media-object.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after,
.media-object.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play.button-play.playing:not(:hover).contextmenu-active,
  .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active,
  .tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active,
  .media-object.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active,
  .media-object.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active,
  .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover,
  .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover,
  .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover,
  .media-object.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover,
  .media-object.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row .button-play.button-play.playing:not(:hover).contextmenu-active:after,
  .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
  .tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
  .media-object.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
  .media-object.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active:after,
  .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:after,
  .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after,
  .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after,
  .media-object.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after,
  .media-object.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:active,
.tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active,
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active,
.media-object.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active,
.media-object.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:active:after,
.tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active:after,
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active:after,
.media-object.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active:after,
.media-object.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active:after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row .button-play.button-play.playing:not(:hover):before,
.tl-row.playing .tl-row .button-play.button-play:not(:hover):before,
.tl-row.playing.tl-row .button-play.button-play:not(:hover):before,
.media-object.playing .tl-row .button-play.button-play:not(:hover):before,
.media-object.playing.tl-row .button-play.button-play:not(:hover):before {
  content: "\f1D0";
  padding-left: 5px;
  width: calc(100% - 5px);
}
.tl-row .button-play.button-play.playing:hover:before,
.tl-row.playing .tl-row .button-play.button-play:hover:before,
.tl-row.playing.tl-row .button-play.button-play:hover:before,
.media-object.playing .tl-row .button-play.button-play:hover:before,
.media-object.playing.tl-row .button-play.button-play:hover:before {
  content: "\f130";
}
.tl-save .button,
.tl-more .button {
  visibility: hidden;
}
.tl-save {
  padding: 0 10px;
}
.tl-save .button {
  width: 20px !important;
  visibility: visible;
}
.tl-save .button:before {
  content: "\f1C6";
  padding-left: 2px;
}
.tl-thumbs .button {
  visibility: hidden;
}
.thumbs-down .tl-thumbs .button-thumbs-down,
.thumbs-up .tl-thumbs .button-thumbs-up {
  pointer-events: none;
  visibility: visible;
}
.current.thumbs-none .tl-thumbs .button {
  pointer-events: auto;
  visibility: visible;
}
.tl-row.playing .tl-cell,
.tl-row.playing .tl-cell a:link,
.tl-row.playing .tl-highlight {
  color: $primary-accent-color;
}
.tl-row.playing .tl-number-wrap {
  display: none;
}
.tl-row.playing .button-play {
  display: inline-block;
}
.tl-row.selected + .tl-row .td-cell {
  border-top-color: $primary-border-color;
}
.tl-row.selected .tl-cell {
  background-color: $primary-border-color;
  border-color: $primary-border-color;
}
.tl-row.added .tl-save .button {
  visibility: visible;
}
.tl-row.offline-waiting .tl-save .button.button-add:before,
.tl-row.offline-downloading .tl-save .button.button-add:before,
.tl-row.offline-waiting.added .tl-save .button.button-add:before,
.tl-row.offline-downloading.added .tl-save .button.button-add:before {
  content: "\f1BA";
  width: 18px;
  /* Adjust size to set the center in the middle of the icon */
  margin-left: 2px;
  /* Adjust position to match the normal icon position */
}
.tl-row.offline-downloading .tl-save .button.button-add:before,
.tl-row.offline-downloading.added .tl-save .button.button-add:before {
  animation: glue-keyframes-rotate 1.5s linear infinite;
}
.tl-row.unavailable .tl-cell,
.tl-row.unavailable .tl-cell a:link,
.tl-row.unavailable .tl-highlight {
  color: $secondary-text-color !important;
}
.tl-row.unavailable .button-play {
  display: none !important;
}
.tl-row.unavailable .tl-number-wrap {
  display: inline-block;
}
.tl-row.unavailable .tl-number {
  color: $secondary-text-color;
}
.tl-row.local .button-add {
  visibility: hidden !important;
}
/**
 * When using a scroll manager that makes sure the list only contains row DOM
 * nodes for the rows that are visible, we should tell the browser to put the
 * row in its own layer when painting. This will improve scroll performance as
 * instead of repainting a huge texture that spans the entire list height, it
 * just needs to repaint a few row textures and then composite the layers.
 */
.scroll-container-enabled .tl-row {
  will-change: transform;
}
.offline .tl-row .tl-cell,
.offline .tl-row .tl-cell a:link,
.offline .tl-row .tl-highlight {
  color: $primary-text-color !important;
}
.offline .tl-row .button-play {
  display: none !important;
}
.offline .tl-row .tl-number-wrap {
  display: inline-block;
}
.offline .tl-row .tl-number {
  color: $primary-text-color;
}
.offline .tl-row.offline-downloaded .tl-cell,
.offline .tl-row.local.local-file-available .tl-cell {
  color: inherit !important;
}
.offline .tl-row.offline-downloaded .tl-cell a:link,
.offline .tl-row.local.local-file-available .tl-cell a:link,
.offline .tl-row.offline-downloaded .tl-highlight,
.offline .tl-row.local.local-file-available .tl-highlight {
  color: $primary-text-color !important;
}
.offline .tl-row.offline-downloaded:hover .button-play,
.offline .tl-row.local.local-file-available:hover .button-play,
.offline .tl-row.offline-downloaded.playing .button-play,
.offline .tl-row.local.local-file-available.playing .button-play {
  display: inline-block !important;
}
.offline .tl-row.offline-downloaded:hover .tl-number-wrap,
.offline .tl-row.local.local-file-available:hover .tl-number-wrap,
.offline .tl-row.offline-downloaded.playing .tl-number-wrap,
.offline .tl-row.local.local-file-available.playing .tl-number-wrap {
  display: none;
}
.offline .tl-row.offline-downloaded.playing .tl-cell,
.offline .tl-row.local.local-file-available.playing .tl-cell,
.offline .tl-row.offline-downloaded.playing .tl-cell a:link,
.offline .tl-row.local.local-file-available.playing .tl-cell a:link,
.offline .tl-row.offline-downloaded.playing .tl-cell .tl-highlight,
.offline .tl-row.local.local-file-available.playing .tl-cell .tl-highlight {
  color: $primary-accent-color !important;
}
.tl-row:hover .tl-cell {
  background: $selected-row-bg-color;
}
.tl-row:hover .tl-highlight {
  color: $primary-text-color;
}
.tl-row:hover.playing .tl-highlight {
  color: $primary-accent-color;
}
.tl-row:hover .tl-number-wrap {
  display: none;
}
.tl-row:hover.unavailable .tl-number-wrap {
  display: block;
}
.tl-row:hover .button-play {
  display: inline-block;
}
.tl-row:hover .tl-more .button,
.tl-row:hover .tl-save .button {
  visibility: visible;
}
.tl-row:hover .tl-more .button:before,
.tl-row:hover .tl-save .button:before {
  color: $secondary-text-color;
}
.tl-row:hover .tl-more .button:hover:before,
.tl-row:hover .tl-save .button:hover:before {
  color: $secondary-text-color;
}
.tl-row:hover.current.thumbs-none .tl-thumbs .button {
  visibility: visible;
}
.tl-row:hover.current.thumbs-none .tl-thumbs .button:before {
  color: $secondary-text-color;
}
.tl-row:hover.current.thumbs-none .tl-thumbs .button:hover:before {
  color: $secondary-text-color;
}
.tl-row:hover.offline-waiting .tl-save .button.button-add.hover:before,
.tl-row:hover.offline-downloading .tl-save .button.button-add.hover:before {
  content: "\f1C6";
  -webkit-animation: none;
  animation: none;
}
.tl-row:hover.offline-waiting.added .tl-save .button.button-add:hover:before,
.tl-row:hover.offline-downloading.added .tl-save .button.button-add:hover:before {
  content: "\f1C5";
}
.offline .tl-row:hover .tl-number-wrap {
  display: block;
}
.offline .tl-row:hover.offline-downloaded .tl-number-wrap {
  display: none;
}
.tl-row:hover .tl-explicit .label,
.tl-row.selection-focus .tl-explicit .label {
  color: $secondary-text-color !important;
  border-color: $primary-text-color !important;
}
.tl-row.selection-focus-touch .tl-more .button {
  visibility: visible;
}
.tl-highlight {
  color: $primary-text-color;
}
.tl-featuring a,
.tl-featuring span {
  color: $secondary-text-color;
}
.tl-featuring a:hover,
.tl-featuring span:hover {
  color: $secondary-text-color-hover;
}
.tl-item-new {
  max-width: 100%;
  overflow: hidden;
  padding-left: 14px;
  position: relative;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.tl-item-new::before {
  content: "●";
  color: #4687D6;
  visibility: visible;
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
}
.tl-item-local {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.tl-explicit .label {
  color: $secondary-text-color;
  background: transparent;
  padding-top: 2px;
  padding-bottom: 1px;
  letter-spacing: 0;
  vertical-align: baseline;
  border: 1px solid $primary-border-color;
  font-size: 10px;
}
.tl-number,
.tl-time,
.tl-listen-count {
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
  letter-spacing: 0;
}
.tl-sort-asc:after,
.tl-sort-desc:after {
  margin-left: 4px;
  font-family: "glue1-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  color: $primary-accent-color;
  font-size: 14px;
}
.tl-sort-asc:after {
  content: "\f112";
}
.tl-sort-desc:after {
  content: "\f10c";
}
th[data-sort]:hover {
  color: $primary-text-color;
}
.pop-meter {
  width: 30px;
  height: 9px;
  position: relative;
}
.pop-meter-background,
.pop-meter-overlay {
  width: 100%;
  position: absolute;
  top: -1px;
  height: 9px;
  overflow-x: hidden;
}
.pop-meter-background:after,
.pop-meter-overlay:after {
  content: ' ';
  display: block;
  -webkit-transform: translate(0, 0.5px);
  -moz-transform: translate(0, 0.5px);
  -ms-transform: translate(0, 0.5px);
  -o-transform: translate(0, 0.5px);
  transform: translate(0, 0.5px);
  position: absolute;
  left: -4px;
  width: 2px;
  height: 8px;
  top: 0px;
}
.pop-meter-background:after {
  box-shadow: 4px 0 0 0 $secondary-text-color, 8px 0 0 0 $secondary-text-color, 12px 0 0 0 $secondary-text-color, 16px 0 0 0 $secondary-text-color, 20px 0 0 0 $secondary-text-color, 24px 0 0 0 $secondary-text-color, 28px 0 0 0 $secondary-text-color, 32px 0 0 0 $secondary-text-color;
}
.pop-meter-overlay:after {
  box-shadow: 4px 0 0 0 $primary-accent-color, 8px 0 0 0 $primary-accent-color, 12px 0 0 0 $primary-accent-color, 16px 0 0 0 $primary-accent-color, 20px 0 0 0 $primary-accent-color, 24px 0 0 0 $primary-accent-color, 28px 0 0 0 $primary-accent-color, 32px 0 0 0 $primary-accent-color;
}
/**
 * Standard Throbber
 *
 * There's two versions available, the standard one (50px) and one large (70px).
 * In IE9 there's no animation of the dots, just a grey symbol.
 * The throbbers doesn't scale with the container, they're a fixed size.
 *
 * Markup:
 * <div class="{$modifiers}"><div></div></div>
 *
 * .throbber         - Your normal loading indicator (fetching content, etc)
 * .throbber-large   - Bigger version, suitable for full screen loading and similar.
 *
 * Styleguide 100.1
 */
@-webkit-keyframes throbber {
  7% {
    box-shadow: 0px -15px #ffffff, 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  14% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.8), 11.25px -11.25px 0 #ffffff, 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  21% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.6), 11.25px -11.25px 0 rgba(255, 255, 255, 0.8), 15px 0 0 #ffffff, 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  28% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.4), 11.25px -11.25px 0 rgba(255, 255, 255, 0.6), 15px 0 0 rgba(255, 255, 255, 0.8), 11.25px 11.25px 0 #ffffff, 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  35% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.4), 15px 0 0 rgba(255, 255, 255, 0.6), 11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 0 15px 0 #ffffff, -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  42% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.4), 11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 0 15px 0 rgba(255, 255, 255, 0.8), -11.25px 11.25px 0 #ffffff, -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 0 15px 0 rgba(255, 255, 255, 0.6), -11.25px 11.25px 0 rgba(255, 255, 255, 0.8), -15px 0 0 #ffffff, -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.4), -11.25px 11.25px 0 rgba(255, 255, 255, 0.6), -15px 0 0 rgba(255, 255, 255, 0.8), -11.25px -11.25px 0 #ffffff;
  }
  63% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.4), -15px 0 0 rgba(255, 255, 255, 0.6), -11.25px -11.25px 0 rgba(255, 255, 255, 0.8);
  }
  70% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.4), -11.25px -11.25px 0 rgba(255, 255, 255, 0.6);
  }
  77% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.4);
  }
  84% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
}
@keyframes throbber {
  7% {
    box-shadow: 0px -15px #ffffff, 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  14% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.8), 11.25px -11.25px 0 #ffffff, 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  21% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.6), 11.25px -11.25px 0 rgba(255, 255, 255, 0.8), 15px 0 0 #ffffff, 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  28% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.4), 11.25px -11.25px 0 rgba(255, 255, 255, 0.6), 15px 0 0 rgba(255, 255, 255, 0.8), 11.25px 11.25px 0 #ffffff, 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  35% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.4), 15px 0 0 rgba(255, 255, 255, 0.6), 11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 0 15px 0 #ffffff, -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  42% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.4), 11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 0 15px 0 rgba(255, 255, 255, 0.8), -11.25px 11.25px 0 #ffffff, -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 0 15px 0 rgba(255, 255, 255, 0.6), -11.25px 11.25px 0 rgba(255, 255, 255, 0.8), -15px 0 0 #ffffff, -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.4), -11.25px 11.25px 0 rgba(255, 255, 255, 0.6), -15px 0 0 rgba(255, 255, 255, 0.8), -11.25px -11.25px 0 #ffffff;
  }
  63% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.4), -15px 0 0 rgba(255, 255, 255, 0.6), -11.25px -11.25px 0 rgba(255, 255, 255, 0.8);
  }
  70% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.4), -11.25px -11.25px 0 rgba(255, 255, 255, 0.6);
  }
  77% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.4);
  }
  84% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
}
@-webkit-keyframes throbberLarge {
  7% {
    box-shadow: 0px -26px #ffffff, 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  14% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.8), 19.5px -19.5px 0 #ffffff, 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  21% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.6), 19.5px -19.5px 0 rgba(255, 255, 255, 0.8), 26px 0 0 #ffffff, 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  28% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.4), 19.5px -19.5px 0 rgba(255, 255, 255, 0.6), 26px 0 0 rgba(255, 255, 255, 0.8), 19.5px 19.5px 0 #ffffff, 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  35% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.4), 26px 0 0 rgba(255, 255, 255, 0.6), 19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 0 26px 0 #ffffff, -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  42% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.4), 19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 0 26px 0 rgba(255, 255, 255, 0.8), -19.5px 19.5px 0 #ffffff, -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 0 26px 0 rgba(255, 255, 255, 0.6), -19.5px 19.5px 0 rgba(255, 255, 255, 0.8), -26px 0 0 #ffffff, -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.4), -19.5px 19.5px 0 rgba(255, 255, 255, 0.6), -26px 0 0 rgba(255, 255, 255, 0.8), -19.5px -19.5px 0 #ffffff;
  }
  63% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.4), -26px 0 0 rgba(255, 255, 255, 0.6), -19.5px -19.5px 0 rgba(255, 255, 255, 0.8);
  }
  70% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.4), -19.5px -19.5px 0 rgba(255, 255, 255, 0.6);
  }
  77% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.4);
  }
  84% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
}
@keyframes throbberLarge {
  7% {
    box-shadow: 0px -26px #ffffff, 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  14% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.8), 19.5px -19.5px 0 #ffffff, 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  21% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.6), 19.5px -19.5px 0 rgba(255, 255, 255, 0.8), 26px 0 0 #ffffff, 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  28% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.4), 19.5px -19.5px 0 rgba(255, 255, 255, 0.6), 26px 0 0 rgba(255, 255, 255, 0.8), 19.5px 19.5px 0 #ffffff, 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  35% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.4), 26px 0 0 rgba(255, 255, 255, 0.6), 19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 0 26px 0 #ffffff, -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  42% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.4), 19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 0 26px 0 rgba(255, 255, 255, 0.8), -19.5px 19.5px 0 #ffffff, -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 0 26px 0 rgba(255, 255, 255, 0.6), -19.5px 19.5px 0 rgba(255, 255, 255, 0.8), -26px 0 0 #ffffff, -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.4), -19.5px 19.5px 0 rgba(255, 255, 255, 0.6), -26px 0 0 rgba(255, 255, 255, 0.8), -19.5px -19.5px 0 #ffffff;
  }
  63% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.4), -26px 0 0 rgba(255, 255, 255, 0.6), -19.5px -19.5px 0 rgba(255, 255, 255, 0.8);
  }
  70% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.4), -19.5px -19.5px 0 rgba(255, 255, 255, 0.6);
  }
  77% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.4);
  }
  84% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
}
.throbber,
.throbber-large {
  position: relative;
}
.throbber div,
.throbber-large div {
  background: transparent;
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
}
.throbber {
  height: 40px;
  width: 40px;
}
.throbber div {
  height: 8px;
  margin: -4px 0 0 -4px;
  width: 8px;
  box-shadow: 0px -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  -webkit-animation: throbber 1.5s ease infinite;
  animation: throbber 1.5s ease infinite;
}
.throbber-large {
  height: 70px;
  width: 70px;
}
.throbber-large div {
  height: 12px;
  margin: -6px 0 0 -6px;
  width: 12px;
  box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  -webkit-animation: throbberLarge 1.5s ease infinite;
  animation: throbberLarge 1.5s ease infinite;
}
/**
 * Initial App Loading Throbber
 *
 * All apps should show the initial throbber in the center of the screen while the
 * app is initially loading. This throbber is the large size (automatically) and centered.
 *
 * Markup:
 * <div class="fake-screen" style="height: 300px; position: relative;">
 *   <div class="throbber-initial"><div></div></div>
 * </div>
 *
 * Styleguide 100.1.1
 */
.throbber-initial {
  position: relative;
  height: 70px;
  width: 70px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -35px;
  margin-left: -35px;
}
.throbber-initial div {
  background: transparent;
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
}
.throbber-initial div {
  height: 12px;
  margin: -6px 0 0 -6px;
  width: 12px;
  box-shadow: 0px -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  -webkit-animation: throbberLarge 1.5s ease infinite;
  animation: throbberLarge 1.5s ease infinite;
}
/**
 * Error and Offline Pages
 *
 * Just put the markup at the top of the page. (Best to use the template from GLUE!)
 * To display simply add the class `.show-offline-screen` or `.show-error-screen`
 * to the containing element. <br><br>
 * <a class="button" href="error-and-offline.html">See demo!</a>
 *
 * CodeDisplay: $error-and-offline
 *
 * Styleguide 100.1
 */
.error-and-offline {
  display: none;
  position: absolute;
  z-index: 1060;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background-image: url('https://s3.postimg.org/y6ubu8our/error_bg.jpg');
  background-size: cover;
  background-position: center;
}
.error-and-offline:before {
  content: ' ';
  position: absolute;
  background-color: rgba($main-view-bg-color, 0.75);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.error-and-offline > .container {
  position: relative;
  top: 50%;
  margin-top: -100px;
}
.error-and-offline .offline-content,
.error-and-offline .error-content {
  display: none;
}
.error-and-offline .offline-content > .button,
.error-and-offline .error-content > .button {
  margin-top: 32px;
}
.error-and-offline .error-version {
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin: 0 7px;
}
.show-offline-screen .error-and-offline,
.show-offline-screen .offline-content {
  display: block;
}
.show-error-screen .error-and-offline,
.show-error-screen .error-content {
  display: block;
}
.facepile {
  display: inline-block;
  float: left;
  height: 26px;
  margin: 0px 2px;
  width: 26px;
}
.facepile-list {
  display: inline-block;
  height: 26px;
}
.facepile-list-container {
  height: 26px;
}
.facepile-badge {
  display: inline-block;
  float: left;
  margin: 0px 2px;
  height: 26px;
  line-height: 24px;
  padding-top: 2px;
  padding-left: 26px;
  padding-right: 26px;
  border-radius: 13px;
  background: $secondary-text-color;
  color: #FFFFFF;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  transition-property: transform, box-shadow, color, background-color;
  width: 26px;
  padding-left: 0;
  padding-right: 0;
  padding: 0;
  /* override btn stuff */
  font-size: 10px;
}
.facepile-badge .b-alt-text {
  margin-top: -24px;
}
.facepile-badge.contextmenu-active,
.facepile-badge:not(:disabled):hover {
  background-color: $primary-accent-color;
  color: #ffffff;
}
.facepile-badge:not(:disabled):hover:active {
  background: $secondary-text-color;
  color: $primary-text-color;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .facepile-badge:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .facepile-badge {
    transition-duration: 50ms;
  }
}
.facepile-badge:after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .facepile-badge:after {
    transition-duration: 50ms;
  }
}
.facepile-badge.contextmenu-active,
.facepile-badge:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .facepile-badge.contextmenu-active,
  .facepile-badge:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.facepile-badge.contextmenu-active:after,
.facepile-badge:not(:disabled):hover:after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .facepile-badge.contextmenu-active:after,
  .facepile-badge:not(:disabled):hover:after {
    transition-duration: 66ms;
  }
}
.facepile-badge:not(:disabled):hover:active {
  transition: none;
}
.facepile-badge:not(:disabled):hover:active:after {
  transition: none;
}
.facepile-badge:not(:disabled):hover {
  transform: scale(1.07692308);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .facepile-badge:not(:disabled):hover {
    transform: scale(1.07692308);
  }
}
.facepile-badge:before {
  font-family: "glue1-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  border-radius: 500px;
  line-height: 26px;
  font-size: 13px;
  padding-left: 6.5px;
  width: calc(100% - 6.5px);
}
.facepile-badge.button-play:before {
  content: "\f132";
}
.facepile-badge.button-play.playing:not(:hover),
.tl-row.playing .facepile-badge.button-play:not(:hover),
.tl-row.playing.facepile-badge.button-play:not(:hover),
.media-object.playing .facepile-badge.button-play:not(:hover),
.media-object.playing.facepile-badge.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.facepile-badge.button-play.playing:not(:hover):after,
.tl-row.playing .facepile-badge.button-play:not(:hover):after,
.tl-row.playing.facepile-badge.button-play:not(:hover):after,
.media-object.playing .facepile-badge.button-play:not(:hover):after,
.media-object.playing.facepile-badge.button-play:not(:hover):after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.facepile-badge.button-play.playing:not(:hover).contextmenu-active,
.tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active,
.tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active,
.media-object.playing .facepile-badge.button-play:not(:hover).contextmenu-active,
.media-object.playing.facepile-badge.button-play:not(:hover).contextmenu-active,
.facepile-badge.button-play.playing:not(:hover):not(:disabled):hover,
.tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover,
.tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover,
.media-object.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover,
.media-object.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.facepile-badge.button-play.playing:not(:hover).contextmenu-active:after,
.tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active:after,
.tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active:after,
.media-object.playing .facepile-badge.button-play:not(:hover).contextmenu-active:after,
.media-object.playing.facepile-badge.button-play:not(:hover).contextmenu-active:after,
.facepile-badge.button-play.playing:not(:hover):not(:disabled):hover:after,
.tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:after,
.tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:after,
.media-object.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:after,
.media-object.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .facepile-badge.button-play.playing:not(:hover).contextmenu-active,
  .tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active,
  .tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active,
  .media-object.playing .facepile-badge.button-play:not(:hover).contextmenu-active,
  .media-object.playing.facepile-badge.button-play:not(:hover).contextmenu-active,
  .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover,
  .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover,
  .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover,
  .media-object.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover,
  .media-object.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .facepile-badge.button-play.playing:not(:hover).contextmenu-active:after,
  .tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active:after,
  .tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active:after,
  .media-object.playing .facepile-badge.button-play:not(:hover).contextmenu-active:after,
  .media-object.playing.facepile-badge.button-play:not(:hover).contextmenu-active:after,
  .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover:after,
  .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:after,
  .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:after,
  .media-object.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:after,
  .media-object.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.facepile-badge.button-play.playing:not(:hover):not(:disabled):hover:active,
.tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active,
.tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active,
.media-object.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active,
.media-object.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.facepile-badge.button-play.playing:not(:hover):not(:disabled):hover:active:after,
.tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active:after,
.tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active:after,
.media-object.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active:after,
.media-object.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active:after {
  box-shadow: inset 0 0 0 1px transparent;
}
.facepile-badge.button-play.playing:not(:hover):before,
.tl-row.playing .facepile-badge.button-play:not(:hover):before,
.tl-row.playing.facepile-badge.button-play:not(:hover):before,
.media-object.playing .facepile-badge.button-play:not(:hover):before,
.media-object.playing.facepile-badge.button-play:not(:hover):before {
  content: "\f1D0";
  padding-left: 5.6875px;
  width: calc(100% - 5.6875px);
}
.facepile-badge.button-play.playing:hover:before,
.tl-row.playing .facepile-badge.button-play:hover:before,
.tl-row.playing.facepile-badge.button-play:hover:before,
.media-object.playing .facepile-badge.button-play:hover:before,
.media-object.playing.facepile-badge.button-play:hover:before {
  content: "\f130";
}
.facepile-text {
  float: left;
  margin-right: 10px;
  line-height: 29px;
}
@media (max-width: 854px) {
  .header-album .facepile-list-container {
    display: none;
  }
}
@media (max-width: 974px) {
  .header .facepile-text {
    display: none;
  }
}
.navbar .facepile-list {
  margin-top: 8px;
}
.h-bar-facepile {
  white-space: normal;
}
.verified .facepile .mo-verified {
  display: none;
}
.media-object .facepile .playlist-placeholder,
.media-object .facepile .playlist-folder-placeholder,
.media-object .facepile .album-placeholder,
.media-object .facepile .artist-placeholder,
.media-object .facepile .genre-placeholder {
  display: none;
}
.media-object .facepile .media-object-user.show-placeholder .mo-image-background-color {
  background: #333333;
}
.header-album .facepile-list-container {
  bottom: 16px;
  position: absolute;
  right: 20px;
}
/**
 * Social user list modal
 *
 * A modal for displaying a list of users, used in for instance social proof, social chart and activity.
 *
 * Template: modal-social-user-list
 * Data: demo-modal-social-user-list
 *
 * Styleguide 50.6.4
 */
.modal-social-user-list {
  overflow: hidden;
  padding-bottom: 10px;
}
.modal-social-user-list .modal-social-user-list-scroll-area {
  height: 400px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.modal-social-user-list .modal-social-user-list-user {
  padding: 10px;
  padding-right: 20px;
  padding-bottom: 0px;
}
.modal-social-user-list .modal-social-user-list-user .modal-social-user-list-inner {
  margin-bottom: 10px;
}
.modal-social-user-list .modal-social-user-list-user .modal-social-user-list-image-container {
  margin-right: 20px;
}
.modal-social-user-list .modal-social-user-list-user .modal-social-user-list-follow-container {
  margin-top: 2px;
  margin-left: 20px;
}
.modal-social-user-list .modal-social-user-list-user .modal-social-user-list-user-name {
  font-size: 14px;
  color: $primary-text-color;
}
.modal-social-user-list .modal-social-user-list-user .modal-social-user-list-user-details {
  font-size: 12px;
  color: $secondary-text-color;
}
.modal-social-user-list .modal-social-user-list-user .media-object-image {
  width: 40px;
}
.modal-social-user-list hr {
  border-top-color: $primary-border-color;
}
