@charset "UTF-8";
/**
 * The contents of this file is owned and generated by the Global Design Systems team.
 *
 * If you require changes making to the values stored here please reach out
 * to #design-systems on Slack.
 *
 * Do not edit this file directly.
 *
 * Tack!
 * Global Design Systems Team
 * design.spotify.net
 */
/**
 * Spoticons
 *
 * Variable Set: Spoticons
 *
 * Styleguide 1.2.1
 */
/* stylelint-disable max-nesting-depth */
/**
 * Common color usages
 *
 * These colors are provided because they might be needed in many places where
 * they should be synced up.
 */
/**
 * Vertical Grid System
 * --------------------
 *
 * We try to adhere to a baseline grid, which is a vertical grid with lines
 * every X pixels. The baseline of text should always fall on this line.
 */
/**
 * Horizontal Grid System
 * ----------------------
 *
 * This grid system is responsive in four sizes, where all sizes use a 12 column
 * grid.
 *
 * Since the values are calculated, you need to compile the Less code to see the
 * values. From glue, run `node tools/output-grid-values.js` to see
 * the values.
 *
 * Here's a reference for what to use the variables for:
 *
 * Min Width (including scroll bar)
 * --------------------------------
 * Including scroll bar:  $glue-screen-min
 * Excluding scroll bar:  $glue-body-width-min
 *
 * Max Width (of content, space on the sides)
 * ------------------------------------------
 * Including scroll bar:  $glue-screen-max
 * Excluding scroll bar:  $glue-body-width-max
 *
 * Page Gutter (gutter on the sides of the page)
 * ---------------------------------------------
 * Size:                  $glue-grid-page-gutter
 *
 * Extra Small (xs)
 * ----------------
 * Gutter size:           $glue-grid-column-gutter-xs
 * View width range:      $glue-screen-min to $glue-screen-xs-max
 *
 * Small (sm)
 * ----------
 * Gutter size:           $glue-grid-column-gutter-sm
 * View width range:      $glue-screen-sm-min to $glue-screen-sm-max
 *
 * Medium (md)
 * -----------
 * Gutter size:           $glue-grid-column-gutter-md
 * View width range:      $glue-screen-md-min to $glue-screen-md-max
 *
 * Large (lg)
 * ----------
 * Gutter size:           $glue-grid-column-gutter-lg
 * View width range:      $glue-screen-lg-min to $glue-screen-lg-max
 */
/* stylelint-disable selector-max-type */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: none;
}

a:active,
a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
}

h1 {
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: var(--glue-font-weight-bold);
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  color: #000;
}

mark {
  background: #ff0;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

code, kbd, pre, samp {
  margin: 0;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

button, input, select, textarea {
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
}

input[type=checkbox], input[type=radio] {
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-spacing: 0;
}

@font-face {
  font-family: "spotify-circular";
  src: url("https://local_resource_host/fonts/CircularSpUIv3T-Light.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular";
  src: url("https://local_resource_host/fonts/CircularSpUIv3T-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular";
  src: url("https://local_resource_host/fonts/CircularSpUIv3T-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular";
  src: url("https://local_resource_host/fonts/CircularSpUIv3T-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-arabic";
  src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Light.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-arabic";
  src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-arabic";
  src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-arabic";
  src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-hebrew";
  src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Light.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-hebrew";
  src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-hebrew";
  src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-hebrew";
  src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-cyrillic";
  src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Light.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-cyrillic";
  src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-cyrillic";
  src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "spotify-circular-cyrillic";
  src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}
@keyframes glue-keyframes-rotate-ltr {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes glue-keyframes-rotate-rtl {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/* stylelint-disable selector-max-type */
body {
  --glue-font-family: "spotify-circular", "spotify-circular-cyrillic",
    "spotify-circular-arabic", "spotify-circular-hebrew", "Helvetica Neue",
    Helvetica, Arial, "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic",
    sans-serif;
}

body {
  --glue-font-family-zh-Hant: "spotify-circular", "spotify-circular-cyrillic",
    "spotify-circular-arabic", "spotify-circular-hebrew", "Helvetica Neue",
    Helvetica, Arial, "Microsoft JhengHei", "PingFang TC", "Lantinghei TC",
    "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif;
}

body {
  --glue-font-family-vi: "spotify-circular-cyrillic", "spotify-circular-arabic",
    "spotify-circular-hebrew", "Helvetica Neue", Helvetica, Arial,
    "Microsoft JhengHei", "PingFang TC", "Lantinghei TC",
    "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif;
}

body {
  --glue-font-family-monospace: Monaco, Menlo, Consolas, "Courier New",
    monospace;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--glue-font-family);
  -webkit-font-smoothing: antialiased;
  --glue-font-weight-normal: 400;
  --glue-font-weight-bold: 700;
  --glue-font-weight-black: 900;
}

html:lang(zh-Hant) body {
  font-family: var(--glue-font-family-zh-Hant);
}

html:lang(vi) body {
  font-family: var(--glue-font-family-vi);
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  color: #b3b3b3;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-height: 100vh;
  user-select: none;
}

body {
  background-color: #181818;
  cursor: default;
}


input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--glue-font-weight-normal);
}

strong {
  font-weight: var(--glue-font-weight-bold);
}

p {
  margin: 0 0 10px;
}

a {
  color: #ffffff;
  text-decoration: none;
}

a {
  border-bottom: 1px solid transparent;
}

a:hover,
a:focus,
a.contextmenu-active {
  color: #ffffff;
  text-decoration: none;
}

a:hover, a:focus, a.contextmenu-active {
  border-bottom-color: currentcolor;
}
a:hover:active,
a:focus:active,
a.contextmenu-active:active {
  color: #b3b3b3;
}

/* stylelint-disable selector-max-type */
/**
 * Common color usages
 *
 * These colors are provided because they might be needed in many places where
 * they should be synced up.
 */
/**
 * Vertical Grid System
 * --------------------
 *
 * We try to adhere to a baseline grid, which is a vertical grid with lines
 * every X pixels. The baseline of text should always fall on this line.
 */
/**
 * Horizontal Grid System
 * ----------------------
 *
 * This grid system is responsive in four sizes, where all sizes use a 12 column
 * grid.
 *
 * Since the values are calculated, you need to compile the Less code to see the
 * values. From glue, run `node tools/output-grid-values.js` to see
 * the values.
 *
 * Here's a reference for what to use the variables for:
 *
 * Min Width (including scroll bar)
 * --------------------------------
 * Including scroll bar:  $glue-screen-min
 * Excluding scroll bar:  $glue-body-width-min
 *
 * Max Width (of content, space on the sides)
 * ------------------------------------------
 * Including scroll bar:  $glue-screen-max
 * Excluding scroll bar:  $glue-body-width-max
 *
 * Page Gutter (gutter on the sides of the page)
 * ---------------------------------------------
 * Size:                  $glue-grid-page-gutter
 *
 * Extra Small (xs)
 * ----------------
 * Gutter size:           $glue-grid-column-gutter-xs
 * View width range:      $glue-screen-min to $glue-screen-xs-max
 *
 * Small (sm)
 * ----------
 * Gutter size:           $glue-grid-column-gutter-sm
 * View width range:      $glue-screen-sm-min to $glue-screen-sm-max
 *
 * Medium (md)
 * -----------
 * Gutter size:           $glue-grid-column-gutter-md
 * View width range:      $glue-screen-md-min to $glue-screen-md-max
 *
 * Large (lg)
 * ----------
 * Gutter size:           $glue-grid-column-gutter-lg
 * View width range:      $glue-screen-lg-min to $glue-screen-lg-max
 */
/**
 * Grid system
 *
 * Also see the demo on spotify:app:glue-grid-demo
 */
body::before {
  content: "xs";
  display: none;
}

.container {
  max-width: 1480px;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 32px;
  padding-right: 32px;
}


.container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}

.row {
  margin-left: -8px;
  margin-right: -8px;
}


.row::after {
  content: "";
  display: table;
}
.row::after {
  clear: both;
}
.row .row {
  margin-left: -8px;
  margin-right: -8px;
}

@media (min-width: 592px) {
  .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  
  .row .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  
}
@media (min-width: 820px) {
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
}
@media (min-width: 1280px) {
  .row {
    margin-left: -12px;
    margin-right: -12px;
  }
  
  .row .row {
    margin-left: -12px;
    margin-right: -12px;
  }
  
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  position: relative;
  min-height: 1px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  padding-left: 8px;
  padding-right: 8px;
}



/**
 * Clamping
 *
 * There are times when you will want to show a clean line of items. Say just one row.
 * But with a responsive layout that row can have 3, 4 or 6 items in it. To ease this,
 * there are clamp classes for each grid size (except `xs`). If you only want 6 items
 * in the small grid size use `clamp-sm-6`, if you want 12 items in the large grid
 * size use `clamp-sm-12`. You set the clamp class on the containing element (usually
 * a `.row`).
 *
 * NOTE: Max item clamp is 18
 *
 * Markup: <div class="row clamp-sm-2 clamp-md-3 clamp-lg-4 grid-demo">
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 1
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 2
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 3
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 4
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 5
 *   </div>
 * </div>
 *
 *
 * Styleguide 10.1.2
 */
/**
 * Grid Gutters
 *
 * The `.col-*` classes give a gutter horizontally, but not vertically.
 * If you want an equal vertical gutter, usually because the elements are in
 * a grid, add `.standard-grid` to the containing element (usually a `.row`).
 *
 * Markup: <div class="row standard-grid clamp-sm-4 clamp-md-6 clamp-lg-8 grid-demo">
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 1
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 2
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 3
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 4
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 5
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 6
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 7
 *   </div>
 *   <div class="col-sm-6 col-md-4 col-lg-3">
 *     Item 8
 *   </div>
 * </div>
 *
 *
 * Styleguide 10.1.3
 */
.standard-grid > * {
  margin-bottom: 16px;
}

/**
 * Extra Small Grid
 */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}


.col-xs-1 {
  width: 8.3333333333%;
}

.col-xs-2 {
  width: 16.6666666667%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-4 {
  width: 33.3333333333%;
}

.col-xs-5 {
  width: 41.6666666667%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-7 {
  width: 58.3333333333%;
}

.col-xs-8 {
  width: 66.6666666667%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-10 {
  width: 83.3333333333%;
}

.col-xs-11 {
  width: 91.6666666667%;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-push-1 {
  left: 8.3333333333%;
}



.col-xs-push-2 {
  left: 16.6666666667%;
}



.col-xs-push-3 {
  left: 25%;
}



.col-xs-push-4 {
  left: 33.3333333333%;
}



.col-xs-push-5 {
  left: 41.6666666667%;
}



.col-xs-push-6 {
  left: 50%;
}



.col-xs-push-7 {
  left: 58.3333333333%;
}



.col-xs-push-8 {
  left: 66.6666666667%;
}



.col-xs-push-9 {
  left: 75%;
}



.col-xs-push-10 {
  left: 83.3333333333%;
}



.col-xs-push-11 {
  left: 91.6666666667%;
}



.col-xs-pull-1 {
  right: 8.3333333333%;
}



.col-xs-pull-2 {
  right: 16.6666666667%;
}



.col-xs-pull-3 {
  right: 25%;
}



.col-xs-pull-4 {
  right: 33.3333333333%;
}



.col-xs-pull-5 {
  right: 41.6666666667%;
}



.col-xs-pull-6 {
  right: 50%;
}



.col-xs-pull-7 {
  right: 58.3333333333%;
}



.col-xs-pull-8 {
  right: 66.6666666667%;
}



.col-xs-pull-9 {
  right: 75%;
}



.col-xs-pull-10 {
  right: 83.3333333333%;
}



.col-xs-pull-11 {
  right: 91.6666666667%;
}



.col-xs-offset-1 {
  margin-left: 8.3333333333%;
}



.col-xs-offset-2 {
  margin-left: 16.6666666667%;
}



.col-xs-offset-3 {
  margin-left: 25%;
}



.col-xs-offset-4 {
  margin-left: 33.3333333333%;
}



.col-xs-offset-5 {
  margin-left: 41.6666666667%;
}



.col-xs-offset-6 {
  margin-left: 50%;
}



.col-xs-offset-7 {
  margin-left: 58.3333333333%;
}



.col-xs-offset-8 {
  margin-left: 66.6666666667%;
}



.col-xs-offset-9 {
  margin-left: 75%;
}



.col-xs-offset-10 {
  margin-left: 83.3333333333%;
}



.col-xs-offset-11 {
  margin-left: 91.6666666667%;
}



.clamp-xs-18 > :nth-child(n+19) {
  display: none;
}

.clamp-xs-17 > :nth-child(n+18) {
  display: none;
}

.clamp-xs-16 > :nth-child(n+17) {
  display: none;
}

.clamp-xs-15 > :nth-child(n+16) {
  display: none;
}

.clamp-xs-14 > :nth-child(n+15) {
  display: none;
}

.clamp-xs-13 > :nth-child(n+14) {
  display: none;
}

.clamp-xs-12 > :nth-child(n+13) {
  display: none;
}

.clamp-xs-11 > :nth-child(n+12) {
  display: none;
}

.clamp-xs-10 > :nth-child(n+11) {
  display: none;
}

.clamp-xs-9 > :nth-child(n+10) {
  display: none;
}

.clamp-xs-8 > :nth-child(n+9) {
  display: none;
}

.clamp-xs-7 > :nth-child(n+8) {
  display: none;
}

.clamp-xs-6 > :nth-child(n+7) {
  display: none;
}

.clamp-xs-5 > :nth-child(n+6) {
  display: none;
}

.clamp-xs-4 > :nth-child(n+5) {
  display: none;
}

.clamp-xs-3 > :nth-child(n+4) {
  display: none;
}

.clamp-xs-2 > :nth-child(n+3) {
  display: none;
}

.clamp-xs-1 > :nth-child(n+2) {
  display: none;
}

body,
.container {
  min-width: 360px;
}

/**
 * Small Grid
 */
@media (min-width: 592px) {
  body {
    padding: 0;
  }
  body::before {
    content: "sm";
  }

  .standard-grid > * {
    margin-bottom: 16px;
  }

  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding-left: 8px;
    padding-right: 8px;
  }

  

  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }

  

  .col-sm-1 {
    width: 8.3333333333%;
  }

  .col-sm-2 {
    width: 16.6666666667%;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.3333333333%;
  }

  .col-sm-5 {
    width: 41.6666666667%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-7 {
    width: 58.3333333333%;
  }

  .col-sm-8 {
    width: 66.6666666667%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-10 {
    width: 83.3333333333%;
  }

  .col-sm-11 {
    width: 91.6666666667%;
  }

  .col-sm-12 {
    width: 100%;
  }

  .col-sm-push-1 {
    left: 8.3333333333%;
  }

  

  .col-sm-push-2 {
    left: 16.6666666667%;
  }

  

  .col-sm-push-3 {
    left: 25%;
  }

  

  .col-sm-push-4 {
    left: 33.3333333333%;
  }

  

  .col-sm-push-5 {
    left: 41.6666666667%;
  }

  

  .col-sm-push-6 {
    left: 50%;
  }

  

  .col-sm-push-7 {
    left: 58.3333333333%;
  }

  

  .col-sm-push-8 {
    left: 66.6666666667%;
  }

  

  .col-sm-push-9 {
    left: 75%;
  }

  

  .col-sm-push-10 {
    left: 83.3333333333%;
  }

  

  .col-sm-push-11 {
    left: 91.6666666667%;
  }

  

  .col-sm-pull-1 {
    right: 8.3333333333%;
  }

  

  .col-sm-pull-2 {
    right: 16.6666666667%;
  }

  

  .col-sm-pull-3 {
    right: 25%;
  }

  

  .col-sm-pull-4 {
    right: 33.3333333333%;
  }

  

  .col-sm-pull-5 {
    right: 41.6666666667%;
  }

  

  .col-sm-pull-6 {
    right: 50%;
  }

  

  .col-sm-pull-7 {
    right: 58.3333333333%;
  }

  

  .col-sm-pull-8 {
    right: 66.6666666667%;
  }

  

  .col-sm-pull-9 {
    right: 75%;
  }

  

  .col-sm-pull-10 {
    right: 83.3333333333%;
  }

  

  .col-sm-pull-11 {
    right: 91.6666666667%;
  }

  

  .col-sm-offset-1 {
    margin-left: 8.3333333333%;
  }

  

  .col-sm-offset-2 {
    margin-left: 16.6666666667%;
  }

  

  .col-sm-offset-3 {
    margin-left: 25%;
  }

  

  .col-sm-offset-4 {
    margin-left: 33.3333333333%;
  }

  

  .col-sm-offset-5 {
    margin-left: 41.6666666667%;
  }

  

  .col-sm-offset-6 {
    margin-left: 50%;
  }

  

  .col-sm-offset-7 {
    margin-left: 58.3333333333%;
  }

  

  .col-sm-offset-8 {
    margin-left: 66.6666666667%;
  }

  

  .col-sm-offset-9 {
    margin-left: 75%;
  }

  

  .col-sm-offset-10 {
    margin-left: 83.3333333333%;
  }

  

  .col-sm-offset-11 {
    margin-left: 91.6666666667%;
  }

  

  .clamp-xs-18 > :nth-child(n+19) {
    display: block;
  }

  .clamp-xs-17 > :nth-child(n+18) {
    display: block;
  }

  .clamp-xs-16 > :nth-child(n+17) {
    display: block;
  }

  .clamp-xs-15 > :nth-child(n+16) {
    display: block;
  }

  .clamp-xs-14 > :nth-child(n+15) {
    display: block;
  }

  .clamp-xs-13 > :nth-child(n+14) {
    display: block;
  }

  .clamp-xs-12 > :nth-child(n+13) {
    display: block;
  }

  .clamp-xs-11 > :nth-child(n+12) {
    display: block;
  }

  .clamp-xs-10 > :nth-child(n+11) {
    display: block;
  }

  .clamp-xs-9 > :nth-child(n+10) {
    display: block;
  }

  .clamp-xs-8 > :nth-child(n+9) {
    display: block;
  }

  .clamp-xs-7 > :nth-child(n+8) {
    display: block;
  }

  .clamp-xs-6 > :nth-child(n+7) {
    display: block;
  }

  .clamp-xs-5 > :nth-child(n+6) {
    display: block;
  }

  .clamp-xs-4 > :nth-child(n+5) {
    display: block;
  }

  .clamp-xs-3 > :nth-child(n+4) {
    display: block;
  }

  .clamp-xs-2 > :nth-child(n+3) {
    display: block;
  }

  .clamp-xs-1 > :nth-child(n+2) {
    display: block;
  }

  .clamp-sm-18 > :nth-child(n+19) {
    display: none;
  }

  .clamp-sm-17 > :nth-child(n+18) {
    display: none;
  }

  .clamp-sm-16 > :nth-child(n+17) {
    display: none;
  }

  .clamp-sm-15 > :nth-child(n+16) {
    display: none;
  }

  .clamp-sm-14 > :nth-child(n+15) {
    display: none;
  }

  .clamp-sm-13 > :nth-child(n+14) {
    display: none;
  }

  .clamp-sm-12 > :nth-child(n+13) {
    display: none;
  }

  .clamp-sm-11 > :nth-child(n+12) {
    display: none;
  }

  .clamp-sm-10 > :nth-child(n+11) {
    display: none;
  }

  .clamp-sm-9 > :nth-child(n+10) {
    display: none;
  }

  .clamp-sm-8 > :nth-child(n+9) {
    display: none;
  }

  .clamp-sm-7 > :nth-child(n+8) {
    display: none;
  }

  .clamp-sm-6 > :nth-child(n+7) {
    display: none;
  }

  .clamp-sm-5 > :nth-child(n+6) {
    display: none;
  }

  .clamp-sm-4 > :nth-child(n+5) {
    display: none;
  }

  .clamp-sm-3 > :nth-child(n+4) {
    display: none;
  }

  .clamp-sm-2 > :nth-child(n+3) {
    display: none;
  }

  .clamp-sm-1 > :nth-child(n+2) {
    display: none;
  }
}
/**
 * Medium Grid
 */
@media (min-width: 820px) {
  body {
    padding: 0;
  }
  body::before {
    content: "md";
  }

  .standard-grid > * {
    margin-bottom: 20px;
  }

  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding-left: 10px;
    padding-right: 10px;
  }

  

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

  

  .col-md-1 {
    width: 8.3333333333%;
  }

  .col-md-2 {
    width: 16.6666666667%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.3333333333%;
  }

  .col-md-5 {
    width: 41.6666666667%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.3333333333%;
  }

  .col-md-8 {
    width: 66.6666666667%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.3333333333%;
  }

  .col-md-11 {
    width: 91.6666666667%;
  }

  .col-md-12 {
    width: 100%;
  }

  .col-md-push-1 {
    left: 8.3333333333%;
  }

  

  .col-md-push-2 {
    left: 16.6666666667%;
  }

  

  .col-md-push-3 {
    left: 25%;
  }

  

  .col-md-push-4 {
    left: 33.3333333333%;
  }

  

  .col-md-push-5 {
    left: 41.6666666667%;
  }

  

  .col-md-push-6 {
    left: 50%;
  }

  

  .col-md-push-7 {
    left: 58.3333333333%;
  }

  

  .col-md-push-8 {
    left: 66.6666666667%;
  }

  

  .col-md-push-9 {
    left: 75%;
  }

  

  .col-md-push-10 {
    left: 83.3333333333%;
  }

  

  .col-md-push-11 {
    left: 91.6666666667%;
  }

  

  .col-md-pull-1 {
    right: 8.3333333333%;
  }

  

  .col-md-pull-2 {
    right: 16.6666666667%;
  }

  

  .col-md-pull-3 {
    right: 25%;
  }

  

  .col-md-pull-4 {
    right: 33.3333333333%;
  }

  

  .col-md-pull-5 {
    right: 41.6666666667%;
  }

  

  .col-md-pull-6 {
    right: 50%;
  }

  

  .col-md-pull-7 {
    right: 58.3333333333%;
  }

  

  .col-md-pull-8 {
    right: 66.6666666667%;
  }

  

  .col-md-pull-9 {
    right: 75%;
  }

  

  .col-md-pull-10 {
    right: 83.3333333333%;
  }

  

  .col-md-pull-11 {
    right: 91.6666666667%;
  }

  

  .col-md-offset-1 {
    margin-left: 8.3333333333%;
  }

  

  .col-md-offset-2 {
    margin-left: 16.6666666667%;
  }

  

  .col-md-offset-3 {
    margin-left: 25%;
  }

  

  .col-md-offset-4 {
    margin-left: 33.3333333333%;
  }

  

  .col-md-offset-5 {
    margin-left: 41.6666666667%;
  }

  

  .col-md-offset-6 {
    margin-left: 50%;
  }

  

  .col-md-offset-7 {
    margin-left: 58.3333333333%;
  }

  

  .col-md-offset-8 {
    margin-left: 66.6666666667%;
  }

  

  .col-md-offset-9 {
    margin-left: 75%;
  }

  

  .col-md-offset-10 {
    margin-left: 83.3333333333%;
  }

  

  .col-md-offset-11 {
    margin-left: 91.6666666667%;
  }

  

  .clamp-sm-18 > :nth-child(n+19) {
    display: block;
  }

  .clamp-sm-17 > :nth-child(n+18) {
    display: block;
  }

  .clamp-sm-16 > :nth-child(n+17) {
    display: block;
  }

  .clamp-sm-15 > :nth-child(n+16) {
    display: block;
  }

  .clamp-sm-14 > :nth-child(n+15) {
    display: block;
  }

  .clamp-sm-13 > :nth-child(n+14) {
    display: block;
  }

  .clamp-sm-12 > :nth-child(n+13) {
    display: block;
  }

  .clamp-sm-11 > :nth-child(n+12) {
    display: block;
  }

  .clamp-sm-10 > :nth-child(n+11) {
    display: block;
  }

  .clamp-sm-9 > :nth-child(n+10) {
    display: block;
  }

  .clamp-sm-8 > :nth-child(n+9) {
    display: block;
  }

  .clamp-sm-7 > :nth-child(n+8) {
    display: block;
  }

  .clamp-sm-6 > :nth-child(n+7) {
    display: block;
  }

  .clamp-sm-5 > :nth-child(n+6) {
    display: block;
  }

  .clamp-sm-4 > :nth-child(n+5) {
    display: block;
  }

  .clamp-sm-3 > :nth-child(n+4) {
    display: block;
  }

  .clamp-sm-2 > :nth-child(n+3) {
    display: block;
  }

  .clamp-sm-1 > :nth-child(n+2) {
    display: block;
  }

  .clamp-md-18 > :nth-child(n+19) {
    display: none;
  }

  .clamp-md-17 > :nth-child(n+18) {
    display: none;
  }

  .clamp-md-16 > :nth-child(n+17) {
    display: none;
  }

  .clamp-md-15 > :nth-child(n+16) {
    display: none;
  }

  .clamp-md-14 > :nth-child(n+15) {
    display: none;
  }

  .clamp-md-13 > :nth-child(n+14) {
    display: none;
  }

  .clamp-md-12 > :nth-child(n+13) {
    display: none;
  }

  .clamp-md-11 > :nth-child(n+12) {
    display: none;
  }

  .clamp-md-10 > :nth-child(n+11) {
    display: none;
  }

  .clamp-md-9 > :nth-child(n+10) {
    display: none;
  }

  .clamp-md-8 > :nth-child(n+9) {
    display: none;
  }

  .clamp-md-7 > :nth-child(n+8) {
    display: none;
  }

  .clamp-md-6 > :nth-child(n+7) {
    display: none;
  }

  .clamp-md-5 > :nth-child(n+6) {
    display: none;
  }

  .clamp-md-4 > :nth-child(n+5) {
    display: none;
  }

  .clamp-md-3 > :nth-child(n+4) {
    display: none;
  }

  .clamp-md-2 > :nth-child(n+3) {
    display: none;
  }

  .clamp-md-1 > :nth-child(n+2) {
    display: none;
  }
}
/**
 * Large Grid
 */
@media (min-width: 1280px) {
  body {
    padding: 0;
  }
  body::before {
    content: "lg";
  }

  .standard-grid > * {
    margin-bottom: 24px;
  }

  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding-left: 12px;
    padding-right: 12px;
  }

  

  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }

  

  .col-lg-1 {
    width: 8.3333333333%;
  }

  .col-lg-2 {
    width: 16.6666666667%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.3333333333%;
  }

  .col-lg-5 {
    width: 41.6666666667%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-7 {
    width: 58.3333333333%;
  }

  .col-lg-8 {
    width: 66.6666666667%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-10 {
    width: 83.3333333333%;
  }

  .col-lg-11 {
    width: 91.6666666667%;
  }

  .col-lg-12 {
    width: 100%;
  }

  .col-lg-push-1 {
    left: 8.3333333333%;
  }

  

  .col-lg-push-2 {
    left: 16.6666666667%;
  }

  

  .col-lg-push-3 {
    left: 25%;
  }

  

  .col-lg-push-4 {
    left: 33.3333333333%;
  }

  

  .col-lg-push-5 {
    left: 41.6666666667%;
  }

  

  .col-lg-push-6 {
    left: 50%;
  }

  

  .col-lg-push-7 {
    left: 58.3333333333%;
  }

  

  .col-lg-push-8 {
    left: 66.6666666667%;
  }

  

  .col-lg-push-9 {
    left: 75%;
  }

  

  .col-lg-push-10 {
    left: 83.3333333333%;
  }

  

  .col-lg-push-11 {
    left: 91.6666666667%;
  }

  

  .col-lg-pull-1 {
    right: 8.3333333333%;
  }

  

  .col-lg-pull-2 {
    right: 16.6666666667%;
  }

  

  .col-lg-pull-3 {
    right: 25%;
  }

  

  .col-lg-pull-4 {
    right: 33.3333333333%;
  }

  

  .col-lg-pull-5 {
    right: 41.6666666667%;
  }

  

  .col-lg-pull-6 {
    right: 50%;
  }

  

  .col-lg-pull-7 {
    right: 58.3333333333%;
  }

  

  .col-lg-pull-8 {
    right: 66.6666666667%;
  }

  

  .col-lg-pull-9 {
    right: 75%;
  }

  

  .col-lg-pull-10 {
    right: 83.3333333333%;
  }

  

  .col-lg-pull-11 {
    right: 91.6666666667%;
  }

  

  .col-lg-offset-1 {
    margin-left: 8.3333333333%;
  }

  

  .col-lg-offset-2 {
    margin-left: 16.6666666667%;
  }

  

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  

  .col-lg-offset-4 {
    margin-left: 33.3333333333%;
  }

  

  .col-lg-offset-5 {
    margin-left: 41.6666666667%;
  }

  

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  

  .col-lg-offset-7 {
    margin-left: 58.3333333333%;
  }

  

  .col-lg-offset-8 {
    margin-left: 66.6666666667%;
  }

  

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  

  .col-lg-offset-10 {
    margin-left: 83.3333333333%;
  }

  

  .col-lg-offset-11 {
    margin-left: 91.6666666667%;
  }

  

  .clamp-md-18 > :nth-child(n+19) {
    display: block;
  }

  .clamp-md-17 > :nth-child(n+18) {
    display: block;
  }

  .clamp-md-16 > :nth-child(n+17) {
    display: block;
  }

  .clamp-md-15 > :nth-child(n+16) {
    display: block;
  }

  .clamp-md-14 > :nth-child(n+15) {
    display: block;
  }

  .clamp-md-13 > :nth-child(n+14) {
    display: block;
  }

  .clamp-md-12 > :nth-child(n+13) {
    display: block;
  }

  .clamp-md-11 > :nth-child(n+12) {
    display: block;
  }

  .clamp-md-10 > :nth-child(n+11) {
    display: block;
  }

  .clamp-md-9 > :nth-child(n+10) {
    display: block;
  }

  .clamp-md-8 > :nth-child(n+9) {
    display: block;
  }

  .clamp-md-7 > :nth-child(n+8) {
    display: block;
  }

  .clamp-md-6 > :nth-child(n+7) {
    display: block;
  }

  .clamp-md-5 > :nth-child(n+6) {
    display: block;
  }

  .clamp-md-4 > :nth-child(n+5) {
    display: block;
  }

  .clamp-md-3 > :nth-child(n+4) {
    display: block;
  }

  .clamp-md-2 > :nth-child(n+3) {
    display: block;
  }

  .clamp-md-1 > :nth-child(n+2) {
    display: block;
  }

  .clamp-lg-18 > :nth-child(n+19) {
    display: none;
  }

  .clamp-lg-17 > :nth-child(n+18) {
    display: none;
  }

  .clamp-lg-16 > :nth-child(n+17) {
    display: none;
  }

  .clamp-lg-15 > :nth-child(n+16) {
    display: none;
  }

  .clamp-lg-14 > :nth-child(n+15) {
    display: none;
  }

  .clamp-lg-13 > :nth-child(n+14) {
    display: none;
  }

  .clamp-lg-12 > :nth-child(n+13) {
    display: none;
  }

  .clamp-lg-11 > :nth-child(n+12) {
    display: none;
  }

  .clamp-lg-10 > :nth-child(n+11) {
    display: none;
  }

  .clamp-lg-9 > :nth-child(n+10) {
    display: none;
  }

  .clamp-lg-8 > :nth-child(n+9) {
    display: none;
  }

  .clamp-lg-7 > :nth-child(n+8) {
    display: none;
  }

  .clamp-lg-6 > :nth-child(n+7) {
    display: none;
  }

  .clamp-lg-5 > :nth-child(n+6) {
    display: none;
  }

  .clamp-lg-4 > :nth-child(n+5) {
    display: none;
  }

  .clamp-lg-3 > :nth-child(n+4) {
    display: none;
  }

  .clamp-lg-2 > :nth-child(n+3) {
    display: none;
  }

  .clamp-lg-1 > :nth-child(n+2) {
    display: none;
  }
}
/**
 * Grid Overlay
 */
.grid-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
}
.grid-overlay {
  right: 0;
  left: 0;
}

.grid-overlay.grid-overlay-baseline {
  background-size: 100% 8px;
}

.grid-overlay-baseline-highlight {
  position: absolute;
  top: 0;
  height: 1px;
  pointer-events: none;
}

.grid-overlay-baseline-highlight {
  left: 0;
  right: 0;
}



.grid-overlay-row {
  height: 100%;
}

.grid-overlay-col-1,
.grid-overlay-col-2,
.grid-overlay-col-3,
.grid-overlay-col-4,
.grid-overlay-col-5,
.grid-overlay-col-6,
.grid-overlay-col-7,
.grid-overlay-col-8,
.grid-overlay-col-9,
.grid-overlay-col-10,
.grid-overlay-col-11,
.grid-overlay-col-12 {
  height: 100%;
}

.grid-overlay-col-1, .grid-overlay-col-2, .grid-overlay-col-3, .grid-overlay-col-4, .grid-overlay-col-5, .grid-overlay-col-6, .grid-overlay-col-7, .grid-overlay-col-8, .grid-overlay-col-9, .grid-overlay-col-10, .grid-overlay-col-11, .grid-overlay-col-12 {
  background-clip: content-box;
}

.grid-overlay-label {
  position: fixed;
  top: 48px;
  line-height: 1;
}

.grid-overlay-label {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
}

.grid-overlay-label {
  right: 0;
}



/**
 * Spoticons
 *
 * Variable Set: Spoticons
 *
 * Styleguide 1.2.1
 */
@font-face {
  font-family: "glue-spoticon";
  src: url("https://local_resource_host/fonts/spoticon_cb67241fb50eae02396ee4647eb9a2e6.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
[class^=spoticon-]::before,
[class*=" spoticon-"]::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  display: inline-block;
  text-decoration: inherit;
}

.spoticon-add-to-playlist-16::before {
  content: "\f164";
  font-size: 16px;
}

.spoticon-add-to-playlist-24::before {
  content: "\f3AC";
  font-size: 24px;
}

.spoticon-add-to-playlist-32::before {
  content: "\f165";
  font-size: 32px;
}

.spoticon-add-to-playlist-48::before {
  content: "\f40A";
  font-size: 48px;
}

.spoticon-add-to-queue-16::before {
  content: "\f1BD";
  font-size: 16px;
}

.spoticon-add-to-queue-24::before {
  content: "\f3B7";
  font-size: 24px;
}

.spoticon-add-to-queue-32::before {
  content: "\f1BE";
  font-size: 32px;
}

.spoticon-add-to-queue-48::before {
  content: "\f40B";
  font-size: 48px;
}

.spoticon-add-to-queue-64::before {
  content: "\f1BF";
  font-size: 64px;
}

.spoticon-addfollow-16::before {
  content: "\f1E5";
  font-size: 16px;
}

.spoticon-addfollow-24::before {
  content: "\f3BA";
  font-size: 24px;
}

.spoticon-addfollow-32::before {
  content: "\f1E6";
  font-size: 32px;
}

.spoticon-addfollow-48::before {
  content: "\f40C";
  font-size: 48px;
}

.spoticon-addfollow-64::before {
  content: "\f1F5";
  font-size: 64px;
}

.spoticon-addfollowers-16::before {
  content: "\f22F";
  font-size: 16px;
}

.spoticon-addfollowers-24::before {
  content: "\f3C4";
  font-size: 24px;
}

.spoticon-addfollowers-32::before {
  content: "\f230";
  font-size: 32px;
}

.spoticon-addfollowers-64::before {
  content: "\f231";
  font-size: 64px;
}

.spoticon-addsuggestedsong-16::before {
  content: "\f22C";
  font-size: 16px;
}

.spoticon-addsuggestedsong-24::before {
  content: "\f48b";
  font-size: 24px;
}

.spoticon-addsuggestedsong-32::before {
  content: "\f22D";
  font-size: 32px;
}

.spoticon-addsuggestedsong-48::before {
  content: "\f48d";
  font-size: 48px;
}

.spoticon-addsuggestedsong-64::before {
  content: "\f22E";
  font-size: 64px;
}

.spoticon-airplay-16::before {
  content: "\f277";
  font-size: 16px;
}

.spoticon-airplay-32::before {
  content: "\f278";
  font-size: 32px;
}

.spoticon-album-16::before {
  content: "\f100";
  font-size: 16px;
}

.spoticon-album-24::before {
  content: "\f391";
  font-size: 24px;
}

.spoticon-album-32::before {
  content: "\f101";
  font-size: 32px;
}

.spoticon-album-48::before {
  content: "\f40D";
  font-size: 48px;
}

.spoticon-album-64::before {
  content: "\f167";
  font-size: 64px;
}

.spoticon-album-contained-16::before {
  content: "\f1C0";
  font-size: 16px;
}

.spoticon-album-contained-32::before {
  content: "\f1C1";
  font-size: 32px;
}

.spoticon-album-contained-64::before {
  content: "\f1C2";
  font-size: 64px;
}

.spoticon-arrow-down-16::before {
  content: "\f1DF";
  font-size: 16px;
}

.spoticon-arrow-down-24::before {
  content: "\f3B1";
  font-size: 24px;
}

.spoticon-arrow-down-32::before {
  content: "\f1E0";
  font-size: 32px;
}

.spoticon-arrow-down-48::before {
  content: "\f40E";
  font-size: 48px;
}

.spoticon-arrow-down-64::before {
  content: "\f1E1";
  font-size: 64px;
}

.spoticon-arrow-left-16::before {
  content: "\f183";
  font-size: 16px;
}

.spoticon-arrow-left-24::before {
  content: "\f3AE";
  font-size: 24px;
}

.spoticon-arrow-left-32::before {
  content: "\f184";
  font-size: 32px;
}

.spoticon-arrow-left-48::before {
  content: "\f40F";
  font-size: 48px;
}

.spoticon-arrow-left-64::before {
  content: "\f185";
  font-size: 64px;
}

.spoticon-arrow-right-16::before {
  content: "\f186";
  font-size: 16px;
}

.spoticon-arrow-right-24::before {
  content: "\f3AF";
  font-size: 24px;
}

.spoticon-arrow-right-32::before {
  content: "\f187";
  font-size: 32px;
}

.spoticon-arrow-right-48::before {
  content: "\f410";
  font-size: 48px;
}

.spoticon-arrow-right-64::before {
  content: "\f188";
  font-size: 64px;
}

.spoticon-arrow-up-16::before {
  content: "\f1DC";
  font-size: 16px;
}

.spoticon-arrow-up-24::before {
  content: "\f3B0";
  font-size: 24px;
}

.spoticon-arrow-up-32::before {
  content: "\f1DD";
  font-size: 32px;
}

.spoticon-arrow-up-48::before {
  content: "\f411";
  font-size: 48px;
}

.spoticon-arrow-up-64::before {
  content: "\f1DE";
  font-size: 64px;
}

.spoticon-artist-16::before {
  content: "\f102";
  font-size: 16px;
}

.spoticon-artist-24::before {
  content: "\f392";
  font-size: 24px;
}

.spoticon-artist-32::before {
  content: "\f103";
  font-size: 32px;
}

.spoticon-artist-48::before {
  content: "\f412";
  font-size: 48px;
}

.spoticon-artist-64::before {
  content: "\f168";
  font-size: 64px;
}

.spoticon-artist-active-16::before {
  content: "\f361";
  font-size: 16px;
}

.spoticon-artist-active-24::before {
  content: "\f362";
  font-size: 24px;
}

.spoticon-artist-active-32::before {
  content: "\f363";
  font-size: 32px;
}

.spoticon-artist-active-48::before {
  content: "\f413";
  font-size: 48px;
}

.spoticon-artist-active-64::before {
  content: "\f364";
  font-size: 64px;
}

.spoticon-attach-16::before {
  content: "\f104";
  font-size: 16px;
}

.spoticon-attach-24::before {
  content: "\f4a1";
  font-size: 24px;
}

.spoticon-attach-32::before {
  content: "\f105";
  font-size: 32px;
}

.spoticon-attach-48::before {
  content: "\f4a2";
  font-size: 48px;
}

.spoticon-attach-64::before {
  content: "\f4a3";
  font-size: 64px;
}

.spoticon-available-offline-16::before {
  content: "\f365";
  font-size: 16px;
}

.spoticon-available-offline-24::before {
  content: "\f366";
  font-size: 24px;
}

.spoticon-available-offline-32::before {
  content: "\f367";
  font-size: 32px;
}

.spoticon-available-offline-48::before {
  content: "\f414";
  font-size: 48px;
}

.spoticon-available-offline-64::before {
  content: "\f368";
  font-size: 64px;
}

.spoticon-ban-16::before {
  content: "\f31E";
  font-size: 16px;
}

.spoticon-ban-32::before {
  content: "\f31D";
  font-size: 32px;
}

.spoticon-ban-48::before {
  content: "\f415";
  font-size: 48px;
}

.spoticon-ban-active-16::before {
  content: "\f324";
  font-size: 16px;
}

.spoticon-ban-active-32::before {
  content: "\f323";
  font-size: 32px;
}

.spoticon-ban-active-48::before {
  content: "\f416";
  font-size: 48px;
}

.spoticon-block-16::before {
  content: "\f106";
  font-size: 16px;
}

.spoticon-block-24::before {
  content: "\f49f";
  font-size: 24px;
}

.spoticon-block-32::before {
  content: "\f107";
  font-size: 32px;
}

.spoticon-block-48::before {
  content: "\f4a0";
  font-size: 48px;
}

.spoticon-block-64::before {
  content: "\f169";
  font-size: 64px;
}

.spoticon-bluetooth-16::before {
  content: "\f494";
  font-size: 16px;
}

.spoticon-bluetooth-24::before {
  content: "\f495";
  font-size: 24px;
}

.spoticon-bluetooth-32::before {
  content: "\f496";
  font-size: 32px;
}

.spoticon-bluetooth-48::before {
  content: "\f497";
  font-size: 48px;
}

.spoticon-bluetooth-64::before {
  content: "\f498";
  font-size: 64px;
}

.spoticon-browse-16::before {
  content: "\f108";
  font-size: 16px;
}

.spoticon-browse-24::before {
  content: "\f393";
  font-size: 24px;
}

.spoticon-browse-32::before {
  content: "\f109";
  font-size: 32px;
}

.spoticon-browse-48::before {
  content: "\f417";
  font-size: 48px;
}

.spoticon-browse-64::before {
  content: "\f16A";
  font-size: 64px;
}

.spoticon-browse-active-16::before {
  content: "\f369";
  font-size: 16px;
}

.spoticon-browse-active-24::before {
  content: "\f36A";
  font-size: 24px;
}

.spoticon-browse-active-32::before {
  content: "\f36B";
  font-size: 32px;
}

.spoticon-browse-active-48::before {
  content: "\f418";
  font-size: 48px;
}

.spoticon-browse-active-64::before {
  content: "\f36C";
  font-size: 64px;
}

.spoticon-camera-16::before {
  content: "\f265";
  font-size: 16px;
}

.spoticon-camera-24::before {
  content: "\f3CA";
  font-size: 24px;
}

.spoticon-camera-32::before {
  content: "\f266";
  font-size: 32px;
}

.spoticon-camera-48::before {
  content: "\f419";
  font-size: 48px;
}

.spoticon-camera-64::before {
  content: "\f3E4";
  font-size: 64px;
}

.spoticon-carplay-16::before {
  content: "\f271";
  font-size: 16px;
}

.spoticon-carplay-32::before {
  content: "\f272";
  font-size: 32px;
}

.spoticon-chart-down-16::before {
  content: "\f25E";
  font-size: 16px;
}

.spoticon-chart-down-24::before {
  content: "\f3C8";
  font-size: 24px;
}

.spoticon-chart-down-32::before {
  content: "\f25F";
  font-size: 32px;
}

.spoticon-chart-down-48::before {
  content: "\f41A";
  font-size: 48px;
}

.spoticon-chart-down-64::before {
  content: "\f3E6";
  font-size: 64px;
}

.spoticon-chart-new-16::before {
  content: "\f25B";
  font-size: 16px;
}

.spoticon-chart-new-32::before {
  content: "\f25C";
  font-size: 32px;
}

.spoticon-chart-up-16::before {
  content: "\f262";
  font-size: 16px;
}

.spoticon-chart-up-24::before {
  content: "\f3C9";
  font-size: 24px;
}

.spoticon-chart-up-32::before {
  content: "\f263";
  font-size: 32px;
}

.spoticon-chart-up-48::before {
  content: "\f41B";
  font-size: 48px;
}

.spoticon-chart-up-64::before {
  content: "\f3E5";
  font-size: 64px;
}

.spoticon-check-16::before {
  content: "\f10a";
  font-size: 16px;
}

.spoticon-check-24::before {
  content: "\f1C9";
  font-size: 24px;
}

.spoticon-check-32::before {
  content: "\f10b";
  font-size: 32px;
}

.spoticon-check-48::before {
  content: "\f41C";
  font-size: 48px;
}

.spoticon-check-64::before {
  content: "\f16B";
  font-size: 64px;
}

.spoticon-check-alt-16::before {
  content: "\f34D";
  font-size: 16px;
}

.spoticon-check-alt-24::before {
  content: "\f34E";
  font-size: 24px;
}

.spoticon-check-alt-32::before {
  content: "\f34F";
  font-size: 32px;
}

.spoticon-check-alt-48::before {
  content: "\f41D";
  font-size: 48px;
}

.spoticon-check-alt-64::before {
  content: "\f350";
  font-size: 64px;
}

.spoticon-check-alt-fill-16::before {
  content: "\f4ec";
  font-size: 16px;
}

.spoticon-check-alt-fill-24::before {
  content: "\f4ed";
  font-size: 24px;
}

.spoticon-check-alt-fill-32::before {
  content: "\f4ee";
  font-size: 32px;
}

.spoticon-check-alt-fill-48::before {
  content: "\f4ef";
  font-size: 48px;
}

.spoticon-check-alt-fill-64::before {
  content: "\f4f0";
  font-size: 64px;
}

.spoticon-chevron-down-16::before {
  content: "\f10c";
  font-size: 16px;
}

.spoticon-chevron-down-24::before {
  content: "\f394";
  font-size: 24px;
}

.spoticon-chevron-down-32::before {
  content: "\f10d";
  font-size: 32px;
}

.spoticon-chevron-down-48::before {
  content: "\f41E";
  font-size: 48px;
}

.spoticon-chevron-down-64::before {
  content: "\f16C";
  font-size: 64px;
}

.spoticon-chevron-left-16::before {
  content: "\f10e";
  font-size: 16px;
}

.spoticon-chevron-left-24::before {
  content: "\f395";
  font-size: 24px;
}

.spoticon-chevron-left-32::before {
  content: "\f10f";
  font-size: 32px;
}

.spoticon-chevron-left-48::before {
  content: "\f41F";
  font-size: 48px;
}

.spoticon-chevron-left-64::before {
  content: "\f16D";
  font-size: 64px;
}

.spoticon-chevron-right-16::before {
  content: "\f110";
  font-size: 16px;
}

.spoticon-chevron-right-24::before {
  content: "\f396";
  font-size: 24px;
}

.spoticon-chevron-right-32::before {
  content: "\f111";
  font-size: 32px;
}

.spoticon-chevron-right-48::before {
  content: "\f420";
  font-size: 48px;
}

.spoticon-chevron-right-64::before {
  content: "\f16E";
  font-size: 64px;
}

.spoticon-chevron-up-16::before {
  content: "\f112";
  font-size: 16px;
}

.spoticon-chevron-up-24::before {
  content: "\f397";
  font-size: 24px;
}

.spoticon-chevron-up-32::before {
  content: "\f113";
  font-size: 32px;
}

.spoticon-chevron-up-48::before {
  content: "\f421";
  font-size: 48px;
}

.spoticon-chevron-up-64::before {
  content: "\f16F";
  font-size: 64px;
}

.spoticon-chromecast-connected-16::before {
  content: "\f30B";
  font-size: 16px;
}

.spoticon-chromecast-connected-32::before {
  content: "\f30C";
  font-size: 32px;
}

.spoticon-chromecast-connecting-one-16::before {
  content: "\f30D";
  font-size: 16px;
}

.spoticon-chromecast-connecting-one-32::before {
  content: "\f30E";
  font-size: 32px;
}

.spoticon-chromecast-connecting-three-16::before {
  content: "\f311";
  font-size: 16px;
}

.spoticon-chromecast-connecting-three-32::before {
  content: "\f312";
  font-size: 32px;
}

.spoticon-chromecast-connecting-two-16::before {
  content: "\f30F";
  font-size: 16px;
}

.spoticon-chromecast-connecting-two-32::before {
  content: "\f310";
  font-size: 32px;
}

.spoticon-chromecast-disconnected-16::before {
  content: "\f309";
  font-size: 16px;
}

.spoticon-chromecast-disconnected-32::before {
  content: "\f30A";
  font-size: 32px;
}

.spoticon-collaborative-playlist-16::before {
  content: "\f114";
  font-size: 16px;
}

.spoticon-collaborative-playlist-24::before {
  content: "\f499";
  font-size: 24px;
}

.spoticon-collaborative-playlist-32::before {
  content: "\f115";
  font-size: 32px;
}

.spoticon-collaborative-playlist-48::before {
  content: "\f49a";
  font-size: 48px;
}

.spoticon-collaborative-playlist-64::before {
  content: "\f170";
  font-size: 64px;
}

.spoticon-collection-16::before {
  content: "\f116";
  font-size: 16px;
}

.spoticon-collection-24::before {
  content: "\f398";
  font-size: 24px;
}

.spoticon-collection-32::before {
  content: "\f117";
  font-size: 32px;
}

.spoticon-collection-48::before {
  content: "\f422";
  font-size: 48px;
}

.spoticon-collection-64::before {
  content: "\f171";
  font-size: 64px;
}

.spoticon-collection-active-16::before {
  content: "\f379";
  font-size: 16px;
}

.spoticon-collection-active-24::before {
  content: "\f37A";
  font-size: 24px;
}

.spoticon-collection-active-32::before {
  content: "\f37B";
  font-size: 32px;
}

.spoticon-collection-active-48::before {
  content: "\f423";
  font-size: 48px;
}

.spoticon-collection-active-64::before {
  content: "\f37C";
  font-size: 64px;
}

.spoticon-connect-to-devices-16::before {
  content: "\f328";
  font-size: 16px;
}

.spoticon-connect-to-devices-24::before {
  content: "\f3DE";
  font-size: 24px;
}

.spoticon-connect-to-devices-32::before {
  content: "\f327";
  font-size: 32px;
}

.spoticon-connect-to-devices-48::before {
  content: "\f424";
  font-size: 48px;
}

.spoticon-connect-to-devices-64::before {
  content: "\f3E7";
  font-size: 64px;
}

.spoticon-copy-16::before {
  content: "\f389";
  font-size: 16px;
}

.spoticon-copy-24::before {
  content: "\f38A";
  font-size: 24px;
}

.spoticon-copy-32::before {
  content: "\f38B";
  font-size: 32px;
}

.spoticon-copy-48::before {
  content: "\f425";
  font-size: 48px;
}

.spoticon-copy-64::before {
  content: "\f38C";
  font-size: 64px;
}

.spoticon-destination-pin-16::before {
  content: "\f32D";
  font-size: 16px;
}

.spoticon-destination-pin-24::before {
  content: "\f32E";
  font-size: 24px;
}

.spoticon-destination-pin-32::before {
  content: "\f32F";
  font-size: 32px;
}

.spoticon-destination-pin-48::before {
  content: "\f426";
  font-size: 48px;
}

.spoticon-destination-pin-64::before {
  content: "\f330";
  font-size: 64px;
}

.spoticon-device-arm-16::before {
  content: "\f305";
  font-size: 16px;
}

.spoticon-device-arm-24::before {
  content: "\f3D5";
  font-size: 24px;
}

.spoticon-device-arm-32::before {
  content: "\f306";
  font-size: 32px;
}

.spoticon-device-arm-48::before {
  content: "\f427";
  font-size: 48px;
}

.spoticon-device-arm-64::before {
  content: "\f3E8";
  font-size: 64px;
}

.spoticon-device-car-16::before {
  content: "\f317";
  font-size: 16px;
}

.spoticon-device-car-24::before {
  content: "\f3D8";
  font-size: 24px;
}

.spoticon-device-car-32::before {
  content: "\f318";
  font-size: 32px;
}

.spoticon-device-car-48::before {
  content: "\f428";
  font-size: 48px;
}

.spoticon-device-car-64::before {
  content: "\f401";
  font-size: 64px;
}

.spoticon-device-computer-16::before {
  content: "\f29B";
  font-size: 16px;
}

.spoticon-device-computer-24::before {
  content: "\f3D0";
  font-size: 24px;
}

.spoticon-device-computer-32::before {
  content: "\f29C";
  font-size: 32px;
}

.spoticon-device-computer-48::before {
  content: "\f429";
  font-size: 48px;
}

.spoticon-device-computer-64::before {
  content: "\f3E9";
  font-size: 64px;
}

.spoticon-device-mobile-16::before {
  content: "\f301";
  font-size: 16px;
}

.spoticon-device-mobile-24::before {
  content: "\f3D3";
  font-size: 24px;
}

.spoticon-device-mobile-32::before {
  content: "\f302";
  font-size: 32px;
}

.spoticon-device-mobile-48::before {
  content: "\f42A";
  font-size: 48px;
}

.spoticon-device-mobile-64::before {
  content: "\f3EA";
  font-size: 64px;
}

.spoticon-device-multispeaker-16::before {
  content: "\f315";
  font-size: 16px;
}

.spoticon-device-multispeaker-24::before {
  content: "\f3D7";
  font-size: 24px;
}

.spoticon-device-multispeaker-32::before {
  content: "\f316";
  font-size: 32px;
}

.spoticon-device-multispeaker-48::before {
  content: "\f42B";
  font-size: 48px;
}

.spoticon-device-multispeaker-64::before {
  content: "\f3EB";
  font-size: 64px;
}

.spoticon-device-other-16::before {
  content: "\f29F";
  font-size: 16px;
}

.spoticon-device-other-24::before {
  content: "\f3D2";
  font-size: 24px;
}

.spoticon-device-other-32::before {
  content: "\f300";
  font-size: 32px;
}

.spoticon-device-other-48::before {
  content: "\f42C";
  font-size: 48px;
}

.spoticon-device-other-64::before {
  content: "\f3EC";
  font-size: 64px;
}

.spoticon-device-speaker-16::before {
  content: "\f29D";
  font-size: 16px;
}

.spoticon-device-speaker-24::before {
  content: "\f3D1";
  font-size: 24px;
}

.spoticon-device-speaker-32::before {
  content: "\f29E";
  font-size: 32px;
}

.spoticon-device-speaker-48::before {
  content: "\f42D";
  font-size: 48px;
}

.spoticon-device-speaker-64::before {
  content: "\f3ED";
  font-size: 64px;
}

.spoticon-device-tablet-16::before {
  content: "\f303";
  font-size: 16px;
}

.spoticon-device-tablet-24::before {
  content: "\f3D4";
  font-size: 24px;
}

.spoticon-device-tablet-32::before {
  content: "\f304";
  font-size: 32px;
}

.spoticon-device-tablet-48::before {
  content: "\f42E";
  font-size: 48px;
}

.spoticon-device-tablet-64::before {
  content: "\f3EE";
  font-size: 64px;
}

.spoticon-device-tv-16::before {
  content: "\f307";
  font-size: 16px;
}

.spoticon-device-tv-24::before {
  content: "\f3D6";
  font-size: 24px;
}

.spoticon-device-tv-32::before {
  content: "\f308";
  font-size: 32px;
}

.spoticon-device-tv-48::before {
  content: "\f42F";
  font-size: 48px;
}

.spoticon-device-tv-64::before {
  content: "\f3EF";
  font-size: 64px;
}

.spoticon-devices-16::before {
  content: "\f213";
  font-size: 16px;
}

.spoticon-devices-24::before {
  content: "\f3BE";
  font-size: 24px;
}

.spoticon-devices-32::before {
  content: "\f214";
  font-size: 32px;
}

.spoticon-devices-48::before {
  content: "\f430";
  font-size: 48px;
}

.spoticon-devices-64::before {
  content: "\f215";
  font-size: 64px;
}

.spoticon-devices-alt-16::before {
  content: "\f385";
  font-size: 16px;
}

.spoticon-devices-alt-24::before {
  content: "\f386";
  font-size: 24px;
}

.spoticon-devices-alt-32::before {
  content: "\f387";
  font-size: 32px;
}

.spoticon-devices-alt-48::before {
  content: "\f431";
  font-size: 48px;
}

.spoticon-devices-alt-64::before {
  content: "\f388";
  font-size: 64px;
}

.spoticon-discover-16::before {
  content: "\f172";
  font-size: 16px;
}

.spoticon-discover-24::before {
  content: "\f3AD";
  font-size: 24px;
}

.spoticon-discover-32::before {
  content: "\f173";
  font-size: 32px;
}

.spoticon-discover-48::before {
  content: "\f432";
  font-size: 48px;
}

.spoticon-discover-64::before {
  content: "\f174";
  font-size: 64px;
}

.spoticon-download-16::before {
  content: "\f11a";
  font-size: 16px;
}

.spoticon-download-24::before {
  content: "\f399";
  font-size: 24px;
}

.spoticon-download-32::before {
  content: "\f11b";
  font-size: 32px;
}

.spoticon-download-48::before {
  content: "\f433";
  font-size: 48px;
}

.spoticon-download-64::before {
  content: "\f1B2";
  font-size: 64px;
}

.spoticon-downloaded-16::before {
  content: "\f32C";
  font-size: 16px;
}

.spoticon-downloaded-24::before {
  content: "\f3DF";
  font-size: 24px;
}

.spoticon-downloaded-32::before {
  content: "\f32B";
  font-size: 32px;
}

.spoticon-downloaded-48::before {
  content: "\f434";
  font-size: 48px;
}

.spoticon-downloaded-64::before {
  content: "\f3F0";
  font-size: 64px;
}

.spoticon-drag-and-drop-16::before {
  content: "\f331";
  font-size: 16px;
}

.spoticon-drag-and-drop-24::before {
  content: "\f332";
  font-size: 24px;
}

.spoticon-drag-and-drop-32::before {
  content: "\f333";
  font-size: 32px;
}

.spoticon-drag-and-drop-48::before {
  content: "\f435";
  font-size: 48px;
}

.spoticon-drag-and-drop-64::before {
  content: "\f334";
  font-size: 64px;
}

.spoticon-edit-16::before {
  content: "\f1E2";
  font-size: 16px;
}

.spoticon-edit-24::before {
  content: "\f3B9";
  font-size: 24px;
}

.spoticon-edit-32::before {
  content: "\f1E3";
  font-size: 32px;
}

.spoticon-edit-48::before {
  content: "\f436";
  font-size: 48px;
}

.spoticon-edit-64::before {
  content: "\f1E4";
  font-size: 64px;
}

.spoticon-email-16::before {
  content: "\f1E7";
  font-size: 16px;
}

.spoticon-email-24::before {
  content: "\f49d";
  font-size: 24px;
}

.spoticon-email-32::before {
  content: "\f1E8";
  font-size: 32px;
}

.spoticon-email-48::before {
  content: "\f49e";
  font-size: 48px;
}

.spoticon-email-64::before {
  content: "\f1F6";
  font-size: 64px;
}

.spoticon-events-16::before {
  content: "\f1B3";
  font-size: 16px;
}

.spoticon-events-24::before {
  content: "\f3B4";
  font-size: 24px;
}

.spoticon-events-32::before {
  content: "\f1B4";
  font-size: 32px;
}

.spoticon-events-48::before {
  content: "\f437";
  font-size: 48px;
}

.spoticon-events-64::before {
  content: "\f1B5";
  font-size: 64px;
}

.spoticon-exclamation-circle-16::before {
  content: "\f4f1";
  font-size: 16px;
}

.spoticon-exclamation-circle-24::before {
  content: "\f4f2";
  font-size: 24px;
}

.spoticon-exclamation-circle-32::before {
  content: "\f4f3";
  font-size: 32px;
}

.spoticon-exclamation-circle-48::before {
  content: "\f4f4";
  font-size: 48px;
}

.spoticon-exclamation-circle-64::before {
  content: "\f4f5";
  font-size: 64px;
}

.spoticon-facebook-16::before {
  content: "\f1E9";
  font-size: 16px;
}

.spoticon-facebook-32::before {
  content: "\f1EA";
  font-size: 32px;
}

.spoticon-facebook-64::before {
  content: "\f1F7";
  font-size: 64px;
}

.spoticon-facebook-messenger-16::before {
  content: "\f313";
  font-size: 16px;
}

.spoticon-facebook-messenger-32::before {
  content: "\f314";
  font-size: 32px;
}

.spoticon-filter-16::before {
  content: "\f11c";
  font-size: 16px;
}

.spoticon-filter-24::before {
  content: "\f39A";
  font-size: 24px;
}

.spoticon-filter-32::before {
  content: "\f11d";
  font-size: 32px;
}

.spoticon-filter-48::before {
  content: "\f438";
  font-size: 48px;
}

.spoticon-filter-64::before {
  content: "\f3F1";
  font-size: 64px;
}

.spoticon-flag-16::before {
  content: "\f11e";
  font-size: 16px;
}

.spoticon-flag-24::before {
  content: "\f49b";
  font-size: 24px;
}

.spoticon-flag-32::before {
  content: "\f11f";
  font-size: 32px;
}

.spoticon-flag-48::before {
  content: "\f49c";
  font-size: 48px;
}

.spoticon-flag-64::before {
  content: "\f175";
  font-size: 64px;
}

.spoticon-follow-16::before {
  content: "\f120";
  font-size: 16px;
}

.spoticon-follow-24::before {
  content: "\f39B";
  font-size: 24px;
}

.spoticon-follow-32::before {
  content: "\f121";
  font-size: 32px;
}

.spoticon-follow-48::before {
  content: "\f439";
  font-size: 48px;
}

.spoticon-follow-64::before {
  content: "\f176";
  font-size: 64px;
}

.spoticon-follow-active-16::before {
  content: "\f4fb";
  font-size: 16px;
}

.spoticon-follow-active-24::before {
  content: "\f4fc";
  font-size: 24px;
}

.spoticon-follow-active-32::before {
  content: "\f4fd";
  font-size: 32px;
}

.spoticon-follow-active-48::before {
  content: "\f4fe";
  font-size: 48px;
}

.spoticon-follow-active-64::before {
  content: "\f4ff";
  font-size: 64px;
}

.spoticon-fullscreen-16::before {
  content: "\f28C";
  font-size: 16px;
}

.spoticon-fullscreen-24::before {
  content: "\f3CE";
  font-size: 24px;
}

.spoticon-fullscreen-32::before {
  content: "\f28D";
  font-size: 32px;
}

.spoticon-fullscreen-48::before {
  content: "\f43A";
  font-size: 48px;
}

.spoticon-fullscreen-64::before {
  content: "\f3F2";
  font-size: 64px;
}

.spoticon-games-console-16::before {
  content: "\f253";
  font-size: 16px;
}

.spoticon-games-console-24::before {
  content: "\f3C6";
  font-size: 24px;
}

.spoticon-games-console-32::before {
  content: "\f254";
  font-size: 32px;
}

.spoticon-games-console-48::before {
  content: "\f43B";
  font-size: 48px;
}

.spoticon-games-console-64::before {
  content: "\f3F3";
  font-size: 64px;
}

.spoticon-gears-16::before {
  content: "\f122";
  font-size: 16px;
}

.spoticon-gears-24::before {
  content: "\f39C";
  font-size: 24px;
}

.spoticon-gears-32::before {
  content: "\f123";
  font-size: 32px;
}

.spoticon-gears-48::before {
  content: "\f43C";
  font-size: 48px;
}

.spoticon-gears-64::before {
  content: "\f177";
  font-size: 64px;
}

.spoticon-googleplus-16::before {
  content: "\f244";
  font-size: 16px;
}

.spoticon-googleplus-32::before {
  content: "\f245";
  font-size: 32px;
}

.spoticon-grid-view-16::before {
  content: "\f178";
  font-size: 16px;
}

.spoticon-grid-view-24::before {
  content: "\f1CA";
  font-size: 24px;
}

.spoticon-grid-view-32::before {
  content: "\f179";
  font-size: 32px;
}

.spoticon-grid-view-48::before {
  content: "\f43D";
  font-size: 48px;
}

.spoticon-grid-view-64::before {
  content: "\f17A";
  font-size: 64px;
}

.spoticon-headphones-16::before {
  content: "\f335";
  font-size: 16px;
}

.spoticon-headphones-24::before {
  content: "\f336";
  font-size: 24px;
}

.spoticon-headphones-32::before {
  content: "\f337";
  font-size: 32px;
}

.spoticon-headphones-48::before {
  content: "\f43E";
  font-size: 48px;
}

.spoticon-headphones-64::before {
  content: "\f338";
  font-size: 64px;
}

.spoticon-heart-16::before {
  content: "\f320";
  font-size: 16px;
}

.spoticon-heart-24::before {
  content: "\f3DB";
  font-size: 24px;
}

.spoticon-heart-32::before {
  content: "\f31F";
  font-size: 32px;
}

.spoticon-heart-48::before {
  content: "\f43F";
  font-size: 48px;
}

.spoticon-heart-64::before {
  content: "\f3F4";
  font-size: 64px;
}

.spoticon-heart-active-16::before {
  content: "\f322";
  font-size: 16px;
}

.spoticon-heart-active-24::before {
  content: "\f3DC";
  font-size: 24px;
}

.spoticon-heart-active-32::before {
  content: "\f321";
  font-size: 32px;
}

.spoticon-heart-active-48::before {
  content: "\f440";
  font-size: 48px;
}

.spoticon-heart-active-64::before {
  content: "\f3F5";
  font-size: 64px;
}

.spoticon-helpcircle-16::before {
  content: "\f23B";
  font-size: 16px;
}

.spoticon-helpcircle-24::before {
  content: "\f39E";
  font-size: 24px;
}

.spoticon-helpcircle-32::before {
  content: "\f23C";
  font-size: 32px;
}

.spoticon-helpcircle-48::before {
  content: "\f441";
  font-size: 48px;
}

.spoticon-highlight-16::before {
  content: "\f247";
  font-size: 16px;
}

.spoticon-highlight-32::before {
  content: "\f248";
  font-size: 32px;
}

.spoticon-home-16::before {
  content: "\f1B6";
  font-size: 16px;
}

.spoticon-home-24::before {
  content: "\f3B5";
  font-size: 24px;
}

.spoticon-home-32::before {
  content: "\f1B7";
  font-size: 32px;
}

.spoticon-home-48::before {
  content: "\f442";
  font-size: 48px;
}

.spoticon-home-64::before {
  content: "\f1B8";
  font-size: 64px;
}

.spoticon-home-active-16::before {
  content: "\f36D";
  font-size: 16px;
}

.spoticon-home-active-24::before {
  content: "\f36E";
  font-size: 24px;
}

.spoticon-home-active-32::before {
  content: "\f36F";
  font-size: 32px;
}

.spoticon-home-active-48::before {
  content: "\f443";
  font-size: 48px;
}

.spoticon-home-active-64::before {
  content: "\f370";
  font-size: 64px;
}

.spoticon-inbox-16::before {
  content: "\f124";
  font-size: 16px;
}

.spoticon-inbox-24::before {
  content: "\f39D";
  font-size: 24px;
}

.spoticon-inbox-32::before {
  content: "\f125";
  font-size: 32px;
}

.spoticon-inbox-48::before {
  content: "\f444";
  font-size: 48px;
}

.spoticon-inbox-64::before {
  content: "\f17B";
  font-size: 64px;
}

.spoticon-info-16::before {
  content: "\f126";
  font-size: 16px;
}

.spoticon-info-32::before {
  content: "\f127";
  font-size: 32px;
}

.spoticon-instagram-16::before {
  content: "\f4e7";
  font-size: 16px;
}

.spoticon-instagram-24::before {
  content: "\f4e8";
  font-size: 24px;
}

.spoticon-instagram-32::before {
  content: "\f4e9";
  font-size: 32px;
}

.spoticon-instagram-48::before {
  content: "\f4ea";
  font-size: 48px;
}

.spoticon-instagram-64::before {
  content: "\f4eb";
  font-size: 64px;
}

.spoticon-library-16::before {
  content: "\f20A";
  font-size: 16px;
}

.spoticon-library-32::before {
  content: "\f20B";
  font-size: 32px;
}

.spoticon-library-64::before {
  content: "\f20C";
  font-size: 64px;
}

.spoticon-lightning-16::before {
  content: "\f4ba";
  font-size: 16px;
}

.spoticon-lightning-24::before {
  content: "\f4bb";
  font-size: 24px;
}

.spoticon-lightning-32::before {
  content: "\f4bc";
  font-size: 32px;
}

.spoticon-lightning-48::before {
  content: "\f4bd";
  font-size: 48px;
}

.spoticon-lightning-64::before {
  content: "\f4be";
  font-size: 64px;
}

.spoticon-line-16::before {
  content: "\f319";
  font-size: 16px;
}

.spoticon-line-32::before {
  content: "\f31A";
  font-size: 32px;
}

.spoticon-list-view-16::before {
  content: "\f17C";
  font-size: 16px;
}

.spoticon-list-view-24::before {
  content: "\f1CB";
  font-size: 24px;
}

.spoticon-list-view-32::before {
  content: "\f17D";
  font-size: 32px;
}

.spoticon-list-view-48::before {
  content: "\f445";
  font-size: 48px;
}

.spoticon-list-view-64::before {
  content: "\f17E";
  font-size: 64px;
}

.spoticon-localfile-16::before {
  content: "\f1FA";
  font-size: 16px;
}

.spoticon-localfile-24::before {
  content: "\f3BC";
  font-size: 24px;
}

.spoticon-localfile-32::before {
  content: "\f1FB";
  font-size: 32px;
}

.spoticon-localfile-48::before {
  content: "\f446";
  font-size: 48px;
}

.spoticon-localfile-64::before {
  content: "\f1FC";
  font-size: 64px;
}

.spoticon-locked-16::before {
  content: "\f128";
  font-size: 16px;
}

.spoticon-locked-24::before {
  content: "\f39F";
  font-size: 24px;
}

.spoticon-locked-32::before {
  content: "\f129";
  font-size: 32px;
}

.spoticon-locked-48::before {
  content: "\f447";
  font-size: 48px;
}

.spoticon-locked-64::before {
  content: "\f17F";
  font-size: 64px;
}

.spoticon-locked-active-16::before {
  content: "\f4b5";
  font-size: 16px;
}

.spoticon-locked-active-24::before {
  content: "\f4b6";
  font-size: 24px;
}

.spoticon-locked-active-32::before {
  content: "\f4b7";
  font-size: 32px;
}

.spoticon-locked-active-48::before {
  content: "\f4b8";
  font-size: 48px;
}

.spoticon-locked-active-64::before {
  content: "\f4b9";
  font-size: 64px;
}

.spoticon-lyrics-16::before {
  content: "\f32A";
  font-size: 16px;
}

.spoticon-lyrics-24::before {
  content: "\f339";
  font-size: 24px;
}

.spoticon-lyrics-32::before {
  content: "\f329";
  font-size: 32px;
}

.spoticon-lyrics-48::before {
  content: "\f448";
  font-size: 48px;
}

.spoticon-lyrics-64::before {
  content: "\f33A";
  font-size: 64px;
}

.spoticon-make-available-offline-48::before {
  content: "\f449";
  font-size: 48px;
}

.spoticon-make—available-offline-16::before {
  content: "\f33D";
  font-size: 16px;
}

.spoticon-make—available-offline-24::before {
  content: "\f33E";
  font-size: 24px;
}

.spoticon-make—available-offline-32::before {
  content: "\f33F";
  font-size: 32px;
}

.spoticon-make—available-offline-64::before {
  content: "\f340";
  font-size: 64px;
}

.spoticon-me-alt-48::before {
  content: "\f44A";
  font-size: 48px;
}

.spoticon-me-alt-active-48::before {
  content: "\f44B";
  font-size: 48px;
}

.spoticon-menu-16::before {
  content: "\f1FD";
  font-size: 16px;
}

.spoticon-menu-24::before {
  content: "\f3BD";
  font-size: 24px;
}

.spoticon-menu-32::before {
  content: "\f1FE";
  font-size: 32px;
}

.spoticon-menu-48::before {
  content: "\f44C";
  font-size: 48px;
}

.spoticon-menu-64::before {
  content: "\f1FF";
  font-size: 64px;
}

.spoticon-messages-16::before {
  content: "\f12a";
  font-size: 16px;
}

.spoticon-messages-24::before {
  content: "\f3A0";
  font-size: 24px;
}

.spoticon-messages-32::before {
  content: "\f12b";
  font-size: 32px;
}

.spoticon-messages-48::before {
  content: "\f44D";
  font-size: 48px;
}

.spoticon-messages-64::before {
  content: "\f180";
  font-size: 64px;
}

.spoticon-mic-16::before {
  content: "\f341";
  font-size: 16px;
}

.spoticon-mic-24::before {
  content: "\f342";
  font-size: 24px;
}

.spoticon-mic-32::before {
  content: "\f343";
  font-size: 32px;
}

.spoticon-mic-48::before {
  content: "\f44E";
  font-size: 48px;
}

.spoticon-mic-64::before {
  content: "\f344";
  font-size: 64px;
}

.spoticon-minimise-16::before {
  content: "\f268";
  font-size: 16px;
}

.spoticon-minimise-24::before {
  content: "\f3CB";
  font-size: 24px;
}

.spoticon-minimise-32::before {
  content: "\f269";
  font-size: 32px;
}

.spoticon-minimise-48::before {
  content: "\f44F";
  font-size: 48px;
}

.spoticon-minimise-64::before {
  content: "\f3F6";
  font-size: 64px;
}

.spoticon-mix-16::before {
  content: "\f326";
  font-size: 16px;
}

.spoticon-mix-24::before {
  content: "\f3DD";
  font-size: 24px;
}

.spoticon-mix-32::before {
  content: "\f325";
  font-size: 32px;
}

.spoticon-mix-48::before {
  content: "\f450";
  font-size: 48px;
}

.spoticon-mix-64::before {
  content: "\f3F7";
  font-size: 64px;
}

.spoticon-more-16::before {
  content: "\f12c";
  font-size: 16px;
}

.spoticon-more-24::before {
  content: "\f1CC";
  font-size: 24px;
}

.spoticon-more-32::before {
  content: "\f12d";
  font-size: 32px;
}

.spoticon-more-48::before {
  content: "\f451";
  font-size: 48px;
}

.spoticon-more-64::before {
  content: "\f181";
  font-size: 64px;
}

.spoticon-more-alt-48::before {
  content: "\f452";
  font-size: 48px;
}

.spoticon-more-android-16::before {
  content: "\f219";
  font-size: 16px;
}

.spoticon-more-android-24::before {
  content: "\f21A";
  font-size: 24px;
}

.spoticon-more-android-32::before {
  content: "\f21B";
  font-size: 32px;
}

.spoticon-more-android-48::before {
  content: "\f48a";
  font-size: 48px;
}

.spoticon-more-android-64::before {
  content: "\f21C";
  font-size: 64px;
}

.spoticon-new-spotify-connect-16::before {
  content: "\f1CD";
  font-size: 16px;
}

.spoticon-new-spotify-connect-24::before {
  content: "\f3B8";
  font-size: 24px;
}

.spoticon-new-spotify-connect-32::before {
  content: "\f1CE";
  font-size: 32px;
}

.spoticon-new-spotify-connect-64::before {
  content: "\f1CF";
  font-size: 64px;
}

.spoticon-new-volume-16::before {
  content: "\f1D0";
  font-size: 16px;
}

.spoticon-new-volume-24::before {
  content: "\f1D1";
  font-size: 24px;
}

.spoticon-newradio-16::before {
  content: "\f220";
  font-size: 16px;
}

.spoticon-newradio-24::before {
  content: "\f3C0";
  font-size: 24px;
}

.spoticon-newradio-32::before {
  content: "\f221";
  font-size: 32px;
}

.spoticon-newradio-48::before {
  content: "\f453";
  font-size: 48px;
}

.spoticon-newradio-64::before {
  content: "\f222";
  font-size: 64px;
}

.spoticon-nikeplus-16::before {
  content: "\f274";
  font-size: 16px;
}

.spoticon-nikeplus-32::before {
  content: "\f275";
  font-size: 32px;
}

.spoticon-notifications-16::before {
  content: "\f12e";
  font-size: 16px;
}

.spoticon-notifications-24::before {
  content: "\f3A1";
  font-size: 24px;
}

.spoticon-notifications-32::before {
  content: "\f12f";
  font-size: 32px;
}

.spoticon-notifications-48::before {
  content: "\f454";
  font-size: 48px;
}

.spoticon-notifications-64::before {
  content: "\f182";
  font-size: 64px;
}

.spoticon-now-playing-16::before {
  content: "\f345";
  font-size: 16px;
}

.spoticon-now-playing-24::before {
  content: "\f346";
  font-size: 24px;
}

.spoticon-now-playing-32::before {
  content: "\f347";
  font-size: 32px;
}

.spoticon-now-playing-48::before {
  content: "\f455";
  font-size: 48px;
}

.spoticon-now-playing-64::before {
  content: "\f348";
  font-size: 64px;
}

.spoticon-now-playing-active-16::before {
  content: "\f37D";
  font-size: 16px;
}

.spoticon-now-playing-active-24::before {
  content: "\f37E";
  font-size: 24px;
}

.spoticon-now-playing-active-32::before {
  content: "\f37F";
  font-size: 32px;
}

.spoticon-now-playing-active-48::before {
  content: "\f456";
  font-size: 48px;
}

.spoticon-now-playing-active-64::before {
  content: "\f380";
  font-size: 64px;
}

.spoticon-offline-16::before {
  content: "\f21D";
  font-size: 16px;
}

.spoticon-offline-24::before {
  content: "\f3BF";
  font-size: 24px;
}

.spoticon-offline-32::before {
  content: "\f21E";
  font-size: 32px;
}

.spoticon-offline-48::before {
  content: "\f457";
  font-size: 48px;
}

.spoticon-offline-64::before {
  content: "\f21F";
  font-size: 64px;
}

.spoticon-offline-sync-16::before {
  content: "\f1B9";
  font-size: 16px;
}

.spoticon-offline-sync-24::before {
  content: "\f3B6";
  font-size: 24px;
}

.spoticon-offline-sync-32::before {
  content: "\f1BA";
  font-size: 32px;
}

.spoticon-offline-sync-48::before {
  content: "\f458";
  font-size: 48px;
}

.spoticon-offline-sync-64::before {
  content: "\f1BB";
  font-size: 64px;
}

.spoticon-pause-16::before {
  content: "\f130";
  font-size: 16px;
}

.spoticon-pause-24::before {
  content: "\f1D3";
  font-size: 24px;
}

.spoticon-pause-32::before {
  content: "\f131";
  font-size: 32px;
}

.spoticon-pause-48::before {
  content: "\f459";
  font-size: 48px;
}

.spoticon-pause-64::before {
  content: "\f189";
  font-size: 64px;
}

.spoticon-payment-16::before {
  content: "\f241";
  font-size: 16px;
}

.spoticon-payment-32::before {
  content: "\f242";
  font-size: 32px;
}

.spoticon-paymenthistory-16::before {
  content: "\f24A";
  font-size: 16px;
}

.spoticon-paymenthistory-32::before {
  content: "\f24B";
  font-size: 32px;
}

.spoticon-play-16::before {
  content: "\f132";
  font-size: 16px;
}

.spoticon-play-24::before {
  content: "\f1C8";
  font-size: 24px;
}

.spoticon-play-32::before {
  content: "\f133";
  font-size: 32px;
}

.spoticon-play-48::before {
  content: "\f45A";
  font-size: 48px;
}

.spoticon-play-64::before {
  content: "\f18A";
  font-size: 64px;
}

.spoticon-playback-speed-0point5x-16::before {
  content: "\f4c4";
  font-size: 16px;
}

.spoticon-playback-speed-0point5x-24::before {
  content: "\f4c5";
  font-size: 24px;
}

.spoticon-playback-speed-0point5x-32::before {
  content: "\f4c6";
  font-size: 32px;
}

.spoticon-playback-speed-0point5x-48::before {
  content: "\f4c7";
  font-size: 48px;
}

.spoticon-playback-speed-0point5x-64::before {
  content: "\f4c8";
  font-size: 64px;
}

.spoticon-playback-speed-0point8x-16::before {
  content: "\f4c9";
  font-size: 16px;
}

.spoticon-playback-speed-0point8x-24::before {
  content: "\f4ca";
  font-size: 24px;
}

.spoticon-playback-speed-0point8x-32::before {
  content: "\f4cb";
  font-size: 32px;
}

.spoticon-playback-speed-0point8x-48::before {
  content: "\f4cc";
  font-size: 48px;
}

.spoticon-playback-speed-0point8x-64::before {
  content: "\f4cd";
  font-size: 64px;
}

.spoticon-playback-speed-1point2x-16::before {
  content: "\f4d3";
  font-size: 16px;
}

.spoticon-playback-speed-1point2x-24::before {
  content: "\f4d4";
  font-size: 24px;
}

.spoticon-playback-speed-1point2x-32::before {
  content: "\f4d5";
  font-size: 32px;
}

.spoticon-playback-speed-1point2x-48::before {
  content: "\f4d6";
  font-size: 48px;
}

.spoticon-playback-speed-1point2x-64::before {
  content: "\f4d7";
  font-size: 64px;
}

.spoticon-playback-speed-1point5x-16::before {
  content: "\f4d8";
  font-size: 16px;
}

.spoticon-playback-speed-1point5x-24::before {
  content: "\f4d9";
  font-size: 24px;
}

.spoticon-playback-speed-1point5x-32::before {
  content: "\f4da";
  font-size: 32px;
}

.spoticon-playback-speed-1point5x-48::before {
  content: "\f4db";
  font-size: 48px;
}

.spoticon-playback-speed-1point5x-64::before {
  content: "\f4dc";
  font-size: 64px;
}

.spoticon-playback-speed-1x-16::before {
  content: "\f4ce";
  font-size: 16px;
}

.spoticon-playback-speed-1x-24::before {
  content: "\f4cf";
  font-size: 24px;
}

.spoticon-playback-speed-1x-32::before {
  content: "\f4d0";
  font-size: 32px;
}

.spoticon-playback-speed-1x-48::before {
  content: "\f4d1";
  font-size: 48px;
}

.spoticon-playback-speed-1x-64::before {
  content: "\f4d2";
  font-size: 64px;
}

.spoticon-playback-speed-2x-16::before {
  content: "\f4dd";
  font-size: 16px;
}

.spoticon-playback-speed-2x-24::before {
  content: "\f4de";
  font-size: 24px;
}

.spoticon-playback-speed-2x-32::before {
  content: "\f4df";
  font-size: 32px;
}

.spoticon-playback-speed-2x-48::before {
  content: "\f4e0";
  font-size: 48px;
}

.spoticon-playback-speed-2x-64::before {
  content: "\f4e1";
  font-size: 64px;
}

.spoticon-playback-speed-3x-16::before {
  content: "\f4e2";
  font-size: 16px;
}

.spoticon-playback-speed-3x-24::before {
  content: "\f4e3";
  font-size: 24px;
}

.spoticon-playback-speed-3x-32::before {
  content: "\f4e4";
  font-size: 32px;
}

.spoticon-playback-speed-3x-48::before {
  content: "\f4e5";
  font-size: 48px;
}

.spoticon-playback-speed-3x-64::before {
  content: "\f4e6";
  font-size: 64px;
}

.spoticon-playlist-16::before {
  content: "\f134";
  font-size: 16px;
}

.spoticon-playlist-24::before {
  content: "\f3A2";
  font-size: 24px;
}

.spoticon-playlist-32::before {
  content: "\f135";
  font-size: 32px;
}

.spoticon-playlist-48::before {
  content: "\f45B";
  font-size: 48px;
}

.spoticon-playlist-64::before {
  content: "\f18E";
  font-size: 64px;
}

.spoticon-playlist-folder-16::before {
  content: "\f136";
  font-size: 16px;
}

.spoticon-playlist-folder-24::before {
  content: "\f4a4";
  font-size: 24px;
}

.spoticon-playlist-folder-32::before {
  content: "\f137";
  font-size: 32px;
}

.spoticon-playlist-folder-48::before {
  content: "\f4a5";
  font-size: 48px;
}

.spoticon-playlist-folder-64::before {
  content: "\f1C3";
  font-size: 64px;
}

.spoticon-plus-16::before {
  content: "\f138";
  font-size: 16px;
}

.spoticon-plus-24::before {
  content: "\f1C6";
  font-size: 24px;
}

.spoticon-plus-2px-16::before {
  content: "\f15b";
  font-size: 16px;
}

.spoticon-plus-2px-24::before {
  content: "\f162";
  font-size: 24px;
}

.spoticon-plus-2px-32::before {
  content: "\f163";
  font-size: 32px;
}

.spoticon-plus-32::before {
  content: "\f139";
  font-size: 32px;
}

.spoticon-plus-48::before {
  content: "\f45C";
  font-size: 48px;
}

.spoticon-plus-64::before {
  content: "\f18F";
  font-size: 64px;
}

.spoticon-plus-alt-16::before {
  content: "\f349";
  font-size: 16px;
}

.spoticon-plus-alt-24::before {
  content: "\f34A";
  font-size: 24px;
}

.spoticon-plus-alt-32::before {
  content: "\f34B";
  font-size: 32px;
}

.spoticon-plus-alt-48::before {
  content: "\f45D";
  font-size: 48px;
}

.spoticon-plus-alt-64::before {
  content: "\f34C";
  font-size: 64px;
}

.spoticon-podcasts-16::before {
  content: "\f238";
  font-size: 16px;
}

.spoticon-podcasts-24::before {
  content: "\f3C5";
  font-size: 24px;
}

.spoticon-podcasts-32::before {
  content: "\f239";
  font-size: 32px;
}

.spoticon-podcasts-48::before {
  content: "\f45E";
  font-size: 48px;
}

.spoticon-podcasts-64::before {
  content: "\f23A";
  font-size: 64px;
}

.spoticon-podcasts-active-16::before {
  content: "\f4b0";
  font-size: 16px;
}

.spoticon-podcasts-active-24::before {
  content: "\f4b1";
  font-size: 24px;
}

.spoticon-podcasts-active-32::before {
  content: "\f4b2";
  font-size: 32px;
}

.spoticon-podcasts-active-48::before {
  content: "\f4b3";
  font-size: 48px;
}

.spoticon-podcasts-active-64::before {
  content: "\f4b4";
  font-size: 64px;
}

.spoticon-public-16::before {
  content: "\f190";
  font-size: 16px;
}

.spoticon-public-32::before {
  content: "\f191";
  font-size: 32px;
}

.spoticon-queue-16::before {
  content: "\f13a";
  font-size: 16px;
}

.spoticon-queue-24::before {
  content: "\f3A3";
  font-size: 24px;
}

.spoticon-queue-32::before {
  content: "\f13b";
  font-size: 32px;
}

.spoticon-queue-48::before {
  content: "\f45F";
  font-size: 48px;
}

.spoticon-queue-64::before {
  content: "\f193";
  font-size: 64px;
}

.spoticon-queue-number-48::before {
  content: "\f460";
  font-size: 48px;
}

.spoticon-radio-16::before {
  content: "\f13c";
  font-size: 16px;
}

.spoticon-radio-24::before {
  content: "\f1C7";
  font-size: 24px;
}

.spoticon-radio-32::before {
  content: "\f13d";
  font-size: 32px;
}

.spoticon-radio-48::before {
  content: "\f461";
  font-size: 48px;
}

.spoticon-radio-64::before {
  content: "\f194";
  font-size: 64px;
}

.spoticon-radio-active-16::before {
  content: "\f381";
  font-size: 16px;
}

.spoticon-radio-active-24::before {
  content: "\f382";
  font-size: 24px;
}

.spoticon-radio-active-32::before {
  content: "\f383";
  font-size: 32px;
}

.spoticon-radio-active-48::before {
  content: "\f462";
  font-size: 48px;
}

.spoticon-radio-active-64::before {
  content: "\f384";
  font-size: 64px;
}

.spoticon-radioqueue-16::before {
  content: "\f26E";
  font-size: 16px;
}

.spoticon-radioqueue-32::before {
  content: "\f26F";
  font-size: 32px;
}

.spoticon-redeem-16::before {
  content: "\f24D";
  font-size: 16px;
}

.spoticon-redeem-32::before {
  content: "\f24E";
  font-size: 32px;
}

.spoticon-refresh-16::before {
  content: "\f195";
  font-size: 16px;
}

.spoticon-refresh-24::before {
  content: "\f3B2";
  font-size: 24px;
}

.spoticon-refresh-32::before {
  content: "\f196";
  font-size: 32px;
}

.spoticon-refresh-48::before {
  content: "\f463";
  font-size: 48px;
}

.spoticon-refresh-64::before {
  content: "\f197";
  font-size: 64px;
}

.spoticon-released-16::before {
  content: "\f198";
  font-size: 16px;
}

.spoticon-released-24::before {
  content: "\f3B3";
  font-size: 24px;
}

.spoticon-released-32::before {
  content: "\f199";
  font-size: 32px;
}

.spoticon-released-48::before {
  content: "\f464";
  font-size: 48px;
}

.spoticon-released-64::before {
  content: "\f19A";
  font-size: 64px;
}

.spoticon-released-alt-48::before {
  content: "\f465";
  font-size: 48px;
}

.spoticon-repeat-16::before {
  content: "\f13e";
  font-size: 16px;
}

.spoticon-repeat-24::before {
  content: "\f1D4";
  font-size: 24px;
}

.spoticon-repeat-32::before {
  content: "\f13f";
  font-size: 32px;
}

.spoticon-repeat-48::before {
  content: "\f466";
  font-size: 48px;
}

.spoticon-repeat-64::before {
  content: "\f19B";
  font-size: 64px;
}

.spoticon-repeatonce-16::before {
  content: "\f200";
  font-size: 16px;
}

.spoticon-repeatonce-24::before {
  content: "\f201";
  font-size: 24px;
}

.spoticon-repeatonce-32::before {
  content: "\f202";
  font-size: 32px;
}

.spoticon-repeatonce-48::before {
  content: "\f467";
  font-size: 48px;
}

.spoticon-repeatonce-64::before {
  content: "\f209";
  font-size: 64px;
}

.spoticon-report-abuse-16::before {
  content: "\f261";
  font-size: 16px;
}

.spoticon-report-abuse-24::before {
  content: "\f3C7";
  font-size: 24px;
}

.spoticon-report-abuse-32::before {
  content: "\f256";
  font-size: 32px;
}

.spoticon-report-abuse-48::before {
  content: "\f468";
  font-size: 48px;
}

.spoticon-report-abuse-64::before {
  content: "\f3F8";
  font-size: 64px;
}

.spoticon-running-16::before {
  content: "\f28F";
  font-size: 16px;
}

.spoticon-running-32::before {
  content: "\f290";
  font-size: 32px;
}

.spoticon-search-16::before {
  content: "\f140";
  font-size: 16px;
}

.spoticon-search-24::before {
  content: "\f3A4";
  font-size: 24px;
}

.spoticon-search-32::before {
  content: "\f141";
  font-size: 32px;
}

.spoticon-search-48::before {
  content: "\f469";
  font-size: 48px;
}

.spoticon-search-64::before {
  content: "\f19F";
  font-size: 64px;
}

.spoticon-search-active-16::before {
  content: "\f371";
  font-size: 16px;
}

.spoticon-search-active-24::before {
  content: "\f372";
  font-size: 24px;
}

.spoticon-search-active-32::before {
  content: "\f373";
  font-size: 32px;
}

.spoticon-search-active-48::before {
  content: "\f46A";
  font-size: 48px;
}

.spoticon-search-active-64::before {
  content: "\f374";
  font-size: 64px;
}

.spoticon-sendto-16::before {
  content: "\f232";
  font-size: 16px;
}

.spoticon-sendto-32::before {
  content: "\f233";
  font-size: 32px;
}

.spoticon-sendto-64::before {
  content: "\f234";
  font-size: 64px;
}

.spoticon-share-16::before {
  content: "\f142";
  font-size: 16px;
}

.spoticon-share-24::before {
  content: "\f3A5";
  font-size: 24px;
}

.spoticon-share-32::before {
  content: "\f143";
  font-size: 32px;
}

.spoticon-share-48::before {
  content: "\f46B";
  font-size: 48px;
}

.spoticon-share-64::before {
  content: "\f1BC";
  font-size: 64px;
}

.spoticon-share-android-16::before {
  content: "\f216";
  font-size: 16px;
}

.spoticon-share-android-24::before {
  content: "\f48f";
  font-size: 24px;
}

.spoticon-share-android-32::before {
  content: "\f217";
  font-size: 32px;
}

.spoticon-share-android-48::before {
  content: "\f490";
  font-size: 48px;
}

.spoticon-share-android-64::before {
  content: "\f218";
  font-size: 64px;
}

.spoticon-sharetofollowers-16::before {
  content: "\f235";
  font-size: 16px;
}

.spoticon-sharetofollowers-32::before {
  content: "\f236";
  font-size: 32px;
}

.spoticon-sharetofollowers-64::before {
  content: "\f237";
  font-size: 64px;
}

.spoticon-shows-16::before {
  content: "\f27D";
  font-size: 16px;
}

.spoticon-shows-32::before {
  content: "\f27E";
  font-size: 32px;
}

.spoticon-shuffle-16::before {
  content: "\f144";
  font-size: 16px;
}

.spoticon-shuffle-24::before {
  content: "\f1D5";
  font-size: 24px;
}

.spoticon-shuffle-32::before {
  content: "\f145";
  font-size: 32px;
}

.spoticon-shuffle-48::before {
  content: "\f46C";
  font-size: 48px;
}

.spoticon-shuffle-64::before {
  content: "\f1A0";
  font-size: 64px;
}

.spoticon-skip-24::before {
  content: "\f3D9";
  font-size: 24px;
}

.spoticon-skip-64::before {
  content: "\f3F9";
  font-size: 64px;
}

.spoticon-skip-active-24::before {
  content: "\f3DA";
  font-size: 24px;
}

.spoticon-skip-active-64::before {
  content: "\f3FA";
  font-size: 64px;
}

.spoticon-skip-back-16::before {
  content: "\f146";
  font-size: 16px;
}

.spoticon-skip-back-24::before {
  content: "\f1D6";
  font-size: 24px;
}

.spoticon-skip-back-32::before {
  content: "\f147";
  font-size: 32px;
}

.spoticon-skip-back-48::before {
  content: "\f46D";
  font-size: 48px;
}

.spoticon-skip-back-64::before {
  content: "\f1A1";
  font-size: 64px;
}

.spoticon-skip-forward-16::before {
  content: "\f148";
  font-size: 16px;
}

.spoticon-skip-forward-24::before {
  content: "\f1D7";
  font-size: 24px;
}

.spoticon-skip-forward-32::before {
  content: "\f149";
  font-size: 32px;
}

.spoticon-skip-forward-48::before {
  content: "\f46E";
  font-size: 48px;
}

.spoticon-skip-forward-64::before {
  content: "\f1A2";
  font-size: 64px;
}

.spoticon-skipback15-16::before {
  content: "\f280";
  font-size: 16px;
}

.spoticon-skipback15-24::before {
  content: "\f3CC";
  font-size: 24px;
}

.spoticon-skipback15-32::before {
  content: "\f281";
  font-size: 32px;
}

.spoticon-skipback15-48::before {
  content: "\f46F";
  font-size: 48px;
}

.spoticon-skipback15-64::before {
  content: "\f3FB";
  font-size: 64px;
}

.spoticon-skipforward15-16::before {
  content: "\f283";
  font-size: 16px;
}

.spoticon-skipforward15-24::before {
  content: "\f3CD";
  font-size: 24px;
}

.spoticon-skipforward15-32::before {
  content: "\f284";
  font-size: 32px;
}

.spoticon-skipforward15-48::before {
  content: "\f470";
  font-size: 48px;
}

.spoticon-skipforward15-64::before {
  content: "\f3FC";
  font-size: 64px;
}

.spoticon-sleeptimer-16::before {
  content: "\f289";
  font-size: 16px;
}

.spoticon-sleeptimer-32::before {
  content: "\f28A";
  font-size: 32px;
}

.spoticon-sms-16::before {
  content: "\f1EB";
  font-size: 16px;
}

.spoticon-sms-32::before {
  content: "\f1EC";
  font-size: 32px;
}

.spoticon-sms-64::before {
  content: "\f1F8";
  font-size: 64px;
}

.spoticon-sort-16::before {
  content: "\f223";
  font-size: 16px;
}

.spoticon-sort-24::before {
  content: "\f3C1";
  font-size: 24px;
}

.spoticon-sort-32::before {
  content: "\f224";
  font-size: 32px;
}

.spoticon-sort-48::before {
  content: "\f471";
  font-size: 48px;
}

.spoticon-sort-64::before {
  content: "\f225";
  font-size: 64px;
}

.spoticon-sort-down-48::before {
  content: "\f472";
  font-size: 48px;
}

.spoticon-sort-up-48::before {
  content: "\f473";
  font-size: 48px;
}

.spoticon-sortdown-16::before {
  content: "\f226";
  font-size: 16px;
}

.spoticon-sortdown-24::before {
  content: "\f3C2";
  font-size: 24px;
}

.spoticon-sortdown-32::before {
  content: "\f227";
  font-size: 32px;
}

.spoticon-sortdown-64::before {
  content: "\f228";
  font-size: 64px;
}

.spoticon-sortup-16::before {
  content: "\f229";
  font-size: 16px;
}

.spoticon-sortup-24::before {
  content: "\f3C3";
  font-size: 24px;
}

.spoticon-sortup-32::before {
  content: "\f22A";
  font-size: 32px;
}

.spoticon-sortup-64::before {
  content: "\f22B";
  font-size: 64px;
}

.spoticon-spotify-connect-16::before {
  content: "\f1A3";
  font-size: 16px;
}

.spoticon-spotify-connect-24::before {
  content: "\f1D8";
  font-size: 24px;
}

.spoticon-spotify-connect-32::before {
  content: "\f1A4";
  font-size: 32px;
}

.spoticon-spotify-connect-48::before {
  content: "\f474";
  font-size: 48px;
}

.spoticon-spotify-connect-64::before {
  content: "\f1A5";
  font-size: 64px;
}

.spoticon-spotify-connect-alt-16::before {
  content: "\f351";
  font-size: 16px;
}

.spoticon-spotify-connect-alt-24::before {
  content: "\f352";
  font-size: 24px;
}

.spoticon-spotify-connect-alt-32::before {
  content: "\f353";
  font-size: 32px;
}

.spoticon-spotify-connect-alt-48::before {
  content: "\f475";
  font-size: 48px;
}

.spoticon-spotify-connect-alt-64::before {
  content: "\f354";
  font-size: 64px;
}

.spoticon-spotify-connect-onewave-48::before {
  content: "\f476";
  font-size: 48px;
}

.spoticon-spotify-connect-onewave-64::before {
  content: "\f3FD";
  font-size: 64px;
}

.spoticon-spotify-connect-twowave-48::before {
  content: "\f477";
  font-size: 48px;
}

.spoticon-spotify-connect-twowave-64::before {
  content: "\f3FE";
  font-size: 64px;
}

.spoticon-spotifylogo-16::before {
  content: "\f298";
  font-size: 16px;
}

.spoticon-spotifylogo-24::before {
  content: "\f3CF";
  font-size: 24px;
}

.spoticon-spotifylogo-32::before {
  content: "\f299";
  font-size: 32px;
}

.spoticon-spotifylogo-48::before {
  content: "\f478";
  font-size: 48px;
}

.spoticon-spotifylogo-64::before {
  content: "\f3FF";
  font-size: 64px;
}

.spoticon-spotifypremium-16::before {
  content: "\f292";
  font-size: 16px;
}

.spoticon-spotifypremium-32::before {
  content: "\f293";
  font-size: 32px;
}

.spoticon-star-16::before {
  content: "\f14a";
  font-size: 16px;
}

.spoticon-star-24::before {
  content: "\f3A6";
  font-size: 24px;
}

.spoticon-star-32::before {
  content: "\f14b";
  font-size: 32px;
}

.spoticon-star-48::before {
  content: "\f479";
  font-size: 48px;
}

.spoticon-star-64::before {
  content: "\f1A6";
  font-size: 64px;
}

.spoticon-star-alt-16::before {
  content: "\f4ab";
  font-size: 16px;
}

.spoticon-star-alt-24::before {
  content: "\f4ac";
  font-size: 24px;
}

.spoticon-star-alt-32::before {
  content: "\f4ad";
  font-size: 32px;
}

.spoticon-star-alt-48::before {
  content: "\f4ae";
  font-size: 48px;
}

.spoticon-star-alt-64::before {
  content: "\f4af";
  font-size: 64px;
}

.spoticon-stations-16::before {
  content: "\f4f6";
  font-size: 16px;
}

.spoticon-stations-24::before {
  content: "\f4f7";
  font-size: 24px;
}

.spoticon-stations-32::before {
  content: "\f4f8";
  font-size: 32px;
}

.spoticon-stations-48::before {
  content: "\f4f9";
  font-size: 48px;
}

.spoticon-stations-64::before {
  content: "\f4fa";
  font-size: 64px;
}

.spoticon-subtitles-16::before {
  content: "\f4bf";
  font-size: 16px;
}

.spoticon-subtitles-24::before {
  content: "\f4c0";
  font-size: 24px;
}

.spoticon-subtitles-32::before {
  content: "\f4c1";
  font-size: 32px;
}

.spoticon-subtitles-48::before {
  content: "\f4c2";
  font-size: 48px;
}

.spoticon-subtitles-64::before {
  content: "\f4c3";
  font-size: 64px;
}

.spoticon-tag-16::before {
  content: "\f14c";
  font-size: 16px;
}

.spoticon-tag-24::before {
  content: "\f3A7";
  font-size: 24px;
}

.spoticon-tag-32::before {
  content: "\f14d";
  font-size: 32px;
}

.spoticon-tag-48::before {
  content: "\f47A";
  font-size: 48px;
}

.spoticon-tag-64::before {
  content: "\f400";
  font-size: 64px;
}

.spoticon-thumbs-down-16::before {
  content: "\f14e";
  font-size: 16px;
}

.spoticon-thumbs-down-24::before {
  content: "\f1D9";
  font-size: 24px;
}

.spoticon-thumbs-down-32::before {
  content: "\f14f";
  font-size: 32px;
}

.spoticon-thumbs-down-48::before {
  content: "\f47B";
  font-size: 48px;
}

.spoticon-thumbs-down-64::before {
  content: "\f1A7";
  font-size: 64px;
}

.spoticon-thumbs-up-16::before {
  content: "\f150";
  font-size: 16px;
}

.spoticon-thumbs-up-24::before {
  content: "\f1DA";
  font-size: 24px;
}

.spoticon-thumbs-up-32::before {
  content: "\f151";
  font-size: 32px;
}

.spoticon-thumbs-up-48::before {
  content: "\f47C";
  font-size: 48px;
}

.spoticon-thumbs-up-64::before {
  content: "\f1A8";
  font-size: 64px;
}

.spoticon-time-16::before {
  content: "\f152";
  font-size: 16px;
}

.spoticon-time-24::before {
  content: "\f3A8";
  font-size: 24px;
}

.spoticon-time-32::before {
  content: "\f153";
  font-size: 32px;
}

.spoticon-time-48::before {
  content: "\f47D";
  font-size: 48px;
}

.spoticon-time-64::before {
  content: "\f1A9";
  font-size: 64px;
}

.spoticon-topcountry-16::before {
  content: "\f27A";
  font-size: 16px;
}

.spoticon-topcountry-32::before {
  content: "\f27B";
  font-size: 32px;
}

.spoticon-track-16::before {
  content: "\f156";
  font-size: 16px;
}

.spoticon-track-24::before {
  content: "\f3A9";
  font-size: 24px;
}

.spoticon-track-32::before {
  content: "\f157";
  font-size: 32px;
}

.spoticon-track-48::before {
  content: "\f47E";
  font-size: 48px;
}

.spoticon-track-64::before {
  content: "\f1AA";
  font-size: 64px;
}

.spoticon-trending-16::before {
  content: "\f158";
  font-size: 16px;
}

.spoticon-trending-24::before {
  content: "\f3AA";
  font-size: 24px;
}

.spoticon-trending-32::before {
  content: "\f159";
  font-size: 32px;
}

.spoticon-trending-48::before {
  content: "\f47F";
  font-size: 48px;
}

.spoticon-trending-64::before {
  content: "\f1AB";
  font-size: 64px;
}

.spoticon-trending-active-16::before {
  content: "\f35D";
  font-size: 16px;
}

.spoticon-trending-active-24::before {
  content: "\f35E";
  font-size: 24px;
}

.spoticon-trending-active-32::before {
  content: "\f35F";
  font-size: 32px;
}

.spoticon-trending-active-48::before {
  content: "\f480";
  font-size: 48px;
}

.spoticon-trending-active-64::before {
  content: "\f360";
  font-size: 64px;
}

.spoticon-tumblr-16::before {
  content: "\f250";
  font-size: 16px;
}

.spoticon-tumblr-32::before {
  content: "\f251";
  font-size: 32px;
}

.spoticon-twitter-16::before {
  content: "\f1ED";
  font-size: 16px;
}

.spoticon-twitter-32::before {
  content: "\f1EE";
  font-size: 32px;
}

.spoticon-twitter-64::before {
  content: "\f1F9";
  font-size: 64px;
}

.spoticon-user-16::before {
  content: "\f15c";
  font-size: 16px;
}

.spoticon-user-24::before {
  content: "\f3AB";
  font-size: 24px;
}

.spoticon-user-32::before {
  content: "\f15d";
  font-size: 32px;
}

.spoticon-user-48::before {
  content: "\f481";
  font-size: 48px;
}

.spoticon-user-64::before {
  content: "\f1AF";
  font-size: 64px;
}

.spoticon-user-active-16::before {
  content: "\f375";
  font-size: 16px;
}

.spoticon-user-active-24::before {
  content: "\f376";
  font-size: 24px;
}

.spoticon-user-active-32::before {
  content: "\f377";
  font-size: 32px;
}

.spoticon-user-active-48::before {
  content: "\f482";
  font-size: 48px;
}

.spoticon-user-active-64::before {
  content: "\f378";
  font-size: 64px;
}

.spoticon-user-alt-16::before {
  content: "\f355";
  font-size: 16px;
}

.spoticon-user-alt-24::before {
  content: "\f356";
  font-size: 24px;
}

.spoticon-user-alt-32::before {
  content: "\f357";
  font-size: 32px;
}

.spoticon-user-alt-48::before {
  content: "\f483";
  font-size: 48px;
}

.spoticon-user-alt-64::before {
  content: "\f358";
  font-size: 64px;
}

.spoticon-user-alt-active-48::before {
  content: "\f484";
  font-size: 48px;
}

.spoticon-user-circle-16::before {
  content: "\f118";
  font-size: 16px;
}

.spoticon-user-circle-24::before {
  content: "\f119";
  font-size: 24px;
}

.spoticon-user-circle-32::before {
  content: "\f154";
  font-size: 32px;
}

.spoticon-user-circle-48::before {
  content: "\f155";
  font-size: 48px;
}

.spoticon-user-circle-64::before {
  content: "\f15a";
  font-size: 64px;
}

.spoticon-video-16::before {
  content: "\f26B";
  font-size: 16px;
}

.spoticon-video-24::before {
  content: "\f2A0";
  font-size: 24px;
}

.spoticon-video-32::before {
  content: "\f26C";
  font-size: 32px;
}

.spoticon-video-48::before {
  content: "\f489";
  font-size: 48px;
}

.spoticon-video-64::before {
  content: "\f26D";
  font-size: 64px;
}

.spoticon-volume-16::before {
  content: "\f15e";
  font-size: 16px;
}

.spoticon-volume-24::before {
  content: "\f1DB";
  font-size: 24px;
}

.spoticon-volume-32::before {
  content: "\f15f";
  font-size: 32px;
}

.spoticon-volume-48::before {
  content: "\f485";
  font-size: 48px;
}

.spoticon-volume-64::before {
  content: "\f1B0";
  font-size: 64px;
}

.spoticon-volume-off-16::before {
  content: "\f1EF";
  font-size: 16px;
}

.spoticon-volume-off-24::before {
  content: "\f3BB";
  font-size: 24px;
}

.spoticon-volume-off-32::before {
  content: "\f1F0";
  font-size: 32px;
}

.spoticon-volume-off-48::before {
  content: "\f486";
  font-size: 48px;
}

.spoticon-volume-off-64::before {
  content: "\f1F1";
  font-size: 64px;
}

.spoticon-volume-onewave-16::before {
  content: "\f203";
  font-size: 16px;
}

.spoticon-volume-onewave-24::before {
  content: "\f204";
  font-size: 24px;
}

.spoticon-volume-onewave-32::before {
  content: "\f205";
  font-size: 32px;
}

.spoticon-volume-twowave-16::before {
  content: "\f206";
  font-size: 16px;
}

.spoticon-volume-twowave-24::before {
  content: "\f207";
  font-size: 24px;
}

.spoticon-volume-twowave-32::before {
  content: "\f208";
  font-size: 32px;
}

.spoticon-warning-16::before {
  content: "\f1F2";
  font-size: 16px;
}

.spoticon-warning-32::before {
  content: "\f1F3";
  font-size: 32px;
}

.spoticon-warning-64::before {
  content: "\f1F4";
  font-size: 64px;
}

.spoticon-watch-16::before {
  content: "\f359";
  font-size: 16px;
}

.spoticon-watch-24::before {
  content: "\f35A";
  font-size: 24px;
}

.spoticon-watch-32::before {
  content: "\f35B";
  font-size: 32px;
}

.spoticon-watch-48::before {
  content: "\f487";
  font-size: 48px;
}

.spoticon-watch-64::before {
  content: "\f35C";
  font-size: 64px;
}

.spoticon-whatsapp-16::before {
  content: "\f210";
  font-size: 16px;
}

.spoticon-whatsapp-32::before {
  content: "\f211";
  font-size: 32px;
}

.spoticon-whatsapp-64::before {
  content: "\f212";
  font-size: 64px;
}

.spoticon-x-16::before {
  content: "\f160";
  font-size: 16px;
}

.spoticon-x-24::before {
  content: "\f1C5";
  font-size: 24px;
}

.spoticon-x-32::before {
  content: "\f161";
  font-size: 32px;
}

.spoticon-x-48::before {
  content: "\f488";
  font-size: 48px;
}

.spoticon-x-64::before {
  content: "\f1B1";
  font-size: 64px;
}









































/**
 * Spoticons Mixins
 *
 * There are two mixins that might be useful when dealing with Spoticons.
 *
 * ##### `.spoticon-font()`
 * Gives you the font, font-family, font-style, etc styles for creating a spoticon.
 *
 * ##### `.spoticon($icon; $size;)`
 * Creates a standard spoticon. Basically creates a `:before` pseudo element,
 * gives that element `.spoticon-font()` and sets the the content to the correct
 * icon and font-size.
 *
 * NOTE: If you want the volume icon, pass just `volume` as the name not
 * `$spoticon-volume-16`,`$spoticon-volume-32`, or even `"\f15e"`. The mixin
 * will choose the correct icon and size for you.
 *
 * Styleguide 1.2.2
 */
/**
 * Spoticons In Text
 *
 * Some Spoticons need to be aligned with text.
 *
 * Markup: <div style="line-height: 50px">
 *   <span class="spoticon-thumbs-up-24"></span>Thumbs Up <span class="spoticon-thumbs-down-24"></span>Thumbs Down
 * </div>
 * <div>
 *   <span class="spoticon-gears-16"></span> Settings Icon <span class="spoticon-playlist-16"></span> Playlist
 * </div>
 *
 * Styleguide 1.2.4
 */
.spoticon-settings-16::before {
  content: "\f122";
  font-size: 16px;
}




html:lang(he) .spoticon-helpcircle-16::before, html:lang(he) .spoticon-helpcircle-24::before, html:lang(he) .spoticon-helpcircle-32::before, html:lang(he) .spoticon-helpcircle-48::before, html:lang(he) .spoticon-helpcircle-64::before {
  transform: scaleX(1);
}

.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.pull-right {
  float: right;
}



.pull-left {
  float: left;
}



.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}

.invisible {
  visibility: hidden;
}

.glue-hidden-visually {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.glue-hidden-visually {
  margin: -1px;
  padding: 0;
  border: 0;
}

.affix {
  position: fixed;
}

.border-box {
  box-sizing: border-box;
}

.img-circle {
  border-radius: 500px;
}

.allow-overflow {
  overflow: visible !important;
}

.selectable {
  -webkit-touch-callout: default;
  user-select: text;
}

.selectable {
  cursor: text;
}

body:not(.scrollbar-style-when-scrolling-mac):not(.scrollbar-style-visible-mac):not(.scrollbar-style-visible-windows):not(.scrollbar-style-visible-linux)::-webkit-scrollbar,
body:not(.scrollbar-style-when-scrolling-mac):not(.scrollbar-style-visible-mac):not(.scrollbar-style-visible-windows):not(.scrollbar-style-visible-linux) ::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.scrollbar-style-visible-mac ::-webkit-scrollbar-track, .scrollbar-style-visible-mac::-webkit-scrollbar-track, .scrollbar-style-visible-windows ::-webkit-scrollbar-track, .scrollbar-style-visible-windows::-webkit-scrollbar-track, .scrollbar-style-visible-linux ::-webkit-scrollbar-track, .scrollbar-style-visible-linux::-webkit-scrollbar-track {
  background-color: #181818;
}
.scrollbar-style-visible-mac::-webkit-scrollbar,
.scrollbar-style-visible-mac ::-webkit-scrollbar,
.scrollbar-style-visible-windows::-webkit-scrollbar,
.scrollbar-style-visible-windows ::-webkit-scrollbar,
.scrollbar-style-visible-linux::-webkit-scrollbar,
.scrollbar-style-visible-linux ::-webkit-scrollbar {
  width: 16px;
}
.scrollbar-style-visible-mac::-webkit-scrollbar:horizontal,
.scrollbar-style-visible-mac ::-webkit-scrollbar:horizontal,
.scrollbar-style-visible-windows::-webkit-scrollbar:horizontal,
.scrollbar-style-visible-windows ::-webkit-scrollbar:horizontal,
.scrollbar-style-visible-linux::-webkit-scrollbar:horizontal,
.scrollbar-style-visible-linux ::-webkit-scrollbar:horizontal {
  height: 16px;
}
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb,
.scrollbar-style-visible-mac ::-webkit-scrollbar-thumb,
.scrollbar-style-visible-windows::-webkit-scrollbar-thumb,
.scrollbar-style-visible-windows ::-webkit-scrollbar-thumb,
.scrollbar-style-visible-linux::-webkit-scrollbar-thumb,
.scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
  min-height: 32px;
  min-width: 32px;
}
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
  background-color: #535353;
}
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-windows::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-linux::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb:hover {
  background-color: #b3b3b3;
}
.scrollbar-style-visible-mac::-webkit-scrollbar-corner, .scrollbar-style-visible-mac ::-webkit-scrollbar-corner, .scrollbar-style-visible-windows::-webkit-scrollbar-corner, .scrollbar-style-visible-windows ::-webkit-scrollbar-corner, .scrollbar-style-visible-linux::-webkit-scrollbar-corner, .scrollbar-style-visible-linux ::-webkit-scrollbar-corner {
  background-color: #121212;
}

.scrollbar-style-visible-mac::-webkit-scrollbar-thumb, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box;
}

.scrollbar-style-visible-windows::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
}

.scrollbar-style-visible-linux::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
}

.scrollbar-style-visible-windows::-webkit-scrollbar-button, .scrollbar-style-visible-windows ::-webkit-scrollbar-button, .scrollbar-style-visible-linux::-webkit-scrollbar-button, .scrollbar-style-visible-linux ::-webkit-scrollbar-button {
  background-color: #181818;
  background-image: url("https://local_resource_host/images/scrollbar-buttons.png");
  background-size: 16px 64px;
}
.scrollbar-style-visible-windows::-webkit-scrollbar-button:disabled, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:disabled, .scrollbar-style-visible-linux::-webkit-scrollbar-button:disabled, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:disabled {
  background-image: none;
}
.scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:start:decrement,
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:end:increment,
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:end:increment,
.scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:start:decrement,
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:start:decrement,
.scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:end:increment,
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  height: 16px;
}
.scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:start:increment,
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:start:increment, .scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:end:decrement,
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:end:decrement,
.scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:start:increment,
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:start:increment,
.scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:end:decrement,
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}
.scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:start:decrement {
  background-position: 0 0;
}

.scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:end:increment, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:end:increment, .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:end:increment, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:end:increment {
  background-position: 0 -16px;
}

.scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:start:decrement, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:start:decrement, .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:start:decrement, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:start:decrement {
  background-position: 0 -32px;
}

.scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:end:increment, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:end:increment, .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:end:increment, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:end:increment {
  background-position: 0 -48px;
}

.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start,
.scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start,
.scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start,
.scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
  height: 64px;
}
.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
  background-color: transparent;
  background-image: url("https://local_resource_host/images/scrollbar-buttons.png"), linear-gradient(to bottom, #181818, #181818 16px);
  background-repeat: no-repeat;
}
.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
  background-position: 0 48px;
}

.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start:disabled {
  background-image: none;
}
.scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start,
.scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start,
.scrollbar-style-visible-linux.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
  height: 33px;
}
.scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
  background-position: 0 17px;
}


/**
 * Drag & Drop
 *
 * Not much use for anyone except spotify-events.
 *
 * Markup:
 *   <div class="dnd-image" draggable>Text
 *   </div>
 *
 * Styleguide 60.7
 */
[draggable] {
  user-select: none;
}

.dnd-image-shelter {
  position: fixed;
  top: 0;
  width: 300px;
  height: 300px;
  z-index: -1;
}

.dnd-image-shelter {
  background-color: #181818;
}

.dnd-image-shelter {
  left: 0;
}



.dnd-image {
  position: fixed;
  top: 0;
  color: #ffffff;
  display: inline-block;
  font-size: 13px;
  max-width: 300px;
  max-height: 300px;
  z-index: -2;
}

.dnd-image {
  border-radius: 4px;
  padding: 3px 10px 1px;
}

.dnd-image {
  left: 0;
  border-left: 10px solid transparent;
}



.dnd-image::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  color: #ffffff;
  z-index: -2;
}

.dnd-image::before {
  background: #282828;
  border-radius: 4px;
  box-shadow: 0 2px 5px #000000;
}

.dnd-image::before {
  right: 0;
  left: 0;
}



.tr-drag-indicator {
  position: absolute;
  pointer-events: none;
}

.tr-drag-indicator {
  border-top: 1px solid #1db954;
}

/* stylelint-disable selector-max-type */
/**
 * Code
 *
 * Styleguide 20.7
 */
/**
 * Inline
 *
 * Wrap inline snippets of code
 *
 * Markup:
 *   For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 *
 * Styleguide 20.7.1
 */
/**
 * Block
 *
 * Markup:
 *   <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 *
 * Styleguide 20.7.2
 */
code,
pre {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-family: var(--glue-font-family-monospace);
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  font-size: 12px;
}


code {
  white-space: nowrap;
}

code {
  padding: 2px 4px;
  background-color: #282828;
  border-radius: 4px;
}

pre {
  color: #b3b3b3;
  display: block;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
}

pre {
  padding: 10px;
  background-color: #282828;
}
pre.prettyprint {
  margin-bottom: 20px;
}
pre code {
  color: inherit;
  white-space: pre;
  white-space: pre-wrap;
}
pre code {
  padding: 0;
  background-color: transparent;
  border: 0;
}

.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
.collapse.in {
  height: auto;
}

.button {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  z-index: 0;
  font-weight: var(--glue-font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button {
  cursor: default;
  margin-bottom: 0;
  text-align: center;
  background-color: transparent;
  border: 0;
}


.button:focus {
  outline: none;
}
.button:disabled:not(.current) {
  pointer-events: none;
  opacity: 0.4;
}
.button:disabled:not(.current) {
  cursor: default;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .button {
    backface-visibility: hidden;
  }
}
.button.button-green {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-green {
  padding-top: 1px;
  border-radius: 16px;
  background: #1db954;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-green {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-green .b-alt-text {
  margin-top: -30px;
}
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
  color: white;
}
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
  background-color: #1ed760;
}
.button.button-green:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-green:not(:disabled):hover:active {
  background: #14833b;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-green:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-green {
    transition-duration: 50ms;
  }
}
.button.button-green::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-green::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-green::after {
    transition-duration: 50ms;
  }
}
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-green.contextmenu-active::after, .button.button-green:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-green.contextmenu-active::after, .button.button-green:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-green.contextmenu-active::after, .button.button-green:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-green:not(:disabled):hover:active {
  transition: none;
}
.button.button-green:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-green:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-green:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-white {
  height: 32px;
  line-height: 30px;
  color: #000000;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-white {
  padding-top: 1px;
  border-radius: 16px;
  background: #ffffff;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-white {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-white .b-alt-text {
  margin-top: -30px;
}
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
  color: #000000;
}
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
  background-color: #ffffff;
}
.button.button-white:not(:disabled):hover:active {
  color: #000000;
}
.button.button-white:not(:disabled):hover:active {
  background: #b3b3b3;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-white:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-white {
    transition-duration: 50ms;
  }
}
.button.button-white::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-white::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-white::after {
    transition-duration: 50ms;
  }
}
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-white.contextmenu-active::after, .button.button-white:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-white.contextmenu-active::after, .button.button-white:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-white.contextmenu-active::after, .button.button-white:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-white:not(:disabled):hover:active {
  transition: none;
}
.button.button-white:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-white:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-white:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-blue {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-blue {
  padding-top: 1px;
  border-radius: 16px;
  background: #2e77d0;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-blue {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-blue .b-alt-text {
  margin-top: -30px;
}
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
  color: white;
}
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
  background-color: #4687d6;
}
.button.button-blue:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-blue:not(:disabled):hover:active {
  background: #1d4c85;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-blue:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-blue {
    transition-duration: 50ms;
  }
}
.button.button-blue::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-blue::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-blue::after {
    transition-duration: 50ms;
  }
}
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-blue.contextmenu-active::after, .button.button-blue:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-blue.contextmenu-active::after, .button.button-blue:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-blue.contextmenu-active::after, .button.button-blue:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-blue:not(:disabled):hover:active {
  transition: none;
}
.button.button-blue:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-blue:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-blue:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-red {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-red {
  padding-top: 1px;
  border-radius: 16px;
  background: #cd1a2b;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-red {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-red .b-alt-text {
  margin-top: -30px;
}
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
  color: white;
}
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
  background-color: #e22134;
}
.button.button-red:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-red:not(:disabled):hover:active {
  background: #941320;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-red:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-red {
    transition-duration: 50ms;
  }
}
.button.button-red::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-red::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-red::after {
    transition-duration: 50ms;
  }
}
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-red.contextmenu-active::after, .button.button-red:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-red.contextmenu-active::after, .button.button-red:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-red.contextmenu-active::after, .button.button-red:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-red:not(:disabled):hover:active {
  transition: none;
}
.button.button-red:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-red:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-red:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-gray {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-gray {
  padding-top: 1px;
  border-radius: 16px;
  background: #404040;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-gray {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-gray .b-alt-text {
  margin-top: -30px;
}
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
  color: white;
}
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
  background-color: #535353;
}
.button.button-gray:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-gray:not(:disabled):hover:active {
  background: #333333;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-gray:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-gray {
    transition-duration: 50ms;
  }
}
.button.button-gray::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-gray::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-gray::after {
    transition-duration: 50ms;
  }
}
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-gray.contextmenu-active::after, .button.button-gray:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-gray.contextmenu-active::after, .button.button-gray:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-gray.contextmenu-active::after, .button.button-gray:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-gray:not(:disabled):hover:active {
  transition: none;
}
.button.button-gray:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-gray:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-gray:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-with-stroke {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-with-stroke {
  padding-top: 1px;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-with-stroke {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-with-stroke .b-alt-text {
  margin-top: -30px;
}
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-with-stroke:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-with-stroke:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke {
    transition-duration: 50ms;
  }
}
.button.button-with-stroke::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-with-stroke::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke::after {
    transition-duration: 50ms;
  }
}
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-with-stroke:not(:disabled):hover:active {
  transition: none;
}
.button.button-with-stroke:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-with-stroke::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-with-stroke::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-with-stroke::after {
  right: 0;
  left: 0;
}

.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-with-stroke:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-with-stroke:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-with-stroke.added, .button.button-with-stroke.active {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-with-stroke.added, .button.button-with-stroke.active {
  padding-top: 1px;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-with-stroke.added, .button.button-with-stroke.active {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-with-stroke.added .b-alt-text, .button.button-with-stroke.active .b-alt-text {
  margin-top: -30px;
}
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.added, .button.button-with-stroke.active {
    transition-duration: 50ms;
  }
}
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
    transition-duration: 50ms;
  }
}
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
  transition: none;
}
.button.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-with-stroke.active:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
  right: 0;
  left: 0;
}

.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-with-stroke.active:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-facebook {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-facebook {
  padding-top: 1px;
  border-radius: 16px;
  background: #3b5998;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-facebook {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-facebook .b-alt-text {
  margin-top: -30px;
}
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
  color: white;
}
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
  background-color: #3762ba;
}
.button.button-facebook:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-facebook:not(:disabled):hover:active {
  background: #365284;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-facebook:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-facebook {
    transition-duration: 50ms;
  }
}
.button.button-facebook::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-facebook::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-facebook::after {
    transition-duration: 50ms;
  }
}
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-facebook.contextmenu-active::after, .button.button-facebook:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-facebook.contextmenu-active::after, .button.button-facebook:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-facebook.contextmenu-active::after, .button.button-facebook:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-facebook:not(:disabled):hover:active {
  transition: none;
}
.button.button-facebook:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-facebook:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-facebook:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-icon-only {
  height: 32px;
  line-height: 30px;
  color: #b3b3b3;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 32px;
}
.button.button-icon-only {
  padding-top: 1px;
  border-radius: 16px;
  background: transparent;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-icon-only {
  padding-left: 32px;
  padding-right: 32px;
  padding-left: 0;
  padding-right: 0;
}


.button.button-icon-only .b-alt-text {
  margin-top: -30px;
}
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
  color: #ffffff;
}
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
  background-color: transparent;
}
.button.button-icon-only:not(:disabled):hover:active {
  color: #b3b3b3;
}
.button.button-icon-only:not(:disabled):hover:active {
  background: transparent;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-only:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-only {
    transition-duration: 50ms;
  }
}
.button.button-icon-only::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-icon-only::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-only::after {
    transition-duration: 50ms;
  }
}
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-icon-only.contextmenu-active::after, .button.button-icon-only:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-icon-only.contextmenu-active::after, .button.button-icon-only:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-only.contextmenu-active::after, .button.button-icon-only:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-icon-only:not(:disabled):hover:active {
  transition: none;
}
.button.button-icon-only:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-icon-only::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 32px;
  font-size: 16px;
  padding-left: 8px /* rtl:ignore */;
  width: calc(100% - 8px);
}
.button.button-icon-only::before {
  border-radius: 500px;
}
.button.button-icon-only::before {
  left: 0;
  right: 0;
}

.button.button-icon-only.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 16px;
  line-height: 32px;
}
.button.button-icon-only.button-play.playing:not(:hover), .tl-row.playing .button.button-icon-only.button-play:not(:hover), .card.playing .button.button-icon-only.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-icon-only.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-icon-only.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-icon-only.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.button.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.button.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .button.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-only.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::before, .card.playing .button.button-icon-only.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.button.button-icon-only.button-play.playing:hover::before, .tl-row.playing .button.button-icon-only.button-play:hover::before, .card.playing .button.button-icon-only.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover), .card.playing.button.button-icon-only.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::after,
.card.playing.button.button-icon-only.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-icon-only.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-icon-only.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-only.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.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::before,
.card.playing.button.button-icon-only.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.button.button-icon-only.button-play:hover::before,
.card.playing.button.button-icon-only.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}

.button.button-icon-only.active {
  color: #1ed760;
}
.button.button-icon-only.active.contextmenu-active, .button.button-icon-only.active:not(:disabled):hover {
  color: #1df369;
}
.button.button-icon-only.active:not(:disabled):hover:active {
  color: #18ac4d;
}
.button.button-icon-only.drop-target-active {
  color: #000000;
}
.button.button-icon-only.drop-target-active {
  background-color: #1ed760;
}
.button.button-icon-only.drop-target-active.contextmenu-active, .button.button-icon-only.drop-target-active:not(:disabled):hover {
  color: #000000;
}
.button.button-icon-only.drop-target-active:not(:disabled):hover:active {
  color: black;
}
.button.button-icon-only.drop-target-active.contextmenu-active, .button.button-icon-only.drop-target-active:not(:disabled):hover {
  background-color: #1ed760;
}
.button.button-icon-with-stroke {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 32px;
}
.button.button-icon-with-stroke {
  padding-top: 1px;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-icon-with-stroke {
  padding-left: 32px;
  padding-right: 32px;
  padding-left: 0;
  padding-right: 0;
}


.button.button-icon-with-stroke .b-alt-text {
  margin-top: -30px;
}
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-icon-with-stroke:not(:disabled):hover:active {
  color: #b3b3b3;
}
.button.button-icon-with-stroke:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke {
    transition-duration: 50ms;
  }
}
.button.button-icon-with-stroke::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-icon-with-stroke::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke::after {
    transition-duration: 50ms;
  }
}
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-icon-with-stroke:not(:disabled):hover:active {
  transition: none;
}
.button.button-icon-with-stroke:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-icon-with-stroke::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-icon-with-stroke::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-icon-with-stroke::after {
  right: 0;
  left: 0;
}

.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-icon-with-stroke:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-icon-with-stroke:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-icon-with-stroke::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 32px;
  font-size: 16px;
  padding-left: 8px /* rtl:ignore */;
  width: calc(100% - 8px);
}
.button.button-icon-with-stroke::before {
  border-radius: 500px;
}
.button.button-icon-with-stroke::before {
  left: 0;
  right: 0;
}

.button.button-icon-with-stroke.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 16px;
  line-height: 32px;
}
.button.button-icon-with-stroke.button-play.playing:not(:hover), .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover), .card.playing .button.button-icon-with-stroke.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-icon-with-stroke.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::before, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.button.button-icon-with-stroke.button-play.playing:hover::before, .tl-row.playing .button.button-icon-with-stroke.button-play:hover::before, .card.playing .button.button-icon-with-stroke.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover), .card.playing.button.button-icon-with-stroke.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after,
.card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-with-stroke.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.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::before,
.card.playing.button.button-icon-with-stroke.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.button.button-icon-with-stroke.button-play:hover::before,
.card.playing.button.button-icon-with-stroke.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}

.button.button-large.button-green {
  height: 48px;
  line-height: 46px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  font-size: 14px;
}

.button.button-large.button-green {
  padding-top: 1px;
  border-radius: 24px;
  background: #1db954;
  transition-property: transform, box-shadow, color, background-color;
}

.button.button-large.button-green {
  padding-left: 48px;
  padding-right: 48px;
}



.button.button-large.button-green .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
  color: white;
}
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
  background-color: #1ed760;
}
.button.button-large.button-green:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-large.button-green:not(:disabled):hover:active {
  background: #14833b;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-green:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-green {
    transition-duration: 50ms;
  }
}
.button.button-large.button-green::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-green::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-green::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-green.contextmenu-active::after, .button.button-large.button-green:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-green.contextmenu-active::after, .button.button-large.button-green:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-green.contextmenu-active::after, .button.button-large.button-green:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-green:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-green:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-green:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-green:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-white {
  height: 48px;
  line-height: 46px;
  color: #000000;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  font-size: 14px;
}
.button.button-large.button-white {
  padding-top: 1px;
  border-radius: 24px;
  background: #ffffff;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-large.button-white {
  padding-left: 48px;
  padding-right: 48px;
}


.button.button-large.button-white .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
  color: #000000;
}
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
  background-color: #ffffff;
}
.button.button-large.button-white:not(:disabled):hover:active {
  color: #000000;
}
.button.button-large.button-white:not(:disabled):hover:active {
  background: #b3b3b3;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-white:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-white {
    transition-duration: 50ms;
  }
}
.button.button-large.button-white::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-white::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-white::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-white.contextmenu-active::after, .button.button-large.button-white:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-white.contextmenu-active::after, .button.button-large.button-white:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-white.contextmenu-active::after, .button.button-large.button-white:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-white:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-white:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-white:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-white:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-blue {
  height: 48px;
  line-height: 46px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  font-size: 14px;
}
.button.button-large.button-blue {
  padding-top: 1px;
  border-radius: 24px;
  background: #2e77d0;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-large.button-blue {
  padding-left: 48px;
  padding-right: 48px;
}


.button.button-large.button-blue .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
  color: white;
}
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
  background-color: #4687d6;
}
.button.button-large.button-blue:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-large.button-blue:not(:disabled):hover:active {
  background: #1d4c85;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-blue:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-blue {
    transition-duration: 50ms;
  }
}
.button.button-large.button-blue::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-blue::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-blue::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-blue.contextmenu-active::after, .button.button-large.button-blue:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-blue.contextmenu-active::after, .button.button-large.button-blue:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-blue.contextmenu-active::after, .button.button-large.button-blue:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-blue:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-blue:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-blue:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-blue:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-red {
  height: 48px;
  line-height: 46px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  font-size: 14px;
}
.button.button-large.button-red {
  padding-top: 1px;
  border-radius: 24px;
  background: #cd1a2b;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-large.button-red {
  padding-left: 48px;
  padding-right: 48px;
}


.button.button-large.button-red .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
  color: white;
}
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
  background-color: #e22134;
}
.button.button-large.button-red:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-large.button-red:not(:disabled):hover:active {
  background: #941320;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-red:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-red {
    transition-duration: 50ms;
  }
}
.button.button-large.button-red::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-red::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-red::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-red.contextmenu-active::after, .button.button-large.button-red:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-red.contextmenu-active::after, .button.button-large.button-red:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-red.contextmenu-active::after, .button.button-large.button-red:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-red:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-red:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-red:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-red:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-gray {
  height: 48px;
  line-height: 46px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  font-size: 14px;
}
.button.button-large.button-gray {
  padding-top: 1px;
  border-radius: 24px;
  background: #404040;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-large.button-gray {
  padding-left: 48px;
  padding-right: 48px;
}


.button.button-large.button-gray .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
  color: white;
}
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
  background-color: #535353;
}
.button.button-large.button-gray:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-large.button-gray:not(:disabled):hover:active {
  background: #333333;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-gray:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-gray {
    transition-duration: 50ms;
  }
}
.button.button-large.button-gray::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-gray::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-gray::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-gray.contextmenu-active::after, .button.button-large.button-gray:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-gray.contextmenu-active::after, .button.button-large.button-gray:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-gray.contextmenu-active::after, .button.button-large.button-gray:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-gray:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-gray:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-gray:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-gray:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-with-stroke {
  height: 48px;
  line-height: 46px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  font-size: 14px;
}
.button.button-large.button-with-stroke {
  padding-top: 1px;
  border-radius: 24px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-large.button-with-stroke {
  padding-left: 48px;
  padding-right: 48px;
}


.button.button-large.button-with-stroke .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-large.button-with-stroke:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-large.button-with-stroke:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke {
    transition-duration: 50ms;
  }
}
.button.button-large.button-with-stroke::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-with-stroke::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-with-stroke:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-with-stroke:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-with-stroke::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-large.button-with-stroke::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-large.button-with-stroke::after {
  right: 0;
  left: 0;
}

.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-large.button-with-stroke:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-large.button-with-stroke:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
  height: 48px;
  line-height: 46px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
  padding-top: 1px;
  border-radius: 24px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
  padding-left: 48px;
  padding-right: 48px;
}


.button.button-large.button-with-stroke.added .b-alt-text, .button.button-large.button-with-stroke.active .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
    transition-duration: 50ms;
  }
}
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
  right: 0;
  left: 0;
}

.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-large.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-facebook {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  font-size: 14px;
}
.button.button-large.button-facebook {
  padding-top: 1px;
  border-radius: 16px;
  background: #3b5998;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-large.button-facebook {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-large.button-facebook .b-alt-text {
  margin-top: -30px;
}
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
  color: white;
}
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
  background-color: #3762ba;
}
.button.button-large.button-facebook:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-large.button-facebook:not(:disabled):hover:active {
  background: #365284;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-facebook:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-facebook {
    transition-duration: 50ms;
  }
}
.button.button-large.button-facebook::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-facebook::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-facebook::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-facebook.contextmenu-active::after, .button.button-large.button-facebook:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-facebook.contextmenu-active::after, .button.button-large.button-facebook:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-facebook.contextmenu-active::after, .button.button-large.button-facebook:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-facebook:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-facebook:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-facebook:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-facebook:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-large.button-icon-only {
  height: 48px;
  line-height: 46px;
  color: #b3b3b3;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 48px;
  font-size: 14px;
}
.button.button-large.button-icon-only {
  padding-top: 1px;
  border-radius: 24px;
  background: transparent;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-large.button-icon-only {
  padding-left: 48px;
  padding-right: 48px;
  padding-left: 0;
  padding-right: 0;
}


.button.button-large.button-icon-only .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
  color: #ffffff;
}
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
  background-color: transparent;
}
.button.button-large.button-icon-only:not(:disabled):hover:active {
  color: #b3b3b3;
}
.button.button-large.button-icon-only:not(:disabled):hover:active {
  background: transparent;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-only:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-only {
    transition-duration: 50ms;
  }
}
.button.button-large.button-icon-only::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-icon-only::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-only::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-icon-only.contextmenu-active::after, .button.button-large.button-icon-only:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-icon-only.contextmenu-active::after, .button.button-large.button-icon-only:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-only.contextmenu-active::after, .button.button-large.button-icon-only:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-icon-only:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-icon-only:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-icon-only::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 48px;
  font-size: 24px;
  padding-left: 12px /* rtl:ignore */;
  width: calc(100% - 12px);
}
.button.button-large.button-icon-only::before {
  border-radius: 500px;
}
.button.button-large.button-icon-only::before {
  left: 0;
  right: 0;
}

.button.button-large.button-icon-only.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1C8";
  font-size: 24px;
  line-height: 48px;
}
.button.button-large.button-icon-only.button-play.playing:not(:hover), .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover), .card.playing .button.button-large.button-icon-only.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-large.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-only.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::before, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1DB";
  font-size: 24px;
  line-height: 48px;
}
.button.button-large.button-icon-only.button-play.playing:hover::before, .tl-row.playing .button.button-large.button-icon-only.button-play:hover::before, .card.playing .button.button-large.button-icon-only.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1D3";
  font-size: 24px;
  line-height: 48px;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover), .card.playing.button.button-large.button-icon-only.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after,
.card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-only.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.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::before,
.card.playing.button.button-large.button-icon-only.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1DB";
  font-size: 24px;
  line-height: 48px;
}
.tl-row.playing.button.button-large.button-icon-only.button-play:hover::before,
.card.playing.button.button-large.button-icon-only.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1D3";
  font-size: 24px;
  line-height: 48px;
}

.button.button-large.button-icon-only.active {
  color: #1ed760;
}
.button.button-large.button-icon-only.active.contextmenu-active, .button.button-large.button-icon-only.active:not(:disabled):hover {
  color: #1df369;
}
.button.button-large.button-icon-only.active:not(:disabled):hover:active {
  color: #18ac4d;
}
.button.button-large.button-icon-only.drop-target-active {
  color: #000000;
}
.button.button-large.button-icon-only.drop-target-active {
  background-color: #1ed760;
}
.button.button-large.button-icon-only.drop-target-active.contextmenu-active, .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover {
  color: #000000;
}
.button.button-large.button-icon-only.drop-target-active:not(:disabled):hover:active {
  color: black;
}
.button.button-large.button-icon-only.drop-target-active.contextmenu-active, .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover {
  background-color: #1ed760;
}
.button.button-large.button-icon-with-stroke {
  height: 48px;
  line-height: 46px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 48px;
  font-size: 14px;
}
.button.button-large.button-icon-with-stroke {
  padding-top: 1px;
  border-radius: 24px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-large.button-icon-with-stroke {
  padding-left: 48px;
  padding-right: 48px;
  padding-left: 0;
  padding-right: 0;
}


.button.button-large.button-icon-with-stroke .b-alt-text {
  margin-top: -46px;
}
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
  color: #b3b3b3;
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke {
    transition-duration: 50ms;
  }
}
.button.button-large.button-icon-with-stroke::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-large.button-icon-with-stroke::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke::after {
    transition-duration: 50ms;
  }
}
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
  transition: none;
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-large.button-icon-with-stroke::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-large.button-icon-with-stroke::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-large.button-icon-with-stroke::after {
  right: 0;
  left: 0;
}

.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-large.button-icon-with-stroke::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 48px;
  font-size: 24px;
  padding-left: 12px /* rtl:ignore */;
  width: calc(100% - 12px);
}
.button.button-large.button-icon-with-stroke::before {
  border-radius: 500px;
}
.button.button-large.button-icon-with-stroke::before {
  left: 0;
  right: 0;
}

.button.button-large.button-icon-with-stroke.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1C8";
  font-size: 24px;
  line-height: 48px;
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover), .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover), .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::before, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1DB";
  font-size: 24px;
  line-height: 48px;
}
.button.button-large.button-icon-with-stroke.button-play.playing:hover::before, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:hover::before, .card.playing .button.button-large.button-icon-with-stroke.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1D3";
  font-size: 24px;
  line-height: 48px;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover), .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after,
.card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-with-stroke.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.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::before,
.card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1DB";
  font-size: 24px;
  line-height: 48px;
}
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:hover::before,
.card.playing.button.button-large.button-icon-with-stroke.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1D3";
  font-size: 24px;
  line-height: 48px;
}

.button.button-small.button-green {
  height: 24px;
  line-height: 22px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}

.button.button-small.button-green {
  padding-top: 1px;
  border-radius: 12px;
  background: #1db954;
  transition-property: transform, box-shadow, color, background-color;
}

.button.button-small.button-green {
  padding-left: 24px;
  padding-right: 24px;
}



.button.button-small.button-green .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
  color: white;
}
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
  background-color: #1ed760;
}
.button.button-small.button-green:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-small.button-green:not(:disabled):hover:active {
  background: #14833b;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-green:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-green {
    transition-duration: 50ms;
  }
}
.button.button-small.button-green::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-green::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-green::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-green.contextmenu-active::after, .button.button-small.button-green:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-green.contextmenu-active::after, .button.button-small.button-green:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-green.contextmenu-active::after, .button.button-small.button-green:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-green:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-green:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-green:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-green:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-white {
  height: 24px;
  line-height: 22px;
  color: #000000;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-white {
  padding-top: 1px;
  border-radius: 12px;
  background: #ffffff;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-small.button-white {
  padding-left: 24px;
  padding-right: 24px;
}


.button.button-small.button-white .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
  color: #000000;
}
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
  background-color: #ffffff;
}
.button.button-small.button-white:not(:disabled):hover:active {
  color: #000000;
}
.button.button-small.button-white:not(:disabled):hover:active {
  background: #b3b3b3;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-white:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-white {
    transition-duration: 50ms;
  }
}
.button.button-small.button-white::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-white::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-white::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-white.contextmenu-active::after, .button.button-small.button-white:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-white.contextmenu-active::after, .button.button-small.button-white:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-white.contextmenu-active::after, .button.button-small.button-white:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-white:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-white:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-white:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-white:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-blue {
  height: 24px;
  line-height: 22px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-blue {
  padding-top: 1px;
  border-radius: 12px;
  background: #2e77d0;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-small.button-blue {
  padding-left: 24px;
  padding-right: 24px;
}


.button.button-small.button-blue .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
  color: white;
}
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
  background-color: #4687d6;
}
.button.button-small.button-blue:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-small.button-blue:not(:disabled):hover:active {
  background: #1d4c85;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-blue:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-blue {
    transition-duration: 50ms;
  }
}
.button.button-small.button-blue::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-blue::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-blue::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-blue.contextmenu-active::after, .button.button-small.button-blue:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-blue.contextmenu-active::after, .button.button-small.button-blue:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-blue.contextmenu-active::after, .button.button-small.button-blue:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-blue:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-blue:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-blue:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-blue:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-red {
  height: 24px;
  line-height: 22px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-red {
  padding-top: 1px;
  border-radius: 12px;
  background: #cd1a2b;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-small.button-red {
  padding-left: 24px;
  padding-right: 24px;
}


.button.button-small.button-red .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
  color: white;
}
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
  background-color: #e22134;
}
.button.button-small.button-red:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-small.button-red:not(:disabled):hover:active {
  background: #941320;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-red:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-red {
    transition-duration: 50ms;
  }
}
.button.button-small.button-red::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-red::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-red::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-red.contextmenu-active::after, .button.button-small.button-red:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-red.contextmenu-active::after, .button.button-small.button-red:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-red.contextmenu-active::after, .button.button-small.button-red:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-red:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-red:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-red:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-red:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-gray {
  height: 24px;
  line-height: 22px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-gray {
  padding-top: 1px;
  border-radius: 12px;
  background: #404040;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-small.button-gray {
  padding-left: 24px;
  padding-right: 24px;
}


.button.button-small.button-gray .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
  color: white;
}
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
  background-color: #535353;
}
.button.button-small.button-gray:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-small.button-gray:not(:disabled):hover:active {
  background: #333333;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-gray:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-gray {
    transition-duration: 50ms;
  }
}
.button.button-small.button-gray::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-gray::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-gray::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-gray.contextmenu-active::after, .button.button-small.button-gray:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-gray.contextmenu-active::after, .button.button-small.button-gray:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-gray.contextmenu-active::after, .button.button-small.button-gray:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-gray:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-gray:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-gray:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-gray:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-with-stroke {
  height: 24px;
  line-height: 22px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-with-stroke {
  padding-top: 1px;
  border-radius: 12px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-small.button-with-stroke {
  padding-left: 24px;
  padding-right: 24px;
}


.button.button-small.button-with-stroke .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-small.button-with-stroke:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-small.button-with-stroke:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke {
    transition-duration: 50ms;
  }
}
.button.button-small.button-with-stroke::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-with-stroke::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-with-stroke:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-with-stroke:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-with-stroke::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-small.button-with-stroke::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-small.button-with-stroke::after {
  right: 0;
  left: 0;
}

.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-small.button-with-stroke:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-small.button-with-stroke:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
  height: 24px;
  line-height: 22px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
  padding-top: 1px;
  border-radius: 12px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
  padding-left: 24px;
  padding-right: 24px;
}


.button.button-small.button-with-stroke.added .b-alt-text, .button.button-small.button-with-stroke.active .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
    transition-duration: 50ms;
  }
}
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
  right: 0;
  left: 0;
}

.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-small.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-facebook {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-facebook {
  padding-top: 1px;
  border-radius: 16px;
  background: #3b5998;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-small.button-facebook {
  padding-left: 32px;
  padding-right: 32px;
}


.button.button-small.button-facebook .b-alt-text {
  margin-top: -30px;
}
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
  color: white;
}
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
  background-color: #3762ba;
}
.button.button-small.button-facebook:not(:disabled):hover:active {
  color: #cccccc;
}
.button.button-small.button-facebook:not(:disabled):hover:active {
  background: #365284;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-facebook:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-facebook {
    transition-duration: 50ms;
  }
}
.button.button-small.button-facebook::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-facebook::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-facebook::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-facebook.contextmenu-active::after, .button.button-small.button-facebook:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-facebook.contextmenu-active::after, .button.button-small.button-facebook:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-facebook.contextmenu-active::after, .button.button-small.button-facebook:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-facebook:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-facebook:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-facebook:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-facebook:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.button.button-small.button-icon-only {
  height: 24px;
  line-height: 22px;
  color: #b3b3b3;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 24px;
}
.button.button-small.button-icon-only {
  padding-top: 1px;
  border-radius: 12px;
  background: transparent;
  transition-property: transform, box-shadow, color, background-color;
}
.button.button-small.button-icon-only {
  padding-left: 24px;
  padding-right: 24px;
  padding-left: 0;
  padding-right: 0;
}


.button.button-small.button-icon-only .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
  color: #ffffff;
}
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
  background-color: transparent;
}
.button.button-small.button-icon-only:not(:disabled):hover:active {
  color: #b3b3b3;
}
.button.button-small.button-icon-only:not(:disabled):hover:active {
  background: transparent;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-only:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-only {
    transition-duration: 50ms;
  }
}
.button.button-small.button-icon-only::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-icon-only::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-only::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-icon-only.contextmenu-active::after, .button.button-small.button-icon-only:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-icon-only.contextmenu-active::after, .button.button-small.button-icon-only:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-only.contextmenu-active::after, .button.button-small.button-icon-only:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-icon-only:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-icon-only:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-icon-only::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 24px;
  font-size: 12px;
  padding-left: 6px /* rtl:ignore */;
  width: calc(100% - 6px);
}
.button.button-small.button-icon-only::before {
  border-radius: 500px;
}
.button.button-small.button-icon-only::before {
  left: 0;
  right: 0;
}

.button.button-small.button-icon-only.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 12px;
  line-height: 24px;
}
.button.button-small.button-icon-only.button-play.playing:not(:hover), .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover), .card.playing .button.button-small.button-icon-only.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-small.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-only.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::before, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 12px;
  line-height: 24px;
}
.button.button-small.button-icon-only.button-play.playing:hover::before, .tl-row.playing .button.button-small.button-icon-only.button-play:hover::before, .card.playing .button.button-small.button-icon-only.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 12px;
  line-height: 24px;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover), .card.playing.button.button-small.button-icon-only.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after,
.card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-only.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.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::before,
.card.playing.button.button-small.button-icon-only.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 12px;
  line-height: 24px;
}
.tl-row.playing.button.button-small.button-icon-only.button-play:hover::before,
.card.playing.button.button-small.button-icon-only.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 12px;
  line-height: 24px;
}

.button.button-small.button-icon-only.active {
  color: #1ed760;
}
.button.button-small.button-icon-only.active.contextmenu-active, .button.button-small.button-icon-only.active:not(:disabled):hover {
  color: #1df369;
}
.button.button-small.button-icon-only.active:not(:disabled):hover:active {
  color: #18ac4d;
}
.button.button-small.button-icon-only.drop-target-active {
  color: #000000;
}
.button.button-small.button-icon-only.drop-target-active {
  background-color: #1ed760;
}
.button.button-small.button-icon-only.drop-target-active.contextmenu-active, .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover {
  color: #000000;
}
.button.button-small.button-icon-only.drop-target-active:not(:disabled):hover:active {
  color: black;
}
.button.button-small.button-icon-only.drop-target-active.contextmenu-active, .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover {
  background-color: #1ed760;
}
.button.button-small.button-icon-with-stroke {
  height: 24px;
  line-height: 22px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 24px;
}
.button.button-small.button-icon-with-stroke {
  padding-top: 1px;
  border-radius: 12px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-small.button-icon-with-stroke {
  padding-left: 24px;
  padding-right: 24px;
  padding-left: 0;
  padding-right: 0;
}


.button.button-small.button-icon-with-stroke .b-alt-text {
  margin-top: -22px;
}
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
  color: #b3b3b3;
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke {
    transition-duration: 50ms;
  }
}
.button.button-small.button-icon-with-stroke::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-icon-with-stroke::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke::after {
    transition-duration: 50ms;
  }
}
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
  transition: none;
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active::after {
  transition: none;
}
.button.button-small.button-icon-with-stroke::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-small.button-icon-with-stroke::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.button.button-small.button-icon-with-stroke::after {
  right: 0;
  left: 0;
}

.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
  transform: scale(1.0833333333);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
    transform: scale(1.0833333333);
  }
}
.button.button-small.button-icon-with-stroke::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 24px;
  font-size: 12px;
  padding-left: 6px /* rtl:ignore */;
  width: calc(100% - 6px);
}
.button.button-small.button-icon-with-stroke::before {
  border-radius: 500px;
}
.button.button-small.button-icon-with-stroke::before {
  left: 0;
  right: 0;
}

.button.button-small.button-icon-with-stroke.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 12px;
  line-height: 24px;
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover), .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover), .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::before, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 12px;
  line-height: 24px;
}
.button.button-small.button-icon-with-stroke.button-play.playing:hover::before, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:hover::before, .card.playing .button.button-small.button-icon-with-stroke.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 12px;
  line-height: 24px;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover), .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after,
.card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-with-stroke.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.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::before,
.card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 12px;
  line-height: 24px;
}
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:hover::before,
.card.playing.button.button-small.button-icon-with-stroke.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 12px;
  line-height: 24px;
}

.b-alt-text {
  opacity: 0;
}

.b-play-text,
.b-pause-text,
.b-add-text,
.b-added-text,
.b-remove-text {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}

.b-play-text, .b-pause-text, .b-add-text, .b-added-text, .b-remove-text {
  transition-property: opacity;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .b-play-text, .b-pause-text, .b-add-text, .b-added-text, .b-remove-text {
    transition-duration: 50ms;
  }
}

.button:hover .b-play-text,
.button:hover .b-pause-text,
.button:hover .b-add-text,
.button:hover .b-added-text,
.button:hover .b-remove-text {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}

.button:hover .b-play-text, .button:hover .b-pause-text, .button:hover .b-add-text, .button:hover .b-added-text, .button:hover .b-remove-text {
  transition-property: opacity;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .button:hover .b-play-text, .button:hover .b-pause-text, .button:hover .b-add-text, .button:hover .b-added-text, .button:hover .b-remove-text {
    transition-duration: 66ms;
  }
}

.button-play.button-icon-only .b-play-text,
.button-play.button-icon-only .b-pause-text, .button-play.button-icon-with-stroke .b-play-text,
.button-play.button-icon-with-stroke .b-pause-text {
  display: none;
}

.button-play.playing .b-play-text {
  opacity: 0;
}
.button-play.playing .b-pause-text {
  opacity: 1;
}

.button-add.button-icon-only .b-add-text,
.button-add.button-icon-only .b-added-text,
.button-add.button-icon-only .b-remove-text, .button-add.button-icon-with-stroke .b-add-text,
.button-add.button-icon-with-stroke .b-added-text,
.button-add.button-icon-with-stroke .b-remove-text {
  display: none;
}
.button-add.button-icon-only::before, .button-add.button-icon-with-stroke::before {
  content: "\f138";
}

.button-header-add::before, .button-header-add.just-changed::before {
  content: "\f320";
}
.button-header-add.added::before, .button-header-add.added:hover::before, .button-header-add.added.just-changed::before {
  content: "\f322";
}

.button-more::before {
  content: "\f12c";
}

.button-thumbs-down::before {
  content: "\f14e";
}

.button-thumbs-up::before {
  content: "\f150";
}

.button-link {
  font-size: inherit;
  font-weight: bold;
  vertical-align: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
  text-decoration: underline;
}

.button-link {
  padding: inherit;
  margin: inherit;
  cursor: pointer;
}

.button.spoticon-heart-active-16:disabled {
  opacity: 1;
}

.added .button-add .b-added-text,
.button-add.added .b-added-text {
  opacity: 1;
}
.added .button-add .b-add-text,
.button-add.added .b-add-text {
  opacity: 0;
}
.added .button-add.button-icon-only::before, .added .button-add.button-icon-with-stroke::before,
.button-add.added.button-icon-only::before,
.button-add.added.button-icon-with-stroke::before {
  content: "\f10a";
}
.added .button-add.button-icon-only:hover::before, .added .button-add.button-icon-with-stroke:hover::before,
.button-add.added.button-icon-only:hover::before,
.button-add.added.button-icon-with-stroke:hover::before {
  content: "\f160";
}
.added .button-add:hover .b-remove-text,
.button-add.added:hover .b-remove-text {
  opacity: 1;
}
.added .button-add:hover .b-added-text,
.button-add.added:hover .b-added-text {
  opacity: 0;
}
.added .button-add.just-changed, .added .button-add.stay-added, .button-add.added.just-changed, .button-add.added.stay-added {
  border-color: #1db954;
}
.added .button-add.just-changed .b-remove-text, .added .button-add.stay-added .b-remove-text,
.button-add.added.just-changed .b-remove-text,
.button-add.added.stay-added .b-remove-text {
  opacity: 0;
}
.added .button-add.just-changed .b-added-text, .added .button-add.stay-added .b-added-text,
.button-add.added.just-changed .b-added-text,
.button-add.added.stay-added .b-added-text {
  opacity: 1;
}
.added .button-add.just-changed.button-icon-only::before, .added .button-add.just-changed.button-icon-with-stroke::before, .added .button-add.stay-added.button-icon-only::before, .added .button-add.stay-added.button-icon-with-stroke::before,
.button-add.added.just-changed.button-icon-only::before,
.button-add.added.just-changed.button-icon-with-stroke::before,
.button-add.added.stay-added.button-icon-only::before,
.button-add.added.stay-added.button-icon-with-stroke::before {
  content: "\f10a";
}
.added .button-add:not(.button-icon-only):not(.button-icon-with-stroke),
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke) {
  color: #1ed760;
}
.added .button-add:not(.button-icon-only):not(.button-icon-with-stroke).contextmenu-active, .added .button-add:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover,
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke).contextmenu-active,
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover {
  color: #1ed760;
}
.added .button-add:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover:active,
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover:active {
  color: #18ac4d;
}

.added .button.button-icon-only.button-add {
  color: #ffffff;
}
.added .button.button-icon-only.button-add::before {
  content: "\f322";
}

.unlike-removes-entity .added .button-add:not(.just-changed):hover::before {
  content: "\f160";
}

button.button-icon-only.button-add {
  color: #ffffff;
}

/**
 * Standard buttons
 *
 * NOTE: Any button title must be in a `span` element and the span must not have
 * spaces before or after it. This is to stop IE's fake depressing of the
 * buttons when clicked.
 *
 * Markup: <button type="button" class="button {$modifiers}">
 *   Some button
 * </button>
 * <button type="button" class="button button-primary {$modifiers}">
 *   Some button
 * </button>
 *
 * Styleguide 25.1
 */
/**
 * Icon buttons
 *
 * Styleguide 25.2
 */
/**
 * With text
 *
 * Markup: <button type="button" class="button spoticon-radio-16">
 *   Start Radio
 * </button>
 *
 * Styleguide 25.2.1
 */
/**
 * Without text
 *
 * Markup: <button type="button" class="button button-icon-only spoticon-more-16"></button>
 * <button type="button" class="button button-icon-only spoticon-plus-16"></button>
 * <button type="button" class="button button-icon-only spoticon-check-16"></button>
 * <button type="button" class="button button-icon-only spoticon-radio-16"></button>
 * <button type="button" class="button button-icon-only spoticon-pause-16"></button>
 * <button type="button" class="button button-icon-only spoticon-play-16"></button>
 * <button type="button" class="button button-icon-only spoticon-thumbs-down-16"></button>
 * <button type="button" class="button button-icon-only spoticon-thumbs-up-16"></button>
 * <button type="button" class="button button-icon-only spoticon-heart-16"></button>
 * <button type="button" class="button button-icon-only spoticon-ban-16"></button>
 *
 * Styleguide 25.2.2
 */
/**
 * Without text and circle
 *
 * Markup: <button type="button" class="button button-icon-only button-no-border spoticon-more-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-plus-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-check-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-radio-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-pause-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-play-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-thumbs-down-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-thumbs-up-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-heart-16"></button>
 * <button type="button" class="button button-icon-only button-no-border spoticon-ban-16"></button>
 *
 * Styleguide 25.2.3
 */
/**
 * Specific buttons
 *
 * Styleguide 25.3
 */
/**
* Play & Radio
*
* The play button will always have a playing/paused indicator, a play button should never just be text.
* Most of the time you probably want play to be the primary action too, so add .button-primary.
*
* Markup:
* <button type="button" class="button button-play">
*   <div class="b-play-text">Play</div>
*   <div class="b-radio-text">Start Radio</div>
*   <div class="b-pause-text b-alt-text">Pause</div>
* </button>
* <button type="button" class="button button-play button-icon-only">
*   <div class="b-play-text">Play</div>
*   <div class="b-radio-text">Start Radio</div>
*   <div class="b-pause-text b-alt-text">Pause</div>
* </button>
* <button type="button" class="button button-radio">
*   <div class="b-play-text">Play</div>
*   <div class="b-radio-text">Start Radio</div>
*   <div class="b-pause-text b-alt-text">Pause</div>
* </button>
* <button type="button" class="button button-radio button-icon-only">
*   <div class="b-play-text">Play</div>
*   <div class="b-radio-text">Start Radio</div>
*   <div class="b-pause-text b-alt-text">Pause</div>
* </button>
* <button type="button" class="button button-play button-primary">
*   <div class="b-play-text">Play</div>
*   <div class="b-radio-text">Start Radio</div>
*   <div class="b-pause-text b-alt-text">Pause</div>
* </button>
*
* Styleguide 25.3.1
*/
/**
 * Save / Follow
 *
 * Markup:
 * <button type="button" class="button button-add" data-button="add">
 *   <div class="b-add-text">Save</div>
 *   <div class="b-added-text b-alt-text">Saved</div>
 *   <div class="b-remove-text b-alt-text">Remove</div>
 * </button>
 * <button type="button" class="button button-add button-icon-only" data-button="add">
 *   <div class="b-add-text">Save</div>
 *   <div class="b-added-text b-alt-text">Saved</div>
 *   <div class="b-remove-text b-alt-text">Remove</div>
 * </button>
 * <button type="button" class="button button-add" data-button="add">
 *   <div class="b-add-text">Follow</div>
 *   <div class="b-added-text b-alt-text">Following</div>
 *   <div class="b-remove-text b-alt-text">Unfollow</div>
 * </button>
 * <button type="button" class="button button-add button-icon-only" data-button="add">
 *   <div class="b-add-text">Follow</div>
 *   <div class="b-added-text b-alt-text">Following</div>
 *   <div class="b-remove-text b-alt-text">Unfollow</div>
 * </button>
 *
 * Styleguide 25.3.2
 */
/**
 * In the style of an <a> tag
 *
 * Markup: <button class="button button-link">Take a Survey</button>
 *
 * Styleguide 25.3.3
 */
/**
 * Button Groups
 *
 * Styleguide 25.4
 */
/**
 * With Icons
 *
 * Markup: <div class="button-group">
 *   <button type="button" class="button button-icon-only spoticon-list-view-16"></button>
 *   <button type="button" class="button button-icon-only spoticon-list-view-16 active"></button>
 *   <button type="button" class="button button-icon-only spoticon-grid-view-16"></button>
 *   <button type="button" class="button button-icon-only spoticon-grid-view-16 active"></button>
 *   <button type="button" class="button button-icon-only spoticon-more-16"></button>
 *   <button type="button" class="button button-icon-only spoticon-more-16 active"></button>
 * </div>
 *
 * Styleguide 25.4.1
 */
/**
 * With Single letters
 *
 * Markup: <div class="button-group">
 *   <button type="button" class="button">A</button>
 *   <button type="button" class="button active">A</button>
 *   <button type="button" class="button">B</button>
 *   <button type="button" class="button active">B</button>
 *   <button type="button" class="button">C</button>
 *   <button type="button" class="button active">C</button>
 * </div>
 *
 * Styleguide 25.4.2
 */
/* stylelint-disable selector-max-type */
/**
 * Forms
 *
 * Markup: <form role="form">
 *   <div class="form-group">
 *     <label for="exampleInputEmail1">Email address</label>
 *     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
 *   </div>
 *   <div class="form-group">
 *     <label for="exampleInputPassword1">Password</label>
 *     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 *   </div>
 *   <div class="form-group">
 *     <label for="exampleInputFile">File input</label>
 *     <input type="file" id="exampleInputFile">
 *     <p class="help-block">Example block-level help text here.</p>
 *   </div>
 *   <div class="checkbox">
 *     <label>
 *       <input type="checkbox"> Check me out
 *     </label>
 *   </div>
 *   <div class="form-group">
 *     <textarea style="height: 80px" class="form-control" placeholder="Type your message here..."></textarea>
 *   </div>
 *   <button type="submit" class="button">Submit</button>
 * </form>
 *
 * Styleguide 25.5
 */
/**
 * Inline Form
 *
 * Markup: <form class="form-inline" role="form">
 *   <div class="form-group">
 *     <label for="exampleInputEmail2">Email address</label>
 *     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
 *   </div>
 *   <div class="form-group">
 *     <label for="exampleInputPassword2">Password</label>
 *     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
 *   </div>
 *   <div class="checkbox">
 *     <label>
 *       <input type="checkbox"> Remember me
 *     </label>
 *   </div>
 *   <button type="submit" class="button">Sign in</button>
 * </form>
 *
 * Styleguide 25.5.1
 */
/**
 * Horizontal Form
 *
 * Markup: <form class="form-horizontal" role="form">
 *   <div class="form-group">
 *     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 *     <div class="col-sm-10">
 *       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
 *     </div>
 *   </div>
 *   <div class="form-group">
 *     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 *     <div class="col-sm-10">
 *       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
 *     </div>
 *   </div>
 *   <div class="form-group">
 *     <div class="col-sm-offset-2 col-sm-10">
 *       <div class="checkbox">
 *         <label>
 *           <input type="checkbox"> Remember me
 *         </label>
 *       </div>
 *     </div>
 *   </div>
 *   <div class="form-group">
 *     <div class="col-sm-offset-2 col-sm-10">
 *       <button type="submit" class="button">Sign in</button>
 *     </div>
 *   </div>
 * </form>
 *
 * Styleguide 25.5.2
 */
/**
 * Checks and Radio Buttons
 *
 * Markup: <div class="checkbox">
 *   <label>
 *     <input type="checkbox" value="">
 *     Option one is this and that&mdash;be sure to include why it's great
 *   </label>
 * </div>
 * <div class="radio">
 *   <label>
 *     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 *     Option one is this and that&mdash;be sure to include why it's great
 *   </label>
 * </div>
 * <div class="radio">
 *   <label>
 *     <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 *     Option two can be something else and selecting it will deselect option one
 *   </label>
 * </div>
 *
 * Styleguide 25.5.2
 */
/**
 * Checks and Radio Buttons Inline
 *
 * Markup: <label class="checkbox-inline">
 *   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
 * </label>
 * <label class="checkbox-inline">
 *   <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
 * </label>
 * <label class="checkbox-inline">
 *   <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
 * </label>
 *
 *
 * Styleguide 25.5.3
 */
/**
 * Selects
 *
 * We don't support selects as they cannot be styled reliably. Please use a
 * button and a dropdown.
 *
 * Styleguide 25.5.4
 */
/**
 * States and Sizes
 *
 * Markup: <form role="form">
 *   <fieldset disabled>
 *     <div class="form-group">
 *       <label for="disabledTextInput">Disabled input</label>
 *       <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
 *     </div>
 *     <div class="checkbox">
 *       <label>
 *         <input type="checkbox"> Can't check this
 *       </label>
 *     </div>
 *     <button type="submit" class="button">Submit</button>
 *   </fieldset>
 *   <br>
 *   <div class="form-group has-success">
 *     <label class="control-label" for="inputSuccess">Input with success</label>
 *     <input type="text" class="form-control" id="inputSuccess">
 *   </div>
 *   <div class="form-group has-warning">
 *     <label class="control-label" for="inputWarning">Input with warning</label>
 *     <input type="text" class="form-control" id="inputWarning">
 *   </div>
 *   <div class="form-group has-error">
 *     <label class="control-label" for="inputError">Input with error</label>
 *     <input type="text" class="form-control" id="inputError">
 *   </div>
 * </form>
 *
 * Styleguide 25.5.5
 */
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  font-size: 21px;
  line-height: inherit;
  color: #b3b3b3;
}

legend {
  padding: 0;
  margin-bottom: 20px;
  border: 0;
  border-bottom: 1px solid #282828;
}

label {
  display: inline-block;
}

label {
  margin-bottom: 5px;
}

input[type=search] {
  box-sizing: border-box;
}

input[type=radio],
input[type=checkbox] {
  /* IE8-9 */
  line-height: normal;
}

input[type=radio], input[type=checkbox] {
  margin: 2px 0 0;
  margin-top: 1px \9 ;
}

input[type=file] {
  display: block;
}

select[multiple],
select[size] {
  height: auto;
}

select optgroup {
  font-size: inherit;
  font-style: inherit;
  font-family: inherit;
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  height: auto;
}

output {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #404040;
  vertical-align: middle;
}

output {
  padding-top: 4px;
}

.form-control {
  display: block;
  width: 100%;
  height: 31px;
  font-size: 14px;
  line-height: 20px;
  color: #404040;
  vertical-align: middle;
  transition: all 0.1s ease-in-out;
}

.form-control {
  padding: 5px 12px 4px;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #ffffff;
  border-radius: 4px;
}
.body-container--windows .form-control, .body-container--unknown-os .form-control {
  border-radius: 0;
}
.form-control:focus {
  outline: 0;
  color: #181818;
}
.form-control:focus {
  border-color: #ffffff;
  background-color: #ffffff;
}
.form-control::placeholder {
  color: #404040;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #b3b3b3;
}
textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 15px;
}

.radio,
.checkbox {
  display: block;
  min-height: 20px;
  vertical-align: middle;
}

.radio, .checkbox {
  margin-top: 10px;
  margin-bottom: 10px;
}

.radio, .checkbox {
  padding-left: 20px;
}


.radio label,
.checkbox label {
  display: inline;
  font-weight: var(--glue-font-weight-normal);
}
.radio label, .checkbox label {
  margin-bottom: 0;
  cursor: pointer;
}

.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
  float: left;
  margin-left: -20px;
}



.radio + .radio, .checkbox + .checkbox {
  margin-top: -5px;
}

.radio-inline,
.checkbox-inline {
  display: inline-block;
  vertical-align: middle;
  font-weight: var(--glue-font-weight-bold);
}

.radio-inline, .checkbox-inline {
  margin-bottom: 0;
  cursor: pointer;
}

.radio-inline, .checkbox-inline {
  padding-left: 20px;
}



.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
  margin-top: 0;
}

.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
  margin-left: 10px;
}



input[type=radio][disabled], fieldset[disabled] input[type=radio], input[type=checkbox][disabled], fieldset[disabled] input[type=checkbox], .radio[disabled], fieldset[disabled] .radio, .radio-inline[disabled], fieldset[disabled] .radio-inline, .checkbox[disabled], fieldset[disabled] .checkbox, .checkbox-inline[disabled], fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
  color: #ffffff;
}
.has-warning .form-control {
  border-color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .form-control:focus {
  border-color: #e6e6e6;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #cd1a2b;
}
.has-error .form-control {
  border-color: #cd1a2b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control:focus {
  border-color: #a01422;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eb626f;
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
  color: #1ed760;
}
.has-success .form-control {
  border-color: #1ed760;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control:focus {
  border-color: #18aa4c;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #70eb9c;
}

.form-control-static {
  margin-bottom: 0;
}

.help-block {
  display: block;
  color: #f3f3f3;
}

.help-block {
  margin-top: 5px;
  margin-bottom: 10px;
}

@media (min-width: 592px) {
  .form-inline .form-group {
    display: inline-block;
    vertical-align: middle;
  }
  .form-inline .form-group {
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
  }
  .form-inline .radio,
.form-inline .checkbox {
    display: inline-block;
  }
  .form-inline .radio, .form-inline .checkbox {
    margin-top: 0;
    margin-bottom: 0;
  }
  .form-inline .radio, .form-inline .checkbox {
    padding-left: 0;
  }
  
  .form-inline .radio input[type=radio], .form-inline .checkbox input[type=checkbox] {
    float: none;
  }
  .form-inline .radio input[type=radio], .form-inline .checkbox input[type=checkbox] {
    margin-left: 0;
  }
  
}

.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 6px;
}
.form-horizontal .form-group {
  margin-left: -8px;
  margin-right: -8px;
}

.form-horizontal .form-group::after {
  content: "";
  display: table;
}
.form-horizontal .form-group::after {
  clear: both;
}
.form-horizontal .form-group .row {
  margin-left: -8px;
  margin-right: -8px;
}

@media (min-width: 592px) {
  .form-horizontal .form-group {
    margin-left: -8px;
    margin-right: -8px;
  }
  
  .form-horizontal .form-group .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  
}
@media (min-width: 820px) {
  .form-horizontal .form-group {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .form-horizontal .form-group .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
}
@media (min-width: 1280px) {
  .form-horizontal .form-group {
    margin-left: -12px;
    margin-right: -12px;
  }
  
  .form-horizontal .form-group .row {
    margin-left: -12px;
    margin-right: -12px;
  }
  
}
.form-horizontal .form-control-static {
  padding-top: 4px;
}
@media (min-width: 592px) {
  .form-horizontal .control-label {
    text-align: right;
  }
  
}

/* stylelint-disable selector-max-type */
/**
 * Dropdown menus
 *
 * Toggleable, contextual menu for displaying lists of links. Arrow can be added if needed.
 * You can also customize the position of the arrow.
 *
 * .arrow-top                          - Arrow up.
 * .arrow-right                        - Arrow right.
 * .arrow-bottom                       - Arrow down.
 * .arrow-left                         - Arrow left
 * .arrow-top.arrow-position-left      - Arrow on top, left positioned.
 * .arrow-right.arrow-position-top     - Arrow on the right-hand side, top positioned.
 * .arrow-bottom.arrow-position-right  - Arrow on bottom, right positioned.
 * .arrow-left.arrow-position-bottom   - Arrow on the left-hand side, bottom positioned.
 *
 * Template: dropdowns
 *
 * Styleguide 50.1
 */
/**
 * Dropdown menus with icons
 *
 * Template: dropdowns-with-icons
 *
 * Styleguide 50.1.1
 */
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  content: "";
}
.caret {
  border-top: 4px solid currentcolor;
}
.caret {
  margin-left: 2px;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}


.dropdown-interior-menu {
  list-style: none;
}

.dropdown-interior-menu {
  background-color: #282828;
  padding: 0;
  margin: 0;
}

.dropdown-menu > li > a,
.dropdown-interior-menu > li > a {
  display: block;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  color: #b3b3b3;
  white-space: nowrap;
}

.dropdown-menu > li > a, .dropdown-interior-menu > li > a {
  padding: 9px 26px;
  clear: both;
  border-bottom: none;
}

.dropdown-menu > li > a::before, .dropdown-interior-menu > li > a::before {
  margin-right: 3px;
}

.dropdown-menu > li > a.checked, .dropdown-interior-menu > li > a.checked {
  padding-left: 6px;
}

.dropdown-menu > li > a.checked::before,
.dropdown-interior-menu > li > a.checked::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f10a";
  font-size: 16px;
  line-height: inherit;
}
.dropdown-menu > li:last-child, .dropdown-menu > li:last-child > a, .dropdown-interior-menu > li:last-child, .dropdown-interior-menu > li:last-child > a {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.dropdown-menu > li:first-child, .dropdown-menu > li:first-child > a, .dropdown-interior-menu > li:first-child, .dropdown-interior-menu > li:first-child > a {
  box-shadow: none;
}
.dropdown-menu > li:first-child, .dropdown-menu > li:first-child > a, .dropdown-interior-menu > li:first-child, .dropdown-interior-menu > li:first-child > a {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.dropdown-menu.icon-menu > li > a::before, .dropdown-interior-menu.icon-menu > li > a::before {
  margin-left: -8px;
}

.dropdown-menu .divider,
.dropdown-interior-menu .divider {
  height: 2px;
  overflow: hidden;
}
.dropdown-menu .divider, .dropdown-interior-menu .divider {
  margin: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  z-index: 1000;
  display: none;
  min-width: 160px;
  list-style: none;
}

.dropdown-menu {
  padding: 0;
  margin: 0;
  background-color: #282828;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
}

.dropdown-menu {
  left: 0;
  float: left;
}


.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.dropdown-menu:not(.no-arrow).arrow-top {
  margin-top: 10px;
}
.dropdown-menu:not(.no-arrow).arrow-top::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: -20px;
}
.dropdown-menu:not(.no-arrow).arrow-top::before {
  border: 10px solid transparent;
  border-bottom: 10px solid #282828;
}
.dropdown-menu:not(.no-arrow).arrow-top::before {
  left: 50%;
  margin-left: -10px;
  margin-right: -10px;
}

.dropdown-menu:not(.no-arrow).arrow-bottom {
  margin-bottom: 10px;
}
.dropdown-menu:not(.no-arrow).arrow-bottom::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  bottom: -20px;
}
.dropdown-menu:not(.no-arrow).arrow-bottom::before {
  border: 10px solid transparent;
  border-top: 10px solid #282828;
}
.dropdown-menu:not(.no-arrow).arrow-bottom::before {
  left: 50%;
  margin-left: -10px;
  margin-right: -10px;
}

.dropdown-menu:not(.no-arrow).arrow-right {
  margin-right: 10px;
}

.dropdown-menu:not(.no-arrow).arrow-right::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 50%;
}
.dropdown-menu:not(.no-arrow).arrow-right::before {
  border: 10px solid transparent;
  margin-top: -10px;
  margin-bottom: -10px;
}
.dropdown-menu:not(.no-arrow).arrow-right::before {
  right: -20px;
  border-left: 10px solid #282828;
}

.dropdown-menu:not(.no-arrow).arrow-left {
  margin-left: 10px;
}

.dropdown-menu:not(.no-arrow).arrow-left::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 50%;
}
.dropdown-menu:not(.no-arrow).arrow-left::before {
  border: 10px solid transparent;
  margin-top: -10px;
  margin-bottom: -10px;
}
.dropdown-menu:not(.no-arrow).arrow-left::before {
  left: -20px;
  border-right: 10px solid #282828;
}

.dropdown-menu:not(.no-arrow).arrow-position-left::before {
  left: 20px;
}

.dropdown-menu:not(.no-arrow).arrow-position-right::before {
  left: auto;
  right: 20px;
}

.dropdown-menu:not(.no-arrow).arrow-position-top::before {
  top: 20px;
}
.dropdown-menu:not(.no-arrow).arrow-position-bottom::before {
  top: auto;
  bottom: 20px;
}

.dropdown-interior-menu > li.selected,
.dropdown-interior-menu > li > a:focus,
.dropdown-menu > li.selected,
.dropdown-menu > li > a:focus,
.dropdown-submenu:focus > a {
  color: #cdcdcd;
  outline: none;
}

.dropdown-interior-menu > li.selected, .dropdown-interior-menu > li > a:focus, .dropdown-menu > li.selected, .dropdown-menu > li > a:focus, .dropdown-submenu:focus > a {
  background-color: #404040;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active.selected,
.dropdown-menu > .active > a:focus,
.dropdown-interior-menu > .active > a,
.dropdown-interior-menu > .active.selected,
.dropdown-interior-menu > .active > a:focus {
  color: #1ed760;
  text-decoration: none;
  outline: 0;
}

.dropdown-menu > .active > a, .dropdown-menu > .active.selected, .dropdown-menu > .active > a:focus, .dropdown-interior-menu > .active > a, .dropdown-interior-menu > .active.selected, .dropdown-interior-menu > .active > a:focus {
  background-color: #404040;
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:focus,
.dropdown-interior-menu > .disabled > a,
.dropdown-interior-menu > .disabled > a:focus {
  color: rgba(179, 179, 179, 0.5);
}
.dropdown-menu > .disabled > a:focus,
.dropdown-interior-menu > .disabled > a:focus {
  text-decoration: none;
}
.dropdown-menu > .disabled > a:focus, .dropdown-interior-menu > .disabled > a:focus {
  background-color: transparent;
  background-image: none;
  cursor: default;
}

.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}

.dropdown-backdrop {
  position: fixed;
  bottom: 0;
  top: 0;
  z-index: 990;
}

.dropdown-backdrop {
  left: 0;
  right: 0;
}



.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}



.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
}

.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid currentcolor;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
  margin-bottom: 1px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  display: none;
}

.dropdown-submenu > .dropdown-menu {
  margin-top: -1px;
}

.dropdown-submenu > .dropdown-menu {
  left: calc(100% - 1px);
}


.dropdown-submenu > .dropdown-menu.open {
  display: inline;
}

.dropdown-submenu.left > .dropdown-menu {
  left: auto;
  right: calc(100% - 1px);
}



.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
}

.dropup .dropdown-submenu > .dropdown-menu {
  margin-top: 0;
  margin-bottom: -2px;
}

.dropup .dropdown-submenu > .dropdown-menu {
  border-bottom-left-radius: 0;
}



.dropdown-submenu > a::after {
  display: block;
  content: " ";
  width: 0;
  height: 0;
}

.dropdown-submenu > a::after {
  border-color: transparent;
  border-style: solid;
  margin-top: 4px;
}

.dropdown-submenu > a::after {
  float: right;
  border-width: 5px 0 5px 5px;
  border-left-color: #b3b3b3;
  margin-right: -7px;
}



.dropdown-submenu:hover > a::after {
  border-left-color: #cdcdcd;
}



.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  border-top-right-radius: 0;
}


.typeahead {
  z-index: 1051;
}

.body-container--windows .dropdown-menu, .body-container--unknown-os .dropdown-menu {
  border-radius: 0;
}
.body-container--windows .dropdown-menu > li:last-child, .body-container--windows .dropdown-menu > li:last-child > a, .body-container--windows .dropdown-interior-menu > li:last-child, .body-container--windows .dropdown-interior-menu > li:last-child > a, .body-container--unknown-os .dropdown-menu > li:last-child, .body-container--unknown-os .dropdown-menu > li:last-child > a, .body-container--unknown-os .dropdown-interior-menu > li:last-child, .body-container--unknown-os .dropdown-interior-menu > li:last-child > a {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.body-container--windows .dropdown-menu > li:first-child, .body-container--windows .dropdown-menu > li:first-child > a, .body-container--windows .dropdown-interior-menu > li:first-child, .body-container--windows .dropdown-interior-menu > li:first-child > a, .body-container--unknown-os .dropdown-menu > li:first-child, .body-container--unknown-os .dropdown-menu > li:first-child > a, .body-container--unknown-os .dropdown-interior-menu > li:first-child, .body-container--unknown-os .dropdown-interior-menu > li:first-child > a {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}


/* stylelint-disable selector-max-type */
/**
 * Dividers
 *
 * Small divider with or without title. In use on album page between regular tracks and additional tracks.
 *
 * Styleguide 30.1
 */
/**
 * Horizontal rules
 *
 * Markup: <hr>
 *
 * Styleguide 30.1.1
 */
hr {
  margin: 5px 0;
  border: 0;
  border-top: 1px solid #282828;
}

/**
 * Section divider
 *
 * Markup:
 *   <div class="section-divider">
 *     <div>Some cool section</div>
 *     <a class="section-auxiliary">Some Action</a>
 *   </div>
 *   <div class="section-divider section-divider-borderless">
 *     <div>Some cool section</div>
 *   </div>
 *   <div class="section-divider">
 *     <h2>Normailizes header sizes</h2>
 *     <div class="section-auxiliary">
 *       <div class="button-group">
 *         <a class="button button-icon-with-stroke spoticon-list-view-16" href="#" data-view-mode="lists"></a>
 *         <a class="button button-icon-with-stroke spoticon-grid-view-16" href="#" data-view-mode="covers"></a>
 *       </div>
 *     </div>
 *   </div>
 *   <div class="section-divider">
 *     <a>Works with links</a>
 *     <a class="section-auxiliary">Some Action</a>
 *   </div>
 *
 * Styleguide 30.1.3
 */
.section-divider {
  position: relative;
  color: #ffffff;
}
.section-divider {
  border-bottom: 1px solid #282828;
  margin: 0 0 16px;
  padding: 26px 0 4px;
}
.section-divider::after {
  content: "";
  display: table;
}
.section-divider::after {
  clear: both;
}
.section-divider > * {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.005em;
  font-weight: var(--glue-font-weight-black);
  color: #ffffff;
  text-transform: none;
}
.section-divider > * {
  margin: 0;
}

.section-divider > *:first-child {
  float: left;
}

.section-divider.section-divider-borderless {
  border-bottom: 0;
  margin-bottom: 8px;
  padding-bottom: 0;
}
.section-divider .section-auxiliary {
  white-space: nowrap;
}
.section-divider .section-auxiliary {
  float: right;
}

.section-divider .section-auxiliary a {
  color: #b3b3b3;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}


.section-divider .section-auxiliary a:hover {
  color: #ffffff;
}

.section-divider-small {
  border-bottom: 0;
  margin-bottom: 8px;
  padding-bottom: 0;
}
.section-divider-small > * {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-bold);
  color: #ffffff;
  text-transform: none;
}
.section-divider-small > * {
  margin: 0;
}


/* stylelint-disable selector-max-type */
/**
 * Tables
 *
 * For basic styling—light padding and only horizontal dividers—add the base class
 * <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant,
 * but given the widespread use of tables for other plugins like calendars and date
 * pickers, we've opted to isolate our custom table styles.
 *
 * Template: tables
 *
 * Styleguide 30.6
 */
table {
  max-width: 100%;
}

th {
  font-weight: var(--glue-font-weight-bold);
}

th {
  text-align: left;
}



.table {
  width: 100%;
}
.table th,
.table td {
  position: relative;
  line-height: 20px;
  vertical-align: top;
}
.table th, .table td {
  padding: 8px;
  border-top: 1px solid #282828;
}
.table tbody > tr:last-child > td {
  border-bottom: 1px solid #282828;
}
.table thead th {
  border-top: 0;
}
.table thead th {
  vertical-align: bottom;
}

/* stylelint-disable selector-max-type */
/* stylelint-disable max-nesting-depth */
/**
 * List Groups
 *
 * Toggleable, contextual menu for displaying lists of links. Arrow can be added if needed.
 *
 * Styleguide 30.3
 */
/**
 * Linked Items
 *
 * Template: list-groups-linked
 *
 * Styleguide 30.3.2
 */
/**
 * Custom Content
 *
 * Add nearly any HTML within, even for linked list groups like the one below.
 *
 * Template: list-groups-custom
 *
 * Styleguide 30.3.3
 */
.list-group {
  list-style: none;
}
.list-group {
  margin-bottom: 20px;
}
.list-group {
  padding-left: 0;
}


.list-group-item {
  position: relative;
  display: block;
}

.list-group-item {
  padding: 10px;
  border-bottom: 1px solid #282828;
  border-top: 1px solid #282828;
  margin-top: -1px;
}

.list-group-item-heading,
.list-group-item-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

.list-group-item-text {
  line-height: 1.3;
}

.list-group-item-text {
  margin-bottom: 0;
}

a.list-group-item {
  outline: 0;
}

a.list-group-item {
  cursor: default;
}
a.list-group-item .list-group-item-heading {
  color: #ffffff;
}
a.list-group-item .list-group-item-text {
  color: #b3b3b3;
}

a.list-group-item:hover,
a.list-group-item:focus {
  text-decoration: none;
}

a.list-group-item:hover, a.list-group-item:focus {
  background-color: inherit;
}

a.list-group-item.active {
  z-index: 2;
  color: #ffffff;
}

a.list-group-item.active {
  background-color: #1db954;
  border-color: #1db954;
}
a.list-group-item.active .list-group-item-heading {
  color: inherit;
}
a.list-group-item.active .list-group-item-text {
  color: inherit;
}

/**
 * Media List Items
 *
 * This is the structure for list items (like in playlists, messages, and search popup.)
 *
 * Modifiers:
 *
 * - `.active` - gives a green active indicator.
 * - `.large` - gives more padding and more options.
 * - `.playable` - **only for `.large` items** - gives a play button on hover for the element.
 * - `.playing`  - **only for `.large.playable` items** -- Shows the pause button.
 *
 * Auto-Modifiers:
 *
 * Some modifiers get added by the template based on the data that gets passed in.
 *
 * - `.multiline` - adjusts cell for two lines - added upon `subtitle` detection.
 *
 * Note: you can of course replicate this without using our templates, but why!
 *
 * Social-proof:
 *
 * Social proof is rendered if the data is provided. See https://ghe.spotify.net/social/socialproof-service on how to decorate your
 * items with social proof data. An example item would be:
 * ```Json
 * { "uri": "spotify:artist:00sAr10UTV1JZtHqxsLVn4",
 *   "name": "Black Mountain",
 *   "imageUrl": "https://d3rt1990lpmkn.cloudfront.net/unbranded/10b1e3bfd5f4a527032f34951260ade4c4004c1f",
 *   "socialproof": {
 *     "totalListeners": "10",
 *     "listeners": [
 *       { "name": "Karl" },
 *       { "name": "Ada" }
 *     ]
 *   }
 * }
 * ```
 *
 * Template: list-group-item-media
 * CodeDisplay: $list-group-item-media
 * Data: list-group-demos
 *
 * Styleguide 30.3.4
 */
.list-group-item.list-group-item-media {
  height: 52px;
  line-height: 50px;
  transition: background 0.1s ease;
}
.list-group-item.list-group-item-media {
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-top: 0;
  padding: 0;
  background-color: transparent;
  background-clip: padding-box;
}
.list-group-item.list-group-item-media:last-child {
  height: 50px;
}
.list-group-item.list-group-item-media:last-child {
  border-bottom: none;
}
.list-group-item.list-group-item-media > a {
  outline: none;
  position: absolute;
  top: 0;
  bottom: 0;
}
.list-group-item.list-group-item-media > a {
  left: 0;
  right: 0;
}

.list-group-item.list-group-item-media > a:hover, .list-group-item.list-group-item-media > a:active, .list-group-item.list-group-item-media > a:focus {
  border-bottom: 1px solid transparent;
}
.list-group-item.list-group-item-media .card {
  bottom: 0;
  position: absolute;
  top: 0;
  transition: background 0.2s ease;
  width: 50px;
}
.list-group-item.list-group-item-media .card {
  padding-bottom: 0;
}
.list-group-item.list-group-item-media .card {
  left: 0;
}

.list-group-item.list-group-item-media .card-type-artist, .list-group-item.list-group-item-media .card-type-user {
  padding: 5px;
}
.list-group-item.list-group-item-media.active {
  background-color: #333333;
  border-color: transparent;
}
.list-group-item.list-group-item-media.active::before {
  content: "";
  height: 100%;
  position: absolute;
  width: 2px;
  z-index: 100;
}
.list-group-item.list-group-item-media.active::before {
  background: #1db954;
}
.list-group-item.list-group-item-media.active::before {
  right: 0;
}

.list-group-item.list-group-item-media.unread::before {
  content: "";
  height: 100%;
  position: absolute;
  width: 2px;
  z-index: 100;
}
.list-group-item.list-group-item-media.unread::before {
  background: #2e77d0;
}
.list-group-item.list-group-item-media.unread::before {
  right: 0;
}

.list-group-item.list-group-item-media:hover, .list-group-item.list-group-item-media:active {
  background-color: #282828;
}
.list-group-item.list-group-item-media.multiline .item-data {
  line-height: 1.5;
}
.list-group-item.list-group-item-media.multiline .item-data {
  padding-top: 5px;
}
.list-group-item.list-group-item-media.multiline .item-data > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-group-item.list-group-item-media .item-data {
  height: 100%;
  overflow: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-group-item.list-group-item-media .item-data {
  padding: 0 10px 0 60px;
}

.list-group-item.list-group-item-media.more {
  height: 38px;
  line-height: 36px;
}
.list-group-item.list-group-item-media.more {
  padding-left: 10px;
}

.list-group-item.list-group-item-media.more::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f110";
  font-size: 16px;
  line-height: inherit;
}
.list-group-item.list-group-item-media.more::before {
  position: absolute;
}
.list-group-item.list-group-item-media.more::before {
  right: 5px;
}

.list-group-item.list-group-item-media.more:hover {
  border-bottom-color: transparent;
}
.list-group-item.list-group-item-media .button {
  height: 44px;
  width: 44px;
}
.list-group-item.list-group-item-media.large {
  height: 72px;
}
.list-group-item.list-group-item-media.large .card {
  top: 10px;
  bottom: 10px;
}
.list-group-item.list-group-item-media.large .card {
  left: 10px;
}

.list-group-item.list-group-item-media.large .card-type-artist, .list-group-item.list-group-item-media.large .card-type-user {
  padding: 0;
}
.list-group-item.list-group-item-media.large .item-data {
  line-height: 70px;
}
.list-group-item.list-group-item-media.large .item-data {
  padding-left: 70px;
}

.list-group-item.list-group-item-media.large.multiline .item-data {
  line-height: 24px;
}
.list-group-item.list-group-item-media.large.multiline .item-data {
  padding-top: 12px;
}
.list-group-item.list-group-item-media .list-group-item-media-play {
  position: absolute;
  top: 12px;
  visibility: hidden;
}
.list-group-item.list-group-item-media .list-group-item-media-play {
  left: 12px;
}

.list-group-item.list-group-item-media.playable.large:hover .list-group-item-media-play {
  visibility: visible;
}
.list-group-item.list-group-item-media.playable.large:hover .card {
  visibility: hidden;
}
.list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play {
  visibility: visible;
}
.list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play {
  border-color: #ffffff;
}
.list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play::before {
  content: "\f131";
}
.list-group-item.list-group-item-media.playable.large.playing .card {
  visibility: hidden;
}

/**
 * Social Media List Items
 *
 * These are used in follow, profile and artist apps.
 *
 * Template: list-group-item-social
 * Data: social-list-item
 *
 * Styleguide 30.3.6
 */
.list-group-item.list-group-item-social {
  padding-left: 0;
  padding-right: 0;
}

.list-group-item.list-group-item-social table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.list-group-item.list-group-item-social td:first-child {
  width: 100px;
  min-width: 100px;
}
.list-group-item.list-group-item-social td:nth-child(2) {
  width: 100%;
}
.list-group-item.list-group-item-social td:nth-child(2) > div {
  position: relative;
  height: 100%;
}
.list-group-item.list-group-item-social td:nth-child(2) > div > div {
  position: absolute;
  top: -35px;
}
.list-group-item.list-group-item-social td:nth-child(2) > div > div {
  left: 10px;
  right: 0;
}

.list-group-item.list-group-item-social td:nth-child(2) > div > div > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-group-item.list-group-item-social .list-group-item-text-wrapper {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: flex;
}


.list-group-item.list-group-item-social .list-group-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-group-item.list-group-item-social td:nth-child(3) {
  width: 0;
}
.list-group-item.list-group-item-social .remove {
  display: none;
  position: absolute;
  top: 10px;
}
.list-group-item.list-group-item-social .remove {
  right: 0;
}

.list-group-item.list-group-item-social:hover .remove {
  display: inline;
}
.list-group-item.list-group-item-social .pull-bottom {
  margin-top: 16px;
}

/**
 * Carousel
 *
 * For sideways paging content. The paging is done by changing the `left`
 * attribute of the `.carousel-inner` element.
 *
 * Template: carousel
 *
 * Styleguide 30.2
 */
.carousel {
  overflow: hidden;
}

.crsl-inner {
  white-space: nowrap;
  word-spacing: 0;
  position: relative;
  will-change: left;
}

.crsl-inner {
  left: 0%;
  transition: left 0.5s ease-in-out;
}


.crsl-inner.crsl-inner-drag {
  transition: 0s;
}
.crsl-inner.crsl-inner-swipe {
  transition: left 0.3s ease-out;
}


.crsl-inner .crsl-item {
  white-space: normal;
}
.crsl-inner .crsl-item.col-xs-1, .crsl-inner .crsl-item.col-xs-2, .crsl-inner .crsl-item.col-xs-3, .crsl-inner .crsl-item.col-xs-4, .crsl-inner .crsl-item.col-xs-5, .crsl-inner .crsl-item.col-xs-6, .crsl-inner .crsl-item.col-xs-7, .crsl-inner .crsl-item.col-xs-8, .crsl-inner .crsl-item.col-xs-9, .crsl-inner .crsl-item.col-xs-10, .crsl-inner .crsl-item.col-xs-11, .crsl-inner .crsl-item.col-xs-12, .crsl-inner .crsl-item.col-sm-1, .crsl-inner .crsl-item.col-sm-2, .crsl-inner .crsl-item.col-sm-3, .crsl-inner .crsl-item.col-sm-4, .crsl-inner .crsl-item.col-sm-5, .crsl-inner .crsl-item.col-sm-6, .crsl-inner .crsl-item.col-sm-7, .crsl-inner .crsl-item.col-sm-8, .crsl-inner .crsl-item.col-sm-9, .crsl-inner .crsl-item.col-sm-10, .crsl-inner .crsl-item.col-sm-11, .crsl-inner .crsl-item.col-sm-12, .crsl-inner .crsl-item.col-md-1, .crsl-inner .crsl-item.col-md-2, .crsl-inner .crsl-item.col-md-3, .crsl-inner .crsl-item.col-md-4, .crsl-inner .crsl-item.col-md-5, .crsl-inner .crsl-item.col-md-6, .crsl-inner .crsl-item.col-md-7, .crsl-inner .crsl-item.col-md-8, .crsl-inner .crsl-item.col-md-9, .crsl-inner .crsl-item.col-md-10, .crsl-inner .crsl-item.col-md-11, .crsl-inner .crsl-item.col-md-12, .crsl-inner .crsl-item.col-lg-1, .crsl-inner .crsl-item.col-lg-2, .crsl-inner .crsl-item.col-lg-3, .crsl-inner .crsl-item.col-lg-4, .crsl-inner .crsl-item.col-lg-5, .crsl-inner .crsl-item.col-lg-6, .crsl-inner .crsl-item.col-lg-7, .crsl-inner .crsl-item.col-lg-8, .crsl-inner .crsl-item.col-lg-9, .crsl-inner .crsl-item.col-lg-10, .crsl-inner .crsl-item.col-lg-11, .crsl-inner .crsl-item.col-lg-12 {
  display: inline-block;
  vertical-align: top;
}
.crsl-inner .crsl-item.col-xs-1, .crsl-inner .crsl-item.col-xs-2, .crsl-inner .crsl-item.col-xs-3, .crsl-inner .crsl-item.col-xs-4, .crsl-inner .crsl-item.col-xs-5, .crsl-inner .crsl-item.col-xs-6, .crsl-inner .crsl-item.col-xs-7, .crsl-inner .crsl-item.col-xs-8, .crsl-inner .crsl-item.col-xs-9, .crsl-inner .crsl-item.col-xs-10, .crsl-inner .crsl-item.col-xs-11, .crsl-inner .crsl-item.col-xs-12, .crsl-inner .crsl-item.col-sm-1, .crsl-inner .crsl-item.col-sm-2, .crsl-inner .crsl-item.col-sm-3, .crsl-inner .crsl-item.col-sm-4, .crsl-inner .crsl-item.col-sm-5, .crsl-inner .crsl-item.col-sm-6, .crsl-inner .crsl-item.col-sm-7, .crsl-inner .crsl-item.col-sm-8, .crsl-inner .crsl-item.col-sm-9, .crsl-inner .crsl-item.col-sm-10, .crsl-inner .crsl-item.col-sm-11, .crsl-inner .crsl-item.col-sm-12, .crsl-inner .crsl-item.col-md-1, .crsl-inner .crsl-item.col-md-2, .crsl-inner .crsl-item.col-md-3, .crsl-inner .crsl-item.col-md-4, .crsl-inner .crsl-item.col-md-5, .crsl-inner .crsl-item.col-md-6, .crsl-inner .crsl-item.col-md-7, .crsl-inner .crsl-item.col-md-8, .crsl-inner .crsl-item.col-md-9, .crsl-inner .crsl-item.col-md-10, .crsl-inner .crsl-item.col-md-11, .crsl-inner .crsl-item.col-md-12, .crsl-inner .crsl-item.col-lg-1, .crsl-inner .crsl-item.col-lg-2, .crsl-inner .crsl-item.col-lg-3, .crsl-inner .crsl-item.col-lg-4, .crsl-inner .crsl-item.col-lg-5, .crsl-inner .crsl-item.col-lg-6, .crsl-inner .crsl-item.col-lg-7, .crsl-inner .crsl-item.col-lg-8, .crsl-inner .crsl-item.col-lg-9, .crsl-inner .crsl-item.col-lg-10, .crsl-inner .crsl-item.col-lg-11, .crsl-inner .crsl-item.col-lg-12 {
  float: none;
}

/* stylelint-disable selector-max-type */
/**
 * Simple Navs
 *
 * .nav-justified  - Justified nav.
 * .nav-pills               - Pill style.
 * .nav-pills.nav-justified - Pill style justified.
 *
 * Template: navs
 *
 * Styleguide 40.2
 */
.nav {
  list-style: none;
}
.nav {
  margin-bottom: 0;
  border-bottom: 1px solid #282828;
}
.nav {
  margin-left: 0;
  padding-left: 0;
}

.nav.nav-justified {
  width: 100%;
}
.nav.nav-justified > li {
  display: table-cell;
  width: 1%;
}
.nav.nav-justified > li {
  float: none;
}
.nav.nav-justified > li > a {
  text-align: center;
}
.nav::after {
  content: "";
  display: table;
}
.nav::after {
  clear: both;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li {
  margin: 0 15px;
}
.nav > li {
  float: left;
}

.nav > li:first-child, .nav > li:first-child .navbar-text {
  margin-left: 0;
}

.nav > li:last-child {
  margin-right: 0;
}

.nav > li > a {
  position: relative;
  display: block;
  line-height: 44px;
  color: #b3b3b3;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  transition: color 0.2s;
}
.nav > li > a {
  border-bottom: none;
}

.nav > li > a:hover, .nav > li > a:focus {
  color: #ffffff;
}
.nav > li > a:hover, .nav > li > a:focus {
  border-bottom: none;
}
.nav > li > a::after {
  content: " ";
  bottom: 4px;
  height: 2px;
  position: absolute;
  width: 30px;
  transition: background-color 0.5s;
}
.nav > li > a::after {
  background-color: transparent;
}
.nav > li > a::after {
  left: 50%;
  transform: translateX(-50%);
}

.nav > li > p {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
}

.nav > li.active > a {
  color: #ffffff;
}
.nav > li.active > a::after {
  background-color: #1db954;
}
.nav > li.disabled > a {
  color: #b3b3b3;
}
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
  color: #b3b3b3;
  text-decoration: none;
}
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
  background-color: transparent;
  cursor: default;
}
.nav.open > a, .nav.open > a:hover, .nav.open > a:focus {
  color: #fff;
}
.nav.open > a, .nav.open > a:hover, .nav.open > a:focus {
  background-color: #ffffff;
  border-color: #ffffff;
}
.nav.open > a .caret, .nav.open > a:hover .caret, .nav.open > a:focus .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.nav > .pull-right {
  float: right;
}

.nav .nav-divider {
  height: 2px;
  overflow: hidden;
}
.nav .nav-divider {
  margin: 9px 0;
  background-color: #e5e5e5;
  border-bottom: 1px solid #ffffff;
}

.nav-justified {
  width: 100%;
}
.nav-justified > li {
  display: table-cell;
  width: 1%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  text-align: center;
}

.tabbable::after {
  content: "";
  display: table;
}

.tabbable::after {
  clear: both;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.nav .caret {
  border-top-color: #b3b3b3;
  border-bottom-color: #b3b3b3;
}

.nav .active .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.nav a:hover .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
}

.nav-tabs .dropdown-menu {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}



/* stylelint-disable selector-max-type */
/* stylelint-disable max-nesting-depth */
/**
 * Navbars
 *
 * These are cool navbars.
 * NOTE: Navbars are meant to be the full width of the page (otherwise they are just navs).
 * So if your window is small these demos will look broken.
 *
 * Template: navbar
 *
 * Styleguide 40.3
 */
.navbar {
  position: relative;
  z-index: 1000;
  min-height: 44px;
}
.navbar::after {
  content: "";
  display: table;
}
.navbar::after {
  clear: both;
}
.navbar.sticky-top {
  z-index: 1020;
}
.navbar.sticky-top {
  background: #121212;
  border-bottom: 1px solid #282828;
}

.navbar-fixed-wrapper {
  height: 44px;
}

.navbar-nav {
  border-bottom: 0;
  margin: 0;
}
.navbar-nav > li > a {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-bold);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}


.navbar-nav:not(.no-overflow-menu) {
  visibility: hidden;
}
.navbar-nav:not(.no-overflow-menu) li.last-visible {
  margin-right: 0;
}

@media (max-width: 591px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    width: auto;
  }
  .navbar-nav .open .dropdown-menu {
    float: none;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
.navbar-nav > li {
  float: left;
}

.navbar-nav > li.navbar-right {
  float: right;
}

.navbar-nav > li > a {
  line-height: 44px;
}

.navbar.large {
  min-height: 60px;
}
.navbar.large .navbar-nav > li > a {
  line-height: 60px;
}

.navbar-left {
  float: left;
}



.navbar-right {
  float: right;
}



.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
}

.navbar-nav > li > .dropdown-menu {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}



.navbar.sticky-bottom .navbar-nav > li > .dropdown-menu, .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}



.navbar-nav.pull-right > li > .dropdown-menu, .navbar-nav > li > .dropdown-menu.pull-right {
  left: auto;
  right: 0;
}



.navbar-btn {
  margin-top: 8px;
  margin-bottom: 8px;
}

.navbar-text {
  margin: 12px 10px;
}

.navbar-text {
  float: left;
}



@media (max-width: 819px) {
  .navbar-right {
    display: none;
  }
}
/**
 * Tooltips
 *
 * These are used to display informational text.
 *
 * Template: tooltip
 *
 * Styleguide 50.3
 */
.tooltip, #tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  visibility: visible;
  color: #b3b3b3;
  text-decoration: none;
  pointer-events: none;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
}
.tooltip, #tooltip {
  padding: 3px 8px;
  background-color: #282828;
  border-radius: 4px;
  box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5);
}
.body-container--windows .tooltip, .body-container--windows #tooltip, .body-container--unknown-os .tooltip, .body-container--unknown-os #tooltip {
  border-radius: 0;
}

.tooltip:not(.no-arrow).arrow-top, #tooltip:not(.no-arrow).arrow-top {
  margin-top: 5px;
}
.tooltip:not(.no-arrow).arrow-top::before, #tooltip:not(.no-arrow).arrow-top::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: -10px;
}
.tooltip:not(.no-arrow).arrow-top::before, #tooltip:not(.no-arrow).arrow-top::before {
  border: 5px solid transparent;
  border-bottom: 5px solid #282828;
}
.tooltip:not(.no-arrow).arrow-top::before, #tooltip:not(.no-arrow).arrow-top::before {
  left: 50%;
  margin-left: -5px;
  margin-right: -5px;
}

.tooltip:not(.no-arrow).arrow-bottom, #tooltip:not(.no-arrow).arrow-bottom {
  margin-bottom: 5px;
}
.tooltip:not(.no-arrow).arrow-bottom::before, #tooltip:not(.no-arrow).arrow-bottom::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  bottom: -10px;
}
.tooltip:not(.no-arrow).arrow-bottom::before, #tooltip:not(.no-arrow).arrow-bottom::before {
  border: 5px solid transparent;
  border-top: 5px solid #282828;
}
.tooltip:not(.no-arrow).arrow-bottom::before, #tooltip:not(.no-arrow).arrow-bottom::before {
  left: 50%;
  margin-left: -5px;
  margin-right: -5px;
}

.tooltip:not(.no-arrow).arrow-right, #tooltip:not(.no-arrow).arrow-right {
  margin-right: 5px;
}

.tooltip:not(.no-arrow).arrow-right::before, #tooltip:not(.no-arrow).arrow-right::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 50%;
}
.tooltip:not(.no-arrow).arrow-right::before, #tooltip:not(.no-arrow).arrow-right::before {
  border: 5px solid transparent;
  margin-top: -5px;
  margin-bottom: -5px;
}
.tooltip:not(.no-arrow).arrow-right::before, #tooltip:not(.no-arrow).arrow-right::before {
  right: -10px;
  border-left: 5px solid #282828;
}

.tooltip:not(.no-arrow).arrow-left, #tooltip:not(.no-arrow).arrow-left {
  margin-left: 5px;
}

.tooltip:not(.no-arrow).arrow-left::before, #tooltip:not(.no-arrow).arrow-left::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 50%;
}
.tooltip:not(.no-arrow).arrow-left::before, #tooltip:not(.no-arrow).arrow-left::before {
  border: 5px solid transparent;
  margin-top: -5px;
  margin-bottom: -5px;
}
.tooltip:not(.no-arrow).arrow-left::before, #tooltip:not(.no-arrow).arrow-left::before {
  left: -10px;
  border-right: 5px solid #282828;
}

.tooltip:not(.no-arrow).arrow-position-left::before, #tooltip:not(.no-arrow).arrow-position-left::before {
  left: 20px;
}

.tooltip:not(.no-arrow).arrow-position-right::before, #tooltip:not(.no-arrow).arrow-position-right::before {
  left: auto;
  right: 20px;
}

.tooltip:not(.no-arrow).arrow-position-top::before, #tooltip:not(.no-arrow).arrow-position-top::before {
  top: 20px;
}
.tooltip:not(.no-arrow).arrow-position-bottom::before, #tooltip:not(.no-arrow).arrow-position-bottom::before {
  top: auto;
  bottom: 20px;
}

.tooltip.text .tooltip-inner, .text#tooltip .tooltip-inner {
  display: block;
}

.tooltip.text .tooltip-inner, .text#tooltip .tooltip-inner {
  background-color: #282828;
  text-align: center;
}

.tooltip-arrow-top, .tooltip-arrow-bottom {
  height: 0;
  position: absolute;
  top: -5px;
  display: none;
  width: 0;
}

.tooltip-arrow-top, .tooltip-arrow-bottom {
  border-bottom: 5px solid #282828;
}

.tooltip-arrow-top, .tooltip-arrow-bottom {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}


.tooltip-arrow-top.visible, .visible.tooltip-arrow-bottom {
  display: block;
}

.tooltip-arrow-bottom {
  bottom: -5px;
  top: auto;
}

.tooltip-arrow-bottom {
  border-top: 5px solid #282828;
  border-bottom: 0;
}

@keyframes tooltipShow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#tooltip {
  opacity: 0;
  max-width: 350px;
  backface-visibility: hidden;
}

#tooltip.visible {
  opacity: 1;
}

#tooltip.visible {
  animation: tooltipShow 1s ease forwards;
}



#tooltip.visible.instant {
  opacity: 1;
}

#tooltip.visible.instant {
  animation: none;
}



/**
 * Popovers
 *
 * Add small overlays of content to any element for housing secondary information.
 * You can also customize the position of the arrow.
 *
 * .arrow-top                          - Arrow up.
 * .arrow-right                        - Arrow right.
 * .arrow-bottom                       - Arrow down.
 * .arrow-left                         - Arrow left
 * .arrow-top.arrow-position-left      - Arrow on top, left positioned.
 * .arrow-right.arrow-position-top     - Arrow on the right-hand side, top positioned.
 * .arrow-bottom.arrow-position-right  - Arrow on bottom, right positioned.
 * .arrow-left.arrow-position-bottom   - Arrow on the left-hand side, bottom positioned.
 *
 * Template: popovers
 *
 * Styleguide 50.4
 */
/**
 * Split Popovers
 *
 * Sometimes the outside of your popover has to be drawn by an iFrame or by native code.
 * This is how thats done. The interior corners are not rounded. The rounding
 * must be done by the container.
 *
 * Template: popover-split
 *
 * .desktop    - Used if the rounded corners are supplied in C++. 6 pixels off top and bottom.
 *
 * Styleguide 50.4.1
 */
/**
 * Complex Popovers
 *
 * You can put lots in the popover!
 *
 * Template: popover-nav
 * Data: demo-album
 *
 * Styleguide 50.4.2
 */
.popover {
  position: absolute;
  z-index: 1010;
  display: none;
  white-space: normal;
}
.popover {
  background-color: #282828;
  background-clip: padding-box;
  border-radius: 8px;
}
.popover {
  text-align: left;
}

.popover:not(.no-arrow).arrow-top {
  margin-top: 10px;
}
.popover:not(.no-arrow).arrow-top::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: -20px;
}
.popover:not(.no-arrow).arrow-top::before {
  border: 10px solid transparent;
  border-bottom: 10px solid #282828;
}
.popover:not(.no-arrow).arrow-top::before {
  left: 50%;
  margin-left: -10px;
  margin-right: -10px;
}

.popover:not(.no-arrow).arrow-bottom {
  margin-bottom: 10px;
}
.popover:not(.no-arrow).arrow-bottom::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  bottom: -20px;
}
.popover:not(.no-arrow).arrow-bottom::before {
  border: 10px solid transparent;
  border-top: 10px solid #282828;
}
.popover:not(.no-arrow).arrow-bottom::before {
  left: 50%;
  margin-left: -10px;
  margin-right: -10px;
}

.popover:not(.no-arrow).arrow-right {
  margin-right: 10px;
}

.popover:not(.no-arrow).arrow-right::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 50%;
}
.popover:not(.no-arrow).arrow-right::before {
  border: 10px solid transparent;
  margin-top: -10px;
  margin-bottom: -10px;
}
.popover:not(.no-arrow).arrow-right::before {
  right: -20px;
  border-left: 10px solid #282828;
}

.popover:not(.no-arrow).arrow-left {
  margin-left: 10px;
}

.popover:not(.no-arrow).arrow-left::before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 50%;
}
.popover:not(.no-arrow).arrow-left::before {
  border: 10px solid transparent;
  margin-top: -10px;
  margin-bottom: -10px;
}
.popover:not(.no-arrow).arrow-left::before {
  left: -20px;
  border-right: 10px solid #282828;
}

.popover:not(.no-arrow).arrow-position-left::before {
  left: 20px;
}

.popover:not(.no-arrow).arrow-position-right::before {
  left: auto;
  right: 20px;
}

.popover:not(.no-arrow).arrow-position-top::before {
  top: 20px;
}
.popover:not(.no-arrow).arrow-position-bottom::before {
  top: auto;
  bottom: 20px;
}
.popover:not(.no-arrow).arrow-top::before {
  border-bottom-color: #282828;
}
.popover.arrow-right.arrow-position-top::before {
  border-left-color: #282828;
}

.popover.arrow-left.arrow-position-top::before {
  border-right-color: #282828;
}


.body-container--windows .popover, .body-container--unknown-os .popover {
  border-radius: 0;
}

.popover-title {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-bold);
  color: #ffffff;
  text-transform: none;
  line-height: 36px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popover-title {
  margin: 0;
  padding: 2px 8px 0;
  text-align: center;
  background-color: #282828;
  border-bottom: 1px solid #404040;
}

.popover.closeable .popover-title {
  padding-left: 32px;
}


.popover-content, .popover-footer, .popover-addendum {
  padding: 9px 14px;
}

.popover-footer {
  padding-top: 0;
  background-color: #282828;
}

.popover-footer {
  text-align: right;
}


.popover-footer .button {
  margin: 0 6px;
}

.popover-content-scroll-area {
  height: 100%;
  overflow: scroll;
}

.popover-content-scroll-area {
  background-color: #181818;
}

/**
 * This is a dark area a the bottom of a popover that should be used for fine print.
 */
.popover-addendum {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.015em;
  color: #b3b3b3;
}
.popover-addendum {
  background-color: #282828;
  border-top: 1px solid #181818;
}


/**
 * Modals
 *
 * Styleguide 50.6
 */
/**
 * Modal Popovers
 *
 * A modal is just a special popover case.<br>
 * <a href="popover-modal.html" class="btn btn-info btn-large">See a modal in action</a>
 *
 * Styleguide 50.6.1
 */
.popover.modal {
  overflow: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1040;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}
.popover.modal {
  background-color: #181818;
}
.popover.modal {
  right: 0;
  left: 0;
  box-shadow: 4px 6px 41px 0 rgba(0, 0, 0, 0.82);
}

.popover.modal.fade {
  display: block;
  top: -25%;
}
.popover.modal.fade.in {
  top: 0;
}

.popover.modal.no-scroll {
  overflow: hidden;
}

.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -9999;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.modal-backdrop {
  background-color: #000000;
}

.modal-backdrop {
  right: 0;
  left: 0;
}


.modal-backdrop.dont-cover-player {
  bottom: 88px;
}
@media (max-height: 768px) {
  .modal-backdrop.dont-cover-player {
    bottom: 72px;
  }
}
.modal-backdrop.dont-cover-player.fade {
  z-index: 1;
}
.modal-backdrop.fade {
  z-index: 1040;
}
.modal-backdrop.fade.in {
  opacity: 0.5;
}

.popover-title .spoticon-x-16 {
  position: absolute;
  top: 3px;
}

.popover-title .spoticon-x-16 {
  right: 3px;
}



.popover.modal {
  top: 50%;
  width: 560px;
  max-height: 465px;
  bottom: auto;
}

.popover.modal {
  margin-top: -232px;
}

.popover.modal {
  left: 50%;
  right: auto;
  margin-left: -280px;
}


.popover.modal.fade {
  top: 40%;
}
.popover.modal.fade.in {
  top: 50%;
}

/**
 * Generic modal
 *
 * A generic modal with a slight drop shadow and the ability to show a standardized title.
 *
 * Markup: <div class="modal modal-generic no-scroll">
 *   <div class="modal-generic-title">A title</div>
 *   <div class="modal-generic-content">And some content</div>
 * </div>
 *
 * Styleguide 50.6.2
 */
.modal-generic {
  background-color: #181818;
}
.modal-generic .modal-generic-title {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-bold);
  color: #ffffff;
  text-transform: none;
}
.modal-generic .modal-generic-title {
  background: #282828;
  text-align: center;
  padding: 10px;
}

.modal-generic .modal-generic-title .modal-dismiss-btn {
  position: absolute;
  top: 3px;
}
.modal-generic .modal-generic-title .modal-dismiss-btn {
  right: 3px;
}

.modal-generic .modal-generic-content {
  padding: 10px;
}

/**
 * Generic error modal
 *
 * A standardized modal for displaying modal failures.
 *
 * Markup: <div class="modal modal-generic modal-generic-error no-scroll">Something failed to do something.</div>
 *
 * Styleguide 50.6.3
 */
.modal-generic-error {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  color: #ffffff;
}
.modal-generic-error {
  text-align: center;
  padding: 20px;
}


/* stylelint-disable selector-max-type */
/**
 * Alerts
 *
 * Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 * To add a close-icon just add an element with the class .close
 *
 * Styleguide 50.5
 */
/**
 *  Contextual
 *
 * .alert-success     - Successful message
 * .alert-danger      - Warning message
 * .alert-info        - Informational message
 *
 * Template: alerts
 *
 * Styleguide 50.5.1
 */
/**
 *  Contextual (two lines)
 *
 * .alert-success     - Successful message
 *
 * Template: alerts-multiline
 *
 * Styleguide 50.5.1
 */
.alert {
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.alert {
  padding: 6px 35px;
  margin-bottom: 20px;
  background-color: #2e77d0;
}
.alert .alert-link {
  color: white;
}
.alert .alert-link:hover {
  color: white;
}
.alert::before {
  color: white;
}
.alert h4 {
  color: inherit;
}
.alert h4 {
  margin-top: 0;
}
.alert hr {
  border-top-color: #296bbb;
}
.alert .close {
  height: 32px;
  line-height: 30px;
  color: #b3b3b3;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 32px;
  color: #ffffff;
  position: absolute;
  top: 50%;
}
.alert .close {
  padding-top: 1px;
  border-radius: 16px;
  background: transparent;
  transition-property: transform, box-shadow, color, background-color;
  margin-top: -16px;
}
.alert .close {
  padding-left: 32px;
  padding-right: 32px;
  padding-left: 0;
  padding-right: 0;
  right: 0;
}

.alert .close::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f160";
  font-size: 16px;
  line-height: inherit;
}

.alert .close .b-alt-text {
  margin-top: -30px;
}
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
  color: #ffffff;
}
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
  background-color: transparent;
}
.alert .close:not(:disabled):hover:active {
  color: #b3b3b3;
}
.alert .close:not(:disabled):hover:active {
  background: transparent;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .alert .close:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .alert .close {
    transition-duration: 50ms;
  }
}
.alert .close::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.alert .close::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .alert .close::after {
    transition-duration: 50ms;
  }
}
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.alert .close.contextmenu-active::after, .alert .close:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.alert .close.contextmenu-active::after, .alert .close:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .alert .close.contextmenu-active::after, .alert .close:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.alert .close:not(:disabled):hover:active {
  transition: none;
}
.alert .close:not(:disabled):hover:active::after {
  transition: none;
}
.alert .close::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 32px;
  font-size: 16px;
  padding-left: 8px /* rtl:ignore */;
  width: calc(100% - 8px);
}
.alert .close::before {
  border-radius: 500px;
}
.alert .close::before {
  left: 0;
  right: 0;
}

.alert .close.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 16px;
  line-height: 32px;
}
.alert .close.button-play.playing:not(:hover), .tl-row.playing .alert .close.button-play:not(:hover), .card.playing .alert .close.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.alert .close.button-play.playing:not(:hover)::after, .tl-row.playing .alert .close.button-play:not(:hover)::after, .card.playing .alert .close.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.alert .close.button-play.playing:not(:hover)::after, .tl-row.playing .alert .close.button-play:not(:hover)::after, .card.playing .alert .close.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.alert .close.button-play.playing:not(:hover)::after, .tl-row.playing .alert .close.button-play:not(:hover)::after, .card.playing .alert .close.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.alert .close.button-play.playing:not(:hover).contextmenu-active, .alert .close.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing .alert .close.button-play:not(:hover).contextmenu-active, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.alert .close.button-play.playing:not(:hover).contextmenu-active::after, .alert .close.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .alert .close.button-play.playing:not(:hover).contextmenu-active, .alert .close.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing .alert .close.button-play:not(:hover).contextmenu-active, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .alert .close.button-play.playing:not(:hover).contextmenu-active::after, .alert .close.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.alert .close.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.alert .close.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.alert .close.button-play.playing:not(:hover)::before, .tl-row.playing .alert .close.button-play:not(:hover)::before, .card.playing .alert .close.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.alert .close.button-play.playing:hover::before, .tl-row.playing .alert .close.button-play:hover::before, .card.playing .alert .close.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.alert .close.button-play:not(:hover), .card.playing.alert .close.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.alert .close.button-play:not(:hover)::after,
.card.playing.alert .close.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.alert .close.button-play:not(:hover)::after, .card.playing.alert .close.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.alert .close.button-play:not(:hover)::after, .card.playing.alert .close.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing.alert .close.button-play:not(:hover).contextmenu-active, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing.alert .close.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.playing.alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing.alert .close.button-play:not(:hover).contextmenu-active, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.alert .close.button-play:not(:hover)::before,
.card.playing.alert .close.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.alert .close.button-play:hover::before,
.card.playing.alert .close.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}

.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
  color: white;
}
.alert .close:not(:disabled):hover:active {
  color: #cccccc;
}
.alert::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f11e";
  font-size: 16px;
  line-height: inherit;
}
.alert::before {
  position: absolute;
  top: 50%;
}
.alert::before {
  margin-top: -9.5px;
}
.alert::before {
  left: 10px;
}

.alert a {
  color: #ffffff !important;
}
.alert a {
  border-bottom: solid 1px #ffffff !important;
}
.alert.alert-icon {
  display: flex;
  align-items: center;
}
.alert.alert-icon {
  border-radius: 4px;
  padding: 8px 12px;
}
.alert.alert-icon {
  text-align: left;
}

.alert.alert-icon svg {
  flex-shrink: 0;
}
.alert.alert-icon::before {
  display: none;
}
.alert.alert-icon *:not(:last-child) {
  margin-right: 10px;
}


.alert-success {
  background-color: #1db954;
}
.alert-success .alert-link {
  color: white;
}
.alert-success .alert-link:hover {
  color: white;
}
.alert-success::before {
  color: white;
}

.alert-danger {
  background-color: #e22134;
}
.alert-danger .alert-link {
  color: white;
}
.alert-danger .alert-link:hover {
  color: white;
}
.alert-danger::before {
  color: white;
}

.alert-info {
  background-color: #2e77d0;
}
.alert-info .alert-link {
  color: white;
}
.alert-info .alert-link:hover {
  color: white;
}
.alert-info::before {
  color: white;
}

/**
 * Labels
 *
 * For labeling stuff...
 *
 * .label-danger    - To indicate danger.
 * .label-success   - To indicate success.
 * .label-warning   - To warn...
 * .label-info      - To inform!
 *
 * Template: labels
 *
 * Styleguide 60.1
 */
.label {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.015em;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: inline;
  line-height: 1;
  color: #282828;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: var(--glue-font-weight-bold);
}
.label {
  padding: 0.5em 0.6em 0.35em;
  text-shadow: 0 0 #282828;
  text-align: center;
  background-color: #b3b3b3;
  border-radius: 0.25em;
}



.label[href]:hover, .label[href]:focus {
  color: #ffffff;
  text-decoration: none;
}
.label[href]:hover, .label[href]:focus {
  cursor: pointer;
  background-color: #9a9a9a;
}

.label-danger {
  background-color: #cd1a2b;
}
.label-danger[href]:hover, .label-danger[href]:focus {
  background-color: #a01422;
}

.label-success {
  background-color: #1db954;
}
.label-success[href]:hover, .label-success[href]:focus {
  background-color: #168d40;
}

.label-warning {
  background-color: #2e77d0;
}
.label-warning[href]:hover, .label-warning[href]:focus {
  background-color: #255fa6;
}

.label-info {
  background-color: #2e77d0;
}
.label-info[href]:hover, .label-info[href]:focus {
  background-color: #255fa6;
}

/**
 * Calendar icon
 *
 * Markup:
 *   <div class="calendar-icon">
 *     <div class="calendar-icon-month">Dec</div>
 *     <div class="calendar-icon-day">6</div>
 *   </div>
 *
 * Styleguide 60.3
 */
.calendar-icon {
  width: 48px;
  height: 48px;
  font-weight: bold;
}
.calendar-icon {
  text-align: center;
}

.calendar-icon-month {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #ffffff;
  height: 16px;
  line-height: 16px;
}

.calendar-icon-month {
  background-color: #f80046;
}


.calendar-icon-day {
  color: #282828;
  height: 32px;
  line-height: 32px;
  font-size: 22px;
}

.calendar-icon-day {
  background-color: #ffffff;
}

/**
 * A large variant of the calendar icon
 */
.calendar-icon--lg {
  width: 120px;
  height: 120px;
}
.calendar-icon--lg .calendar-icon-day {
  height: 83px;
  font-size: 64px;
  line-height: 83px;
}
.calendar-icon--lg .calendar-icon-month {
  height: 37px;
  font-size: 20px;
  line-height: 37px;
}

/* stylelint-disable selector-max-type */
/**
 * Slider
 *
 * Markup:
 *   <div class="slider {$modifiers}" onclick="this.className = 'slider enabled';"><div></div></div>
 *
 * .enabled - For sliders that are enabled
 * .disabled - For sliders that are unchangeable
 *
 * Styleguide 60.4
 */
.slider {
  height: 22px;
  position: relative;
  transition: border 1.2s linear;
  transition: background 0.4s ease;
  width: 36px;
}
.slider {
  background: #000000;
  border: 2px solid #404040;
  border-radius: 11px;
}
.slider.enabled {
  background: #1db954;
  border-color: transparent;
}
.slider.enabled div {
  background: #ffffff;
}
.slider.enabled div {
  left: 15px;
}

.slider div {
  height: 22px;
  position: absolute;
  top: -2px;
  width: 22px;
  transition: all 0.4s ease;
}
.slider div {
  background: #b3b3b3;
  border-radius: inherit;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.3);
}
.slider div {
  left: -5px;
}

.slider:active div {
  width: 26px;
}
.slider:active div {
  background: #ffffff;
}
.slider.enabled:active div {
  left: 15px;
}

.slider:hover div {
  background: #ffffff;
}
.slider.disabled {
  pointer-events: none;
}
.slider.disabled {
  background: #333333;
  border-color: transparent;
}
.slider.disabled div {
  background: #404040;
  box-shadow: none;
}
.slider.disabled:active div {
  width: 22px;
}
.slider.disabled:active div {
  background: #404040;
}
.slider.disabled:hover div {
  background: #404040;
}
.slider.disabled.enabled:active div {
  left: 15px;
}

.slider:focus {
  outline: 0;
}

/**
 * Progress Bar
 *
 * The bar will occupy the full width of the parent container.
 * When the progress bar is being used apply .active to the wrapper to make the
 * handle look pressed. It will also enforce the expanded height while dragging.
 *
 * Length indication is controlled by setting the left property of the .handle and the
 * inverted right value of the .inner bar (1% done is 99% etc).
 *
 * Currently used in the player (web) for song position.
 *
 * Markup:
 *   <div style="width: 150px;">
 *   <div class="progress-bar-wrapper {$modifiers}">
 *   <div class="progress-bar"><div class="inner"><div class="handle"></div></div></div>
 *   </div>
 *   </div>
 *
 * .active - To be controlled with JavaScript to indicate user interaction.
 *
 * Styleguide 60.5
 */
.progress-bar,
.progress-bar .inner {
  height: 4px;
  position: absolute;
  top: 50%;
}
.progress-bar, .progress-bar .inner {
  background: #404040;
  border-radius: 2px;
  margin-top: -2px;
}

.progress-bar .inner {
  bottom: 0;
  height: inherit;
  position: absolute;
}

.progress-bar .inner {
  background: #1ed760;
}

.progress-bar .handle {
  display: block;
  height: 12px;
  opacity: 0;
  position: absolute;
  top: -4px;
  width: 12px;
}

.progress-bar .handle {
  background: #ffffff;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.progress-bar-wrapper {
  height: 20px;
  position: relative;
}
.progress-bar-wrapper.handle:hover .handle, .progress-bar-wrapper.active .handle {
  opacity: 1;
}
.progress-bar-wrapper.active .handle {
  background-color: #ffffff;
}
.progress-bar-wrapper.active .handle {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), inset 2px 2px 3px rgba(0, 0, 0, 0.45);
}

.progress-bar-wrapper--ltr .progress-bar,
.progress-bar-wrapper--ltr .progress-bar .inner {
  left: 0;
  right: 0;
}
.progress-bar-wrapper--ltr .progress-bar .inner {
  left: 0;
  right: auto;
}
.progress-bar-wrapper--ltr .progress-bar .handle {
  right: -6px;
}
.progress-bar-wrapper--rtl .progress-bar,
.progress-bar-wrapper--rtl .progress-bar .inner {
  left: 0;
  right: 0;
}
.progress-bar-wrapper--rtl .progress-bar .inner {
  left: auto;
  right: 0;
}
.progress-bar-wrapper--rtl .progress-bar .handle {
  left: -6px;
}

/* stylelint-disable selector-max-type */
.card {
  position: relative;
}

.card-attention-highlight-box {
  position: absolute;
  top: -6px;
  bottom: -6px;
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(1, 0, 0.7, 1);
  pointer-events: none;
}

.card-attention-highlight-box {
  border: 2px solid #2e77d0;
}

.card-attention-highlight-box {
  right: -6px;
  left: -6px;
}



.card-show-attention-highlight .card-attention-highlight-box {
  transition: none;
  opacity: 1;
}

.card-image-wrapper {
  height: 100%;
  position: relative;
}

.card-image-wrapper {
  padding-bottom: 100%;
}

.card-image-hit-area {
  position: absolute;
  width: 100%;
  height: 100%;
}

.card-image-content-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.card-image {
  height: 100%;
  position: absolute;
  width: 100%;
}

.card-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.card-type-album .card-image, .card-type-collection-album .card-image, .card-type-track .card-image, .card-type-episode .card-image {
  background-size: contain;
}

.image-delayed .card-image {
  opacity: 0;
  transition: opacity 50ms cubic-bezier(0.3, 0, 0, 1);
}

.image-loaded.image-delayed .card-image {
  opacity: 1;
}

.card-placeholder-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.card-placeholder-wrapper {
  background: #282828;
}

.card-image-link {
  position: absolute;
  top: 0;
  bottom: 0;
}

.card-image-link {
  border: none;
}

.card-image-link {
  left: 0;
  right: 0;
}



.card-type-artist .card-image, .card-type-artist .card-image-hit-area, .card-type-artist .card-overlay, .card-type-artist .card-placeholder-wrapper, .card-type-artist .card-image-link, .card-type-artist .card-hit-area-counter-scale, .card-type-collection-artist .card-image, .card-type-collection-artist .card-image-hit-area, .card-type-collection-artist .card-overlay, .card-type-collection-artist .card-placeholder-wrapper, .card-type-collection-artist .card-image-link, .card-type-collection-artist .card-hit-area-counter-scale, .card-type-user .card-image, .card-type-user .card-image-hit-area, .card-type-user .card-overlay, .card-type-user .card-placeholder-wrapper, .card-type-user .card-image-link, .card-type-user .card-hit-area-counter-scale {
  border-radius: 500px;
}

.card-type-artist .card-image-hit-area,
.card-type-collection-artist .card-image-hit-area,
.card-type-user .card-image-hit-area {
  width: auto;
  height: auto;
  top: 5%;
  bottom: 5%;
}

.card-type-artist .card-image-hit-area, .card-type-collection-artist .card-image-hit-area, .card-type-user .card-image-hit-area {
  right: 5%;
  left: 5%;
}



.card-placeholder {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  display: none;
  font-size: 9.5px;
  height: 60%;
  position: absolute;
  text-anchor: middle;
  top: 20%;
  vertical-align: bottom;
  width: 60%;
  -webkit-font-smoothing: antialiased;
}

.card-placeholder {
  left: 20%;
}



.image-error .card-placeholder,
.no-image-url .card-placeholder {
  display: inline-block;
}

.card-overlay {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
}

.card-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.card-overlay {
  right: 0;
  left: 0;
}



.card-type-artist .card-overlay,
.card-type-collection-artist .card-overlay,
.card-type-user .card-overlay {
  top: -1px;
  bottom: -1px;
}

.card-type-artist .card-overlay, .card-type-collection-artist .card-overlay, .card-type-user .card-overlay {
  right: -1px;
  left: -1px;
}



.card-progress {
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.card-progress {
  right: 0;
  left: 0;
}



.card-progress__bar {
  --progress: 0;
  /* [1] */
  width: calc(var(--progress) * 100%);
  height: 8px;
}

.card-progress__bar {
  background-color: #2e77d0;
}

.card-button-add,
.card-button-play,
.card-button-more {
  max-height: none;
  position: absolute;
  top: 50%;
  visibility: hidden;
  z-index: 4;
}

.card-button-add, .card-button-play, .card-button-more {
  box-shadow: none;
  cursor: default;
}
.card-button-add:focus,
.card-button-play:focus,
.card-button-more:focus {
  outline: none;
}

.card-button-add {
  top: 50%;
  height: 32px;
  line-height: 30px;
  color: #b3b3b3;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 32px;
  color: #ffffff;
}

.card-button-add {
  margin-top: -16px;
  padding-top: 1px;
  border-radius: 16px;
  background: transparent;
  transition-property: transform, box-shadow, color, background-color;
}

.card-button-add {
  left: calc((50% - 28px) / 2);
  margin-left: -16px;
  padding-left: 32px;
  padding-right: 32px;
  padding-left: 0;
  padding-right: 0;
}



.card-button-add .b-alt-text {
  margin-top: -30px;
}
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
  color: #ffffff;
}
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
  background-color: transparent;
}
.card-button-add:not(:disabled):hover:active {
  color: #b3b3b3;
}
.card-button-add:not(:disabled):hover:active {
  background: transparent;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-add:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-add {
    transition-duration: 50ms;
  }
}
.card-button-add::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.card-button-add::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-add::after {
    transition-duration: 50ms;
  }
}
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.card-button-add.contextmenu-active::after, .card-button-add:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card-button-add.contextmenu-active::after, .card-button-add:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-add.contextmenu-active::after, .card-button-add:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.card-button-add:not(:disabled):hover:active {
  transition: none;
}
.card-button-add:not(:disabled):hover:active::after {
  transition: none;
}
.card-button-add::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 32px;
  font-size: 16px;
  padding-left: 8px /* rtl:ignore */;
  width: calc(100% - 8px);
}
.card-button-add::before {
  border-radius: 500px;
}
.card-button-add::before {
  left: 0;
  right: 0;
}

.card-button-add.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 16px;
  line-height: 32px;
}
.card-button-add.button-play.playing:not(:hover), .tl-row.playing .card-button-add.button-play:not(:hover), .card.playing .card-button-add.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-add.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-add.button-play:not(:hover)::after, .card.playing .card-button-add.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.card-button-add.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-add.button-play:not(:hover)::after, .card.playing .card-button-add.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-add.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-add.button-play:not(:hover)::after, .card.playing .card-button-add.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.card-button-add.button-play.playing:not(:hover).contextmenu-active, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.card-button-add.button-play.playing:not(:hover).contextmenu-active::after, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-add.button-play.playing:not(:hover).contextmenu-active, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .card-button-add.button-play.playing:not(:hover).contextmenu-active::after, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.card-button-add.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-add.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-add.button-play.playing:not(:hover)::before, .tl-row.playing .card-button-add.button-play:not(:hover)::before, .card.playing .card-button-add.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.card-button-add.button-play.playing:hover::before, .tl-row.playing .card-button-add.button-play:hover::before, .card.playing .card-button-add.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.card-button-add.button-play:not(:hover), .card.playing.card-button-add.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-add.button-play:not(:hover)::after,
.card.playing.card-button-add.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.card-button-add.button-play:not(:hover)::after, .card.playing.card-button-add.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-add.button-play:not(:hover)::after, .card.playing.card-button-add.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-add.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.playing.card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-add.button-play:not(:hover)::before,
.card.playing.card-button-add.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.card-button-add.button-play:hover::before,
.card.playing.card-button-add.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}

.card-button-add.active {
  color: #1ed760;
}
.card-button-add.active.contextmenu-active, .card-button-add.active:not(:disabled):hover {
  color: #1df369;
}
.card-button-add.active:not(:disabled):hover:active {
  color: #18ac4d;
}
.card-button-add.drop-target-active {
  color: #000000;
}
.card-button-add.drop-target-active {
  background-color: #1ed760;
}
.card-button-add.drop-target-active.contextmenu-active, .card-button-add.drop-target-active:not(:disabled):hover {
  color: #000000;
}
.card-button-add.drop-target-active:not(:disabled):hover:active {
  color: black;
}
.card-button-add.drop-target-active.contextmenu-active, .card-button-add.drop-target-active:not(:disabled):hover {
  background-color: #1ed760;
}
.card-button-add::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f162";
  font-size: 24px;
  line-height: inherit;
}
.card-button-add::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f3DB";
  font-size: 24px;
  line-height: inherit;
}

.card .card-button-play {
  height: 56px;
  line-height: 54px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 56px;
}

.card .card-button-play {
  padding-top: 1px;
  border-radius: 28px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}

.card .card-button-play {
  left: 50%;
  margin: -28px 0 0 -28px;
  padding-left: 56px;
  padding-right: 56px;
  padding-left: 0;
  padding-right: 0;
}



.card .card-button-play .b-alt-text {
  margin-top: -54px;
}
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.card .card-button-play:not(:disabled):hover:active {
  color: #b3b3b3;
}
.card .card-button-play:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-button-play:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-button-play {
    transition-duration: 50ms;
  }
}
.card .card-button-play::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.card .card-button-play::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-button-play::after {
    transition-duration: 50ms;
  }
}
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.card .card-button-play:not(:disabled):hover:active {
  transition: none;
}
.card .card-button-play:not(:disabled):hover:active::after {
  transition: none;
}
.card .card-button-play::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.card .card-button-play::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.card .card-button-play::after {
  right: 0;
  left: 0;
}

.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.card .card-button-play:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.card .card-button-play:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
  transform: scale(1.0714285714);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
    transform: scale(1.0714285714);
  }
}
.card .card-button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 56px;
  font-size: 28px;
  padding-left: 14px /* rtl:ignore */;
  width: calc(100% - 14px);
}
.card .card-button-play::before {
  border-radius: 500px;
}
.card .card-button-play::before {
  left: 0;
  right: 0;
}

.card .card-button-play.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1C8";
  font-size: 28px;
  line-height: 56px;
}
.card .card-button-play.button-play.playing:not(:hover), .tl-row.playing .card .card-button-play.button-play:not(:hover), .card.playing .card .card-button-play.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.card .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, .card.playing .card .card-button-play.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.card .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, .card.playing .card .card-button-play.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.card .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, .card.playing .card .card-button-play.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.card .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.card .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card .card-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) {
  .card .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .card .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.card .card-button-play.button-play.playing:not(:hover)::before, .tl-row.playing .card .card-button-play.button-play:not(:hover)::before, .card.playing .card .card-button-play.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1DB";
  font-size: 28px;
  line-height: 56px;
}
.card .card-button-play.button-play.playing:hover::before, .tl-row.playing .card .card-button-play.button-play:hover::before, .card.playing .card .card-button-play.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1D3";
  font-size: 28px;
  line-height: 56px;
}
.tl-row.playing.card .card-button-play.button-play:not(:hover), .card.playing.card .card-button-play.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card .card-button-play.button-play:not(:hover)::after,
.card.playing.card .card-button-play.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.card .card-button-play.button-play:not(:hover)::after, .card.playing.card .card-button-play.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card .card-button-play.button-play:not(:hover)::after, .card.playing.card .card-button-play.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card .card-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.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card .card-button-play.button-play:not(:hover)::before,
.card.playing.card .card-button-play.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1DB";
  font-size: 28px;
  line-height: 56px;
}
.tl-row.playing.card .card-button-play.button-play:hover::before,
.card.playing.card .card-button-play.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1D3";
  font-size: 28px;
  line-height: 56px;
}

.card .card-button-play::before {
  content: "\f1C8";
}
.card .card-button-play:hover {
  background: rgba(0, 0, 0, 0.75) !important;
  border-color: #ffffff;
}
.card .card-button-play:active {
  color: #999999;
}
.card .card-button-play:active {
  background: rgba(0, 0, 0, 0.75) !important;
  border-color: #999999;
}

.card-type-user .card-overlay,
.card-type-user .card-button-play {
  display: none;
}

.card-button-more {
  top: 50%;
  height: 32px;
  line-height: 30px;
  color: #b3b3b3;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 32px;
  color: #ffffff;
}

.card-button-more {
  margin-top: -16px;
  padding-top: 1px;
  border-radius: 16px;
  background: transparent;
  transition-property: transform, box-shadow, color, background-color;
}

.card-button-more {
  right: calc((50% - 28px) / 2);
  margin-right: -16px;
  padding-left: 32px;
  padding-right: 32px;
  padding-left: 0;
  padding-right: 0;
}



.card-button-more .b-alt-text {
  margin-top: -30px;
}
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
  color: #ffffff;
}
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
  background-color: transparent;
}
.card-button-more:not(:disabled):hover:active {
  color: #b3b3b3;
}
.card-button-more:not(:disabled):hover:active {
  background: transparent;
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-more:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-more {
    transition-duration: 50ms;
  }
}
.card-button-more::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.card-button-more::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-more::after {
    transition-duration: 50ms;
  }
}
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.card-button-more.contextmenu-active::after, .card-button-more:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card-button-more.contextmenu-active::after, .card-button-more:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-more.contextmenu-active::after, .card-button-more:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.card-button-more:not(:disabled):hover:active {
  transition: none;
}
.card-button-more:not(:disabled):hover:active::after {
  transition: none;
}
.card-button-more::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 32px;
  font-size: 16px;
  padding-left: 8px /* rtl:ignore */;
  width: calc(100% - 8px);
}
.card-button-more::before {
  border-radius: 500px;
}
.card-button-more::before {
  left: 0;
  right: 0;
}

.card-button-more.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 16px;
  line-height: 32px;
}
.card-button-more.button-play.playing:not(:hover), .tl-row.playing .card-button-more.button-play:not(:hover), .card.playing .card-button-more.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-more.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-more.button-play:not(:hover)::after, .card.playing .card-button-more.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.card-button-more.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-more.button-play:not(:hover)::after, .card.playing .card-button-more.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-more.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-more.button-play:not(:hover)::after, .card.playing .card-button-more.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.card-button-more.button-play.playing:not(:hover).contextmenu-active, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.card-button-more.button-play.playing:not(:hover).contextmenu-active::after, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px transparent;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-button-more.button-play.playing:not(:hover).contextmenu-active, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .card-button-more.button-play.playing:not(:hover).contextmenu-active::after, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.card-button-more.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-more.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-button-more.button-play.playing:not(:hover)::before, .tl-row.playing .card-button-more.button-play:not(:hover)::before, .card.playing .card-button-more.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.card-button-more.button-play.playing:hover::before, .tl-row.playing .card-button-more.button-play:hover::before, .card.playing .card-button-more.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.card-button-more.button-play:not(:hover), .card.playing.card-button-more.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-more.button-play:not(:hover)::after,
.card.playing.card-button-more.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.card-button-more.button-play:not(:hover)::after, .card.playing.card-button-more.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-more.button-play:not(:hover)::after, .card.playing.card-button-more.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-more.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.playing.card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-button-more.button-play:not(:hover)::before,
.card.playing.card-button-more.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.card-button-more.button-play:hover::before,
.card.playing.card-button-more.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}

.card-button-more.active {
  color: #1ed760;
}
.card-button-more.active.contextmenu-active, .card-button-more.active:not(:disabled):hover {
  color: #1df369;
}
.card-button-more.active:not(:disabled):hover:active {
  color: #18ac4d;
}
.card-button-more.drop-target-active {
  color: #000000;
}
.card-button-more.drop-target-active {
  background-color: #1ed760;
}
.card-button-more.drop-target-active.contextmenu-active, .card-button-more.drop-target-active:not(:disabled):hover {
  color: #000000;
}
.card-button-more.drop-target-active:not(:disabled):hover:active {
  color: black;
}
.card-button-more.drop-target-active.contextmenu-active, .card-button-more.drop-target-active:not(:disabled):hover {
  background-color: #1ed760;
}
.card-button-more::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f1CC";
  font-size: 24px;
  line-height: inherit;
}

.card.added .card-button-add::before {
  content: "\f1C9" !important;
}
.card.added .card-button-add:hover:not(.just-changed):not(.stay-added)::before {
  content: "\f1C5" !important;
}
.card.added .card-button-add::before {
  content: "\f3DC" !important;
  color: #ffffff;
}
:not(.unlike-removes-entity) .card.added .card-button-add:hover:not(.just-changed):not(.stay-added)::before {
  content: "\f3DC" !important;
}

.card {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}

.card {
  transition-property: transform, opacity;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card {
    transition-duration: 50ms;
  }
}
.card .card-info-wrapper,
.card .card-image-wrapper {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.card .card-info-wrapper, .card .card-image-wrapper {
  transition-property: transform, opacity;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card .card-info-wrapper, .card .card-image-wrapper {
    transition-duration: 50ms;
  }
}
.card.pressed {
  transition: none;
}
.card.pressed {
  transform: scale(0.97);
}
.card.pressed .card-info-wrapper,
.card.pressed .card-image-wrapper {
  transition: none;
  opacity: 0.7;
}
.card a .card-hit-area-counter-scale,
.card a .card-hit-area-counter-scale-left,
.card a .card-hit-area-counter-scale-right {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.card a .card-hit-area-counter-scale, .card a .card-hit-area-counter-scale-left, .card a .card-hit-area-counter-scale-right {
  left: 0;
  right: 0;
}

.card.pressed a .card-hit-area-counter-scale {
  transform: scale(1.5);
}
.card.pressed a .card-hit-area-counter-scale-left {
  transform: scale(1.5);
}
.card.pressed a .card-hit-area-counter-scale-left {
  transform-origin: right;
}

.card.pressed a .card-hit-area-counter-scale-right {
  transform: scale(1.5);
}
.card.pressed a .card-hit-area-counter-scale-right {
  transform-origin: left;
}


.card-image-hit-area:not(.no-hover):hover .card-overlay,
.card-image-hit-area:not(.no-hover):hover .card-button-add,
.card-image-hit-area:not(.no-hover):hover .card-button-play,
.card-image-hit-area:not(.no-hover):hover .card-button-more,
.card-image-wrapper.contextmenu-active .card-overlay,
.card-image-wrapper.contextmenu-active .card-button-add,
.card-image-wrapper.contextmenu-active .card-button-play,
.card-image-wrapper.contextmenu-active .card-button-more,
.card:not(.card-horizontal).pressed .card-overlay,
.card:not(.card-horizontal).pressed .card-button-add,
.card:not(.card-horizontal).pressed .card-button-play,
.card:not(.card-horizontal).pressed .card-button-more {
  visibility: visible;
}

.card .album-placeholder,
.card .track-placeholder,
.card .artist-placeholder,
.card .playlist-placeholder,
.card .playlist-folder-placeholder,
.card .user-placeholder,
.card .genre-placeholder,
.card .collection-placeholder,
.card .local-files-placeholder,
.card .episode-placeholder {
  display: none;
  fill: #404040;
}

.card-type-album .album-placeholder,
.card-type-collection-album .album-placeholder {
  display: block;
}

.card-type-track .track-placeholder {
  display: block;
}

.card-type-artist .artist-placeholder,
.card-type-collection-artist .artist-placeholder {
  display: block;
}

.card-type-playlist .playlist-placeholder {
  display: block;
}

.card-type-playlist-folder .playlist-folder-placeholder {
  display: block;
}

.card-type-user .user-placeholder {
  display: block;
}

.card-type-genre .genre-placeholder {
  display: block;
}

.card-type-collection .collection-placeholder {
  display: block;
}

.card-type-local-files .local-files-placeholder {
  display: block;
}

.card-type-episode .episode-placeholder {
  display: block;
}

.card-info-wrapper {
  height: 54px;
}

.card-info-wrapper {
  margin-top: 10px;
}
.card-info-wrapper.card-info-with-subtitle-links {
  height: 74px;
}
.card-info-wrapper.card-info-with-description {
  height: 119px;
}
.card-info-wrapper.card-info-with-metadata {
  height: 76px;
}
.card-info-wrapper.card-info-with-description.card-info-with-metadata {
  height: 141px;
}
.card-info-wrapper.card-info-with-subtitle-links.card-info-with-metadata {
  height: 96px;
}

.card-type-artist:not(.card-horizontal) .card-info-wrapper, .card-type-collection-artist:not(.card-horizontal) .card-info-wrapper, .card-type-user:not(.card-horizontal) .card-info-wrapper {
  text-align: center;
}

.card-info-title {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-bold);
  color: #ffffff;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}

.card-info-title {
  padding-bottom: 3px;
}

.card-info-title a {
  color: #ffffff;
}
.card-info-title a:hover:active {
  color: #b3b3b3;
}

.card-info-subtitle-links {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b3b3b3;
}

.card-info-subtitle-links {
  padding-bottom: 3px;
  margin-bottom: -3px;
}

.card-info-subtitle-links a {
  color: #b3b3b3;
}
.card-info-subtitle-links a:hover {
  color: #ffffff;
}

.card-info-subtitle-metadata {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  color: #b3b3b3;
}

.card-info-subtitle-metadata {
  margin-top: 4px;
}


.card-info-subtitle-metadata .card-info-subtitle-new-mark {
  display: inline-block;
}
.card-info-subtitle-metadata .card-info-subtitle-new-mark {
  padding-right: 4px;
}

.card-info-subtitle-metadata .card-info-subtitle-new-mark::before {
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  line-height: 8px;
}
.card-info-subtitle-metadata .card-info-subtitle-new-mark::before {
  background-color: #2e77d0;
  border-radius: 8px;
}

.card-info-subtitle-description {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  color: #b3b3b3;
}

.card-info-subtitle-description {
  margin-bottom: 5px;
}


.card.playing .card-info-title,
.card.paused .card-info-title,
.playing .card .card-info-title,
.paused .card .card-info-title {
  color: #1db954;
}
.card.playing .card-info-title a,
.card.paused .card-info-title a,
.playing .card .card-info-title a,
.paused .card .card-info-title a {
  color: #1db954;
}
.card.playing .card-info-title a:hover,
.card.paused .card-info-title a:hover,
.playing .card .card-info-title a:hover,
.paused .card .card-info-title a:hover {
  color: #1ed760;
}

.card.playing .card-button-play,
.playing .card .card-button-play {
  visibility: visible;
}

.card-type-station:not(.card-type-station-cluster) .card-station-layer {
  width: 100%;
  height: 100%;
  position: absolute;
}

.card-type-station:not(.card-type-station-cluster) .card-station-layer {
  background-position: center;
  background-size: cover;
}
.card-type-station:not(.card-type-station-cluster) .card-image-content-wrapper {
  overflow: hidden;
}
.card-type-station:not(.card-type-station-cluster) .card-image {
  filter: blur(40px);
}
.card-type-station:not(.card-type-station-cluster) .card-image {
  background-size: 500%;
}
.card-type-station:not(.card-type-station-cluster) .card-station-highlight {
  opacity: 0.6;
}
.card-type-station:not(.card-type-station-cluster) .card-station-mask {
  background-image: url("https://local_resource_host/images/station-wave.svg");
}
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
  position: absolute;
}
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
  height: 46.46%;
  top: 26.77%;
  width: 46.46%;
}
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
  left: 26.77%;
}

.card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay {
  height: 51.52%;
  top: 24.24%;
  width: 51.52%;
}
.card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay {
  border-radius: 500px;
}
.card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay {
  left: 24.24%;
}


.card-video .card-image-wrapper {
  padding-bottom: 56.25%;
}

.card-horizontal {
  position: relative;
}
.card-horizontal > .card-horizontal-interior-wrapper {
  position: relative;
}
.card-horizontal > .card-horizontal-interior-wrapper {
  border: 0;
}
.card-horizontal > .card-horizontal-interior-wrapper:hover, .card-horizontal > .card-horizontal-interior-wrapper:active {
  background-color: #282828;
}
.card-horizontal.pressed > .card-horizontal-interior-wrapper, .card-horizontal.contextmenu-active > .card-horizontal-interior-wrapper {
  background-color: #282828;
}
.card-horizontal .card-image-wrapper {
  width: 96px;
  height: 96px;
}
.card-horizontal .card-image-wrapper {
  padding-bottom: 0;
}
.card-horizontal .card-image-wrapper {
  float: left;
}

.card-horizontal.card-video .card-image-wrapper {
  width: 170.6666666667px;
}
.card-horizontal .card-info-wrapper {
  height: 96px;
  position: relative;
}
.card-horizontal .card-info-wrapper {
  padding: 0;
}
.card-horizontal .card-info-wrapper {
  margin-left: 96px;
}

.card-horizontal .card-info-wrapper > a {
  border: none;
}
.card-horizontal .card-info-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 96px;
}
.card-horizontal .card-info-content-wrapper {
  padding-left: 16px;
  padding-right: 16px;
}

.card-horizontal.card-hidden-image .card-info-wrapper {
  margin-left: 0;
}

.card-horizontal.card-hidden-image .card-info-wrapper .card-info-content-wrapper {
  padding-left: 0;
}

.card-horizontal .card-info-subtitle-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.card-horizontal .card-info-title {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-bold);
  color: #ffffff;
  text-transform: none;
  display: flex;
}

.card-horizontal .card-info-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-horizontal.card-type-artist .card-image-link, .card-horizontal.card-type-artist .card-hit-area-counter-scale, .card-horizontal.card-type-collection-artist .card-image-link, .card-horizontal.card-type-collection-artist .card-hit-area-counter-scale, .card-horizontal.card-type-user .card-image-link, .card-horizontal.card-type-user .card-hit-area-counter-scale {
  border-radius: 0;
}
.card-horizontal.card-type-artist .card-image-hit-area, .card-horizontal.card-type-collection-artist .card-image-hit-area, .card-horizontal.card-type-user .card-image-hit-area {
  top: 0;
  bottom: 0;
}
.card-horizontal.card-type-artist .card-image-hit-area, .card-horizontal.card-type-collection-artist .card-image-hit-area, .card-horizontal.card-type-user .card-image-hit-area {
  border-radius: 0;
}
.card-horizontal.card-type-artist .card-image-hit-area, .card-horizontal.card-type-collection-artist .card-image-hit-area, .card-horizontal.card-type-user .card-image-hit-area {
  right: 0;
  left: 0;
}

.card-horizontal.card-type-artist .card-image,
.card-horizontal.card-type-artist .card-placeholder-wrapper,
.card-horizontal.card-type-artist .card-overlay, .card-horizontal.card-type-collection-artist .card-image,
.card-horizontal.card-type-collection-artist .card-placeholder-wrapper,
.card-horizontal.card-type-collection-artist .card-overlay, .card-horizontal.card-type-user .card-image,
.card-horizontal.card-type-user .card-placeholder-wrapper,
.card-horizontal.card-type-user .card-overlay {
  width: auto;
  height: auto;
  top: 8px;
  bottom: 8px;
}
.card-horizontal.card-type-artist .card-image, .card-horizontal.card-type-artist .card-placeholder-wrapper, .card-horizontal.card-type-artist .card-overlay, .card-horizontal.card-type-collection-artist .card-image, .card-horizontal.card-type-collection-artist .card-placeholder-wrapper, .card-horizontal.card-type-collection-artist .card-overlay, .card-horizontal.card-type-user .card-image, .card-horizontal.card-type-user .card-placeholder-wrapper, .card-horizontal.card-type-user .card-overlay {
  right: 8px;
  left: 8px;
}


.card-horizontal-size-small .card-image-wrapper {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
}
.card-horizontal-size-small .card-info-wrapper {
  height: 50px;
}
.card-horizontal-size-small .card-info-wrapper {
  margin-left: 50px;
}

.card-horizontal-size-small .card-info-wrapper .card-info-content-wrapper {
  height: 50px;
}
.card-horizontal-size-small .card-info-wrapper .card-info-content-wrapper {
  padding-left: 12px;
  padding-right: 12px;
}

.card-horizontal-size-small.card-type-artist .card-image,
.card-horizontal-size-small.card-type-artist .card-placeholder-wrapper,
.card-horizontal-size-small.card-type-artist .card-overlay, .card-horizontal-size-small.card-type-collection-artist .card-image,
.card-horizontal-size-small.card-type-collection-artist .card-placeholder-wrapper,
.card-horizontal-size-small.card-type-collection-artist .card-overlay, .card-horizontal-size-small.card-type-user .card-image,
.card-horizontal-size-small.card-type-user .card-placeholder-wrapper,
.card-horizontal-size-small.card-type-user .card-overlay {
  top: 3px;
  bottom: 3px;
}
.card-horizontal-size-small.card-type-artist .card-image, .card-horizontal-size-small.card-type-artist .card-placeholder-wrapper, .card-horizontal-size-small.card-type-artist .card-overlay, .card-horizontal-size-small.card-type-collection-artist .card-image, .card-horizontal-size-small.card-type-collection-artist .card-placeholder-wrapper, .card-horizontal-size-small.card-type-collection-artist .card-overlay, .card-horizontal-size-small.card-type-user .card-image, .card-horizontal-size-small.card-type-user .card-placeholder-wrapper, .card-horizontal-size-small.card-type-user .card-overlay {
  right: 3px;
  left: 3px;
}

.card-horizontal-size-small.card-video .card-image-wrapper {
  width: 50px;
}

.card-horizontal-size-medium .card-button-play {
  height: 32px;
  line-height: 30px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 32px;
}

.card-horizontal-size-medium .card-button-play {
  padding-top: 1px;
  border-radius: 16px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}

.card-horizontal-size-medium .card-button-play {
  padding-left: 32px;
  padding-right: 32px;
  padding-left: 0;
  padding-right: 0;
  margin: -16px 0 0 -16px;
}



.card-horizontal-size-medium .card-button-play .b-alt-text {
  margin-top: -30px;
}
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
  background-color: rgba(24, 24, 24, 0.7);
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
  color: #b3b3b3;
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  transform: scale(1);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
    transform: scale(1);
  }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-horizontal-size-medium .card-button-play {
    transition-duration: 50ms;
  }
}
.card-horizontal-size-medium .card-button-play::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.card-horizontal-size-medium .card-button-play::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-horizontal-size-medium .card-button-play::after {
    transition-duration: 50ms;
  }
}
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
  transition-property: transform, box-shadow, color, background-color;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
    transition-duration: 66ms;
  }
}
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
  transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
}
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
  transition-property: box-shadow;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
    transition-duration: 66ms;
  }
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
  transition: none;
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active::after {
  transition: none;
}
.card-horizontal-size-medium .card-button-play::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.card-horizontal-size-medium .card-button-play::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.card-horizontal-size-medium .card-button-play::after {
  right: 0;
  left: 0;
}

.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
}
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
  box-shadow: inset 0 0 0 1px #ffffff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
  .card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
  transform: scale(1.0625);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
    transform: scale(1.0625);
  }
}
.card-horizontal-size-medium .card-button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 32px;
  font-size: 16px;
  padding-left: 8px /* rtl:ignore */;
  width: calc(100% - 8px);
}
.card-horizontal-size-medium .card-button-play::before {
  border-radius: 500px;
}
.card-horizontal-size-medium .card-button-play::before {
  left: 0;
  right: 0;
}

.card-horizontal-size-medium .card-button-play.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 16px;
  line-height: 32px;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover), .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover), .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card-horizontal-size-medium .card-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) {
  .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::before, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.card-horizontal-size-medium .card-button-play.button-play.playing:hover::before, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:hover::before, .card.playing .card-horizontal-size-medium .card-button-play.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover), .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after,
.card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card-horizontal-size-medium .card-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.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before,
.card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 16px;
  line-height: 32px;
}
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:hover::before,
.card.playing.card-horizontal-size-medium .card-button-play.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 16px;
  line-height: 32px;
}

.card-horizontal-size-medium .card-button-play::before {
  content: "\f132";
}
.card-horizontal-size-medium .card-image-wrapper {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
}
.card-horizontal-size-medium .card-info-wrapper {
  height: 64px;
}
.card-horizontal-size-medium .card-info-wrapper {
  margin-left: 64px;
}

.card-horizontal-size-medium .card-info-wrapper .card-info-content-wrapper {
  height: 64px;
}
.card-horizontal-size-medium .card-info-wrapper .card-info-content-wrapper {
  padding-left: 16px;
  padding-right: 16px;
}

.card-horizontal-size-medium .card-info-subtitle-metadata {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-horizontal-size-medium.card-type-artist .card-image,
.card-horizontal-size-medium.card-type-artist .card-placeholder-wrapper,
.card-horizontal-size-medium.card-type-artist .card-overlay, .card-horizontal-size-medium.card-type-collection-artist .card-image,
.card-horizontal-size-medium.card-type-collection-artist .card-placeholder-wrapper,
.card-horizontal-size-medium.card-type-collection-artist .card-overlay, .card-horizontal-size-medium.card-type-user .card-image,
.card-horizontal-size-medium.card-type-user .card-placeholder-wrapper,
.card-horizontal-size-medium.card-type-user .card-overlay {
  top: 5px;
  bottom: 5px;
}
.card-horizontal-size-medium.card-type-artist .card-image, .card-horizontal-size-medium.card-type-artist .card-placeholder-wrapper, .card-horizontal-size-medium.card-type-artist .card-overlay, .card-horizontal-size-medium.card-type-collection-artist .card-image, .card-horizontal-size-medium.card-type-collection-artist .card-placeholder-wrapper, .card-horizontal-size-medium.card-type-collection-artist .card-overlay, .card-horizontal-size-medium.card-type-user .card-image, .card-horizontal-size-medium.card-type-user .card-placeholder-wrapper, .card-horizontal-size-medium.card-type-user .card-overlay {
  right: 5px;
  left: 5px;
}

.card-horizontal-size-medium.card-video .card-image-wrapper {
  width: 64px;
}

.card-horizontal.card--with-remove-button .card-info-wrapper a {
  display: flex;
  align-items: center;
}
.card-horizontal.card--with-remove-button .card-info-wrapper a .card-info-content-wrapper {
  flex: 1;
  min-width: 0;
}

.card__remove-button {
  display: none;
  z-index: 2;
}

.card__remove-button {
  margin-right: 4px;
}



.card-horizontal-interior-wrapper:hover .card__remove-button {
  display: block;
}

/*******************************************************************************
 * Card Puffs
 *
 * A link component that combines three images with a title and subtitle.
 * It has a support for one custom wide image.
 * Used in Browse and Hubs.
 *
 * Template: cards/puff.hbs
 ******************************************************************************/
.card-puff__image-wrapper {
  overflow: hidden;
  position: relative;
  contain: paint;
}

.card-puff__image {
  position: absolute;
  top: 0;
  bottom: 0;
}

.card-puff__image {
  background-size: cover;
  background-position: 50% 50%;
}

.card-puff__image {
  right: 0;
  left: 0;
}



.card-puff__images {
  position: absolute;
  top: 0;
  bottom: 0;
}

.card-puff__images {
  right: 0;
  left: 0;
}



.card-puff__card-image {
  position: absolute;
  height: 100%;
}

.card-puff__card-image {
  box-shadow: 5px 0 30px #000000;
}


.card-puff__card-image:nth-child(1) {
  right: 0;
}

.card-puff__card-image:nth-child(3) {
  left: 0;
}


.card-puff__info-container {
  padding-top: 10px;
  text-align: center;
}

.card-puff__title-container {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
}

.card-puff__title-container {
  background-color: rgba(0, 0, 0, 0.6);
}

.card-puff__title-container {
  right: 0;
  left: 0;
}



.card-puff__title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  font-weight: var(--glue-font-weight-bold);
  line-height: 1.6;
  font-size: 2.5vw;
}

.card-puff__title {
  margin: 0 10px;
  text-align: center;
}

.card-puff__subtitle {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}


.card-puff.pressed {
  transition: none;
}
.card-puff.pressed .card-puff__image-wrapper,
.card-puff.pressed .card-puff__info-container {
  transition: none;
  opacity: 0.7;
}

/**
 *  Aspect ration of puffs depends on the width of the client and in what
 *  grid size the puff is placed. Puffs are meant to be placed in a grid.
 *
 *  There are two cases that we handle:
 *  - three puffs in a row (.col-sm-4, .col-md-4, etc)
 *  - two puffs in a row (.col-sm-6, .col-md-6, etc).
 **/
.card-puff__image-wrapper {
  padding-bottom: 40%;
}

.card-puff__card-image {
  padding-right: 40%;
}


.card-puff__card-image:nth-child(2) {
  left: 30%;
}


.col-xs-3 .card-puff__image-wrapper, .col-xs-4 .card-puff__image-wrapper, .col-xs-6 .card-puff__image-wrapper {
  padding-bottom: 50%;
}
.col-xs-3 .card-puff__card-image, .col-xs-4 .card-puff__card-image, .col-xs-6 .card-puff__card-image {
  padding-right: 50%;
}

.col-xs-3 .card-puff__card-image:nth-child(2), .col-xs-4 .card-puff__card-image:nth-child(2), .col-xs-6 .card-puff__card-image:nth-child(2) {
  left: 25%;
}


.col-xs-6 .card-puff__title {
  font-size: 3vw;
}

@media (min-width: 592px) {
  .col-sm-6 .card-puff__image-wrapper {
    padding-bottom: 40%;
  }
  .col-sm-6 .card-puff__card-image {
    padding-right: 40%;
  }
  
  .col-sm-6 .card-puff__card-image:nth-child(2) {
    left: 30%;
  }
  
  .col-sm-6 .card-puff__title {
    font-size: 3vw;
  }
}
@media (min-width: 820px) {
  .col-md-3 .card-puff__image-wrapper, .col-md-4 .card-puff__image-wrapper {
    padding-bottom: 40%;
  }
  .col-md-3 .card-puff__card-image, .col-md-4 .card-puff__card-image {
    padding-right: 40%;
  }
  
  .col-md-3 .card-puff__card-image:nth-child(2), .col-md-4 .card-puff__card-image:nth-child(2) {
    left: 30%;
  }
  

  .col-md-6 .card-puff__image-wrapper {
    padding-bottom: 33.3333333333%;
  }
  .col-md-6 .card-puff__card-image {
    padding-right: 33.3333333333%;
  }
  
  .col-md-6 .card-puff__card-image:nth-child(2) {
    left: 33.3333333333%;
  }
  
  .col-md-6 .card-puff__title {
    font-size: 2.5vw;
  }
}
@media (min-width: 1280px) {
  .col-lg-3 .card-puff__image-wrapper, .col-lg-4 .card-puff__image-wrapper, .col-lg-6 .card-puff__image-wrapper {
    padding-bottom: 33.3333333333%;
  }
  .col-lg-3 .card-puff__card-image, .col-lg-4 .card-puff__card-image, .col-lg-6 .card-puff__card-image {
    padding-right: 33.3333333333%;
  }
  
  .col-lg-3 .card-puff__card-image:nth-child(2), .col-lg-4 .card-puff__card-image:nth-child(2), .col-lg-6 .card-puff__card-image:nth-child(2) {
    left: 33.3333333333%;
  }
  

  .col-lg-3 .card-puff__title,
.col-lg-4 .card-puff__title {
    font-size: 2vw;
  }

  .col-lg-6 .card-puff__title {
    font-size: 2.5vw;
  }
}
@media (min-width: 1496px) {
  .col-lg-3 .card-puff__title,
.col-lg-4 .card-puff__title {
    font-size: 28px;
  }

  .col-lg-6 .card-puff__title {
    font-size: 36px;
  }
}
.genre-card {
  /* Needed because all links have hover/focus styles with a bottom border */
}
.genre-card {
  border-bottom-color: transparent !important;
}

.gc-image-container {
  overflow: hidden;
  position: relative;
}

.gc-image {
  height: 198px;
}

.gc-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.gc-image-cols-1 {
  height: auto;
}

.gc-image-cols-1 {
  margin-top: 0px;
  padding-bottom: 100%;
}
@media (min-width: 592px) {
  .gc-image-cols-1 {
    margin-top: 0px;
  }
}
@media (min-width: 820px) {
  .gc-image-cols-1 {
    margin-top: 0px;
  }
}
@media (min-width: 1280px) {
  .gc-image-cols-1 {
    margin-top: 0px;
  }
}

.gc-image-cols-2 {
  height: auto;
}

.gc-image-cols-2 {
  margin-top: -8px;
  padding-bottom: 50%;
}
@media (min-width: 592px) {
  .gc-image-cols-2 {
    margin-top: -8px;
  }
}
@media (min-width: 820px) {
  .gc-image-cols-2 {
    margin-top: -10px;
  }
}
@media (min-width: 1280px) {
  .gc-image-cols-2 {
    margin-top: -12px;
  }
}

.gc-image-cols-3 {
  height: auto;
}

.gc-image-cols-3 {
  margin-top: -10.6666666667px;
  padding-bottom: 33.3333333333%;
}
@media (min-width: 592px) {
  .gc-image-cols-3 {
    margin-top: -10.6666666667px;
  }
}
@media (min-width: 820px) {
  .gc-image-cols-3 {
    margin-top: -13.3333333333px;
  }
}
@media (min-width: 1280px) {
  .gc-image-cols-3 {
    margin-top: -16px;
  }
}

.gc-image-cols-4 {
  height: auto;
}

.gc-image-cols-4 {
  margin-top: -12px;
  padding-bottom: 25%;
}
@media (min-width: 592px) {
  .gc-image-cols-4 {
    margin-top: -12px;
  }
}
@media (min-width: 820px) {
  .gc-image-cols-4 {
    margin-top: -15px;
  }
}
@media (min-width: 1280px) {
  .gc-image-cols-4 {
    margin-top: -18px;
  }
}

.gc-image-cols-5 {
  height: auto;
}

.gc-image-cols-5 {
  margin-top: -12.8px;
  padding-bottom: 20%;
}
@media (min-width: 592px) {
  .gc-image-cols-5 {
    margin-top: -12.8px;
  }
}
@media (min-width: 820px) {
  .gc-image-cols-5 {
    margin-top: -16px;
  }
}
@media (min-width: 1280px) {
  .gc-image-cols-5 {
    margin-top: -19.2px;
  }
}

.gc-image-cols-6 {
  height: auto;
}

.gc-image-cols-6 {
  margin-top: -13.3333333333px;
  padding-bottom: 16.6666666667%;
}
@media (min-width: 592px) {
  .gc-image-cols-6 {
    margin-top: -13.3333333333px;
  }
}
@media (min-width: 820px) {
  .gc-image-cols-6 {
    margin-top: -16.6666666667px;
  }
}
@media (min-width: 1280px) {
  .gc-image-cols-6 {
    margin-top: -20px;
  }
}

.gc-label-container {
  position: absolute;
  top: 50%;
  bottom: 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertical centering */
  /* horizontal centering */
  max-width: 344px;
}

.gc-label-container {
  text-align: center;
  margin: 0 auto;
  padding: 16px;
}

.gc-label-container {
  left: 0%;
  right: 0%;
}



@media (min-width: 592px) {
  .gc-label-container {
    max-width: 560px;
  }
  .gc-label-container {
    padding: 16px;
  }
}
@media (min-width: 820px) {
  .gc-label-container {
    max-width: 780px;
  }
  .gc-label-container {
    padding: 20px;
  }
}
@media (min-width: 1280px) {
  .gc-label-container {
    max-width: 1232px;
  }
  .gc-label-container {
    padding: 24px;
  }
}
.gc-label-text-wrapper {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gc-label-text {
  font-size: 16px;
}

.gc-label-text {
  border-bottom: 1px solid transparent;
}

.genre-card:hover .gc-label-text {
  border-bottom-color: currentcolor;
}

.genre-card.pressed {
  opacity: 0.7;
}

/* stylelint-disable selector-max-type */
/* stylelint-disable selector-max-type */
/* stylelint-disable max-nesting-depth */
/*******************************************************************************
 * Component: page-header
 *
 * This is quite a complicated component. It has support for a lot of content
 * (image, title, description, buttons etc) that can all be flipped on or off.
 * There is also support for a background layer for a colored gradient or a
 * background image, including animation logic tied to scrolling and triggered
 * animations for a sticky header.
 ******************************************************************************/
/*******************************************************************************
 * Private variables
 ******************************************************************************/
/*******************************************************************************
 * Public block, elements and modifiers
 ******************************************************************************/
/**
 * Public block class.
 *
 * 1. For positioning elements inside the header
 */
.glue-page-header {
  position: relative;
  min-height: 208px;
}

/**
 * Public element class for a wrapper around the content element. This is used
 * for layout and padding, while the content element is used for animations
 * among other things.
 *
 * 1. Found weird rendering issues without this, where content inside of this
 *    element would be clipped in strange places when resizing the window.
 */
.glue-page-header__content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 208px;
  contain: paint;
  /* [1] */
}
.glue-page-header__content-wrapper {
  padding-top: 72px;
  padding-bottom: 16px;
}

/**
 * Public element class for the content element. This is used for animations
 * among other things.
 */
.glue-page-header__content {
  display: flex;
  opacity: 1;
  transition: opacity 166ms cubic-bezier(0.3, 0, 0, 1), transform 166ms cubic-bezier(0.3, 0, 0, 1);
}
.glue-page-header__content {
  transform: translateY(0);
  transition-delay: 166ms;
}

/**
 * Public element class for an overlay that covers all the content.
 * The purpose of this overlay is to cover the entire header with a solid
 * background color while a video is playing in the header (for P2S). Because
 * of the video implementation we have, the video is playing in zlink and is
 * placed on top of the playlist iframe, causing the video to cover the scroll
 * bar for the iframe. To solve that, we allocate space to the right of the
 * video for the scroll bar, so the iframe shows through. However, the regular
 * header image would then be visible in a small strip, so we need to put this
 * cover element on top of the header to have a solid page background showing
 * through in that small strip. This overlay is also for putting a background
 * on top of the header for where there are black bars next to the video in
 * some window sizes.
 */
.glue-page-header__content-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
}
.glue-page-header__content-overlay {
  background-color: #121212;
}
.glue-page-header__content-overlay {
  right: 0;
  left: 0;
}

.glue-page-header__content-overlay.glue-page-header__content-overlay--is-visible {
  display: block;
}

/**
 * Public element class for some of the content. Because of certain layout
 * requirements, we need two sets of buttons in the regular header and we need
 * this element to wrap all the content except the secondary set of buttons.
 */
.glue-page-header__content-inner {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.glue-page-header__content-inner {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -10px;
  margin-bottom: -10px;
}
.glue-page-header__content-inner {
  padding-left: 10px;
  margin-left: -10px;
}


/**
 * Public element class for an empty spacer. This is to leave some empty space
 * in the right side of the header, so the title doesn't go all the way to the
 * edge.
 */
.glue-page-header__spacer {
  width: 10%;
}

/**
 * Public modifier class for a larger empty spacer.
 */
.glue-page-header__spacer--large {
  width: 25%;
}
@media (max-width: 1279px) {
  .glue-page-header__spacer--large {
    width: 15%;
  }
}
@media (max-width: 819px) {
  .glue-page-header__spacer--large {
    width: 10%;
  }
}

/**
 * Public element class for the wrapper around the sticky header. This wrapper
 * is there to keep the original position and size of the sticky header, so the
 * scrolling logic can stick and unstick the header at the right position.
 */
.glue-page-header__sticky-wrapper {
  position: absolute;
  bottom: 0;
  height: 68px;
  width: 100vw;
  pointer-events: none;
}

/**
 * Public element class for the sticky header. This is hidden by default and
 * will be displayed when scrolling past the top edge of the sticky wrapper.
 */
.glue-page-header__sticky {
  height: 68px;
  overflow: hidden;
  opacity: 1;
}
.glue-page-header__sticky {
  padding-top: 48px;
}
.glue-page-header__sticky .glue-page-header__image {
  transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__image {
  transition-property: transform, opacity;
  transform: translateY(20px);
}
.glue-page-header__sticky .glue-page-header__title {
  transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__title {
  transition-property: transform, opacity;
  transform: translateY(20px);
}
.glue-page-header__sticky .glue-page-header__p2s-details {
  transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__p2s-details {
  transition-property: transform, opacity;
  transform: translateY(20px);
}
.glue-page-header__sticky .glue-page-header__p2s-followers {
  transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__p2s-followers {
  transition-property: transform, opacity;
  transform: translateY(20px);
}
.glue-page-header__sticky .glue-page-header__button:nth-child(1) {
  transition: 116ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__button:nth-child(1) {
  transition-property: transform, opacity;
  transform: translateY(20px);
}
.glue-page-header__sticky .glue-page-header__button:nth-child(2) {
  transition: 132ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__button:nth-child(2) {
  transition-property: transform, opacity;
  transform: translateY(20px);
}
.glue-page-header__sticky .glue-page-header__button:nth-child(3) {
  transition: 148ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__button:nth-child(3) {
  transition-property: transform, opacity;
  transform: translateY(20px);
}
.glue-page-header__sticky .glue-page-header__button:nth-child(4) {
  transition: 164ms cubic-bezier(1, 0, 0.7, 1) 0ms;
  opacity: 0;
}
.glue-page-header__sticky .glue-page-header__button:nth-child(4) {
  transition-property: transform, opacity;
  transform: translateY(20px);
}

/**
 * Public element class for the sticky header content.
 */
.glue-page-header__sticky-inner {
  display: flex;
  align-items: center;
  height: 68px;
  transition: transform 0ms cubic-bezier(0.3, 0, 0, 1);
}
.glue-page-header__sticky-inner {
  transform: translateY(68px);
  transition-delay: 166ms;
}

/**
 * Public element class for the wrapper around the navbar.
 */
.glue-page-header__navbar-wrapper {
  overflow: hidden;
}

/**
 * Public element class for a wrapper around a group of buttons.
 */
.glue-page-header__buttons {
  display: flex;
}

/**
 * Public element class for a wrapper around the header background.
 * This background positions itself fixed to the top of the viewport to enable
 * certain scrolling behavior.
 */
.glue-page-header__background {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.glue-page-header__background {
  right: 0;
  left: 0;
}


/**
 * Public element class for a colored gradient header background.
 * This has a default color, but a different color can be set using
 * `background-color` from JS. There is also a gradient that darkens the color
 * to have the header background blend into the page background.
 */
.glue-page-header__background-color {
  position: absolute;
  top: 0;
  bottom: 0;
}
.glue-page-header__background-color {
  background-color: #606060;
  background-image: linear-gradient(to bottom, transparent, #181818);
}
.glue-page-header__background-color {
  right: 0;
  left: 0;
}


/**
 * Public element class for a background image.
 */
.glue-page-header__background-image {
  position: absolute;
  top: 0;
  bottom: 0;
  will-change: transform;
  contain: paint layout;
}
.glue-page-header__background-image {
  background-size: cover;
  background-position: center center;
}
.glue-page-header__background-image {
  right: 0;
  left: 0;
}


/**
 * Public element class for a background image loader. This is a wrapper element
 * around the image, to allow for different transformations on the image and the
 * loader element. The loader element uses an animation while the image element
 * should follow scroll position precisely without animation.
 */
.glue-page-header__background-image-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  will-change: transform;
}
.glue-page-header__background-image-loader {
  transform: scale(1);
}
.glue-page-header__background-image-loader {
  right: 0;
  left: 0;
}


/**
 * Public element class for a background image overlay.
 * This darkens the image a bit, so that we can still display content on top of
 * it without having even bright colors blending in with the image.
 */
.glue-page-header__background-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.glue-page-header__background-overlay {
  background: rgba(24, 24, 24, 0.44);
}
.glue-page-header__background-overlay {
  right: 0;
  left: 0;
}


/**
 * Public element class for a background image overlay with a gradient.
 * This darkens the image even more in the bottom half part of the header, to
 * have the header background blend into the page background.
 */
.glue-page-header__background-image-overlay-gradient {
  position: absolute;
  top: 50%;
  bottom: -1px;
  pointer-events: none;
}
.glue-page-header__background-image-overlay-gradient {
  background: linear-gradient(to bottom, transparent, #181818);
}
.glue-page-header__background-image-overlay-gradient {
  right: 0;
  left: 0;
}


/**
 * Public element class for a background overlay that fades in while scrolling.
 */
.glue-page-header__background-scroll-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  will-change: opacity;
  contain: paint layout;
  pointer-events: none;
}
.glue-page-header__background-scroll-overlay {
  background: #121212;
}
.glue-page-header__background-scroll-overlay {
  right: 0;
  left: 0;
}


/**
 * Public element class for a background overlay that fades in while scrolling,
 * but with an elliptical shape to darken the edges faster than the center
 * point of the header. Useful for headers with an image background. The actual
 * ellipse is not specified here in CSS, since it's added from JS and the
 * parameters for the ellipse change while scrolling.
 */
.glue-page-header__background-scroll-overlay-ellipse {
  position: absolute;
  top: -100px;
  bottom: -100px;
  opacity: 0;
  will-change: opacity;
  contain: paint layout;
  pointer-events: none;
}
.glue-page-header__background-scroll-overlay-ellipse {
  background-image: radial-gradient(circle farthest-corner, transparent, #121212 50%);
}
.glue-page-header__background-scroll-overlay-ellipse {
  right: 0;
  left: 0;
}


/**
 * Public element class for a background overlay that fades in while scrolling,
 * that is placed behind the ellipse overlay. This will make sure the background
 * ends up at a solid color, but still keeping the ellipse effect.
 */
.glue-page-header__background-scroll-overlay-ellipse-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  will-change: opacity;
  contain: paint layout;
  pointer-events: none;
}
.glue-page-header__background-scroll-overlay-ellipse-backdrop {
  background: #121212;
}
.glue-page-header__background-scroll-overlay-ellipse-backdrop {
  right: 0;
  left: 0;
}


/**
 * Public element class for a box showing the full description. In small windows
 * the description might not always fit in the small space that is allocated for
 * description, so JS logic will clone the description node and place it
 * directly on top of the original description to get a simple overlay showing
 * the full description when hovering a description that doesn't fit.
 *
 * 1. The coordinates will be set from JS to match up the position of the
 *    original description.
 */
.glue-page-header__full-description-overlay {
  position: fixed;
  /* [1] */
  box-sizing: content-box;
}
.glue-page-header__full-description-overlay {
  background-color: #282828;
  box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 8px 16px;
}
.glue-page-header__full-description-overlay {
  transform: translate(-16px, -8px);
}

/**
 * This element class is defined further up, but we need this here to nest
 * other selectors inside of it, because the same content has different styles
 * depending on if it's in the regular header or the sticky header.
 * This is for the regular header.
 */
.glue-page-header__content {
  /**
   * Public element class for an image object.
   */
  /**
   * Public element class to wrap around the image and inherit its sizing
   */
  /**
   * Public element class for a wrapper around all the content except the image.
   */
  /**
   * Public element class for the label above the title. The label is used for
   * displaying the type of entity the header represents.
   */
  /**
   * Public element class for the title.
   */
  /**
   * Public element class for the description.
   */
  /**
   * Public element class for the meta info bar. This is a one line bar of
   * custom text content. For example, a playlist view might show the name of
   * the owner and playlist length here.
   */
  /**
   * Public element class for the count label. This is the wrapper for both the
   * text and the number. The count can be follower count, listener count etc.
   */
  /**
   * Public element class for the text in the count label.
   */
  /**
   * Public element class for the number in the count label.
   */
  /**
   * Public element class for the count label link.
   */
  /**
   * Public element class for the wrapper element for the buttons.
   * This handles both sets of buttons in the regular header, but not buttons
   * in the sticky header.
   */
}
.glue-page-header__content > .glue-page-header__buttons {
  display: none;
}
.glue-page-header__content .glue-page-header__image {
  flex: 0 0 auto;
  width: 220px;
}
.glue-page-header__content .glue-page-header__image {
  margin-right: 24px;
}

.glue-page-header__content .glue-page-header__image-inner {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
}
.glue-page-header__content .glue-page-header__data {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.glue-page-header__content .glue-page-header__data {
  padding-bottom: 10px;
  margin-bottom: -10px;
}
.glue-page-header__content .glue-page-header__data {
  padding-left: 10px;
  margin-left: -10px;
}

.glue-page-header__content .glue-page-header__label {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 16px;
  height: 22px;
  color: #ffffff;
}
.glue-page-header__content .glue-page-header__label {
  padding-top: 6px;
}


.glue-page-header__content .glue-page-header__title {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.005em;
  font-weight: var(--glue-font-weight-black);
  color: #ffffff;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.glue-page-header__content .glue-page-header__title {
  margin: 0;
}
.glue-page-header__content .glue-page-header__title {
  text-align: left;
  margin-left: -0.07em;
}


.glue-page-header__content .glue-page-header__description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.glue-page-header__content .glue-page-header__description {
  margin-top: 8px;
}
.glue-page-header__content .glue-page-header__meta-info {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glue-page-header__content .glue-page-header__meta-info {
  margin-top: 10px;
}
.glue-page-header__content .glue-page-header__count-label {
  position: absolute;
  bottom: 0;
}
.glue-page-header__content .glue-page-header__count-label {
  right: 0;
  text-align: right;
}

.glue-page-header__content .glue-page-header__count-label-text {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}


.glue-page-header__content .glue-page-header__count-label-number {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}


.glue-page-header__content .glue-page-header__count-label-link {
  border-bottom: 0;
}
.glue-page-header__content .glue-page-header__count-label-link:hover .glue-page-header__count-label-text {
  color: #ffffff;
}
.glue-page-header__content .glue-page-header__count-label-link:hover .glue-page-header__count-label-text:active {
  color: #d9d9d9;
}
.glue-page-header__content .glue-page-header__buttons > * {
  margin-top: 20px;
}
.glue-page-header__content .glue-page-header__buttons > * {
  margin-right: 12px;
}

@media (max-width: 819px) {
  .glue-page-header__content {
    display: flex;
    flex-direction: column;
    /**
     * Public element class for the title in narrow window.
     */
    /**
     * Public element class for the image in narrow window.
     */
    /**
     * Public element class for the count label in narrow window, where we hide
     * it because of space constraints.
     */
  }
  .glue-page-header__content .glue-page-header__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.005em;
    font-weight: var(--glue-font-weight-black);
    color: #ffffff;
    text-transform: none;
  }
  
  .glue-page-header__content .glue-page-header__image {
    width: 136px;
  }
  .glue-page-header__content .glue-page-header__image.glue-page-header__image--artist, .glue-page-header__content .glue-page-header__image.glue-page-header__image--user {
    width: 120px;
  }
  .glue-page-header__content .glue-page-header__data .glue-page-header__buttons {
    display: none;
  }
  .glue-page-header__content > .glue-page-header__buttons {
    display: flex;
  }
  .glue-page-header__content .glue-page-header__count-label {
    display: none;
  }
}



/**
 * This element class is defined further up, but we need this here to nest
 * other selectors inside of it, because the same content has different styles
 * depending on if it's in the regular header or the sticky header.
 * This is for the sticky header.
 */
.glue-page-header__sticky {
  /**
   * Public element class for the image.
   */
  /**
   * Public element class for the title.
   */
  /**
   * Public element class for the wrapper element for the buttons.
   */
}
.glue-page-header__sticky .glue-page-header__image {
  width: 36px;
}
.glue-page-header__sticky .glue-page-header__image {
  margin-right: 16px;
}

.glue-page-header__sticky .glue-page-header__title {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.005em;
  font-weight: var(--glue-font-weight-black);
  color: #ffffff;
  text-transform: none;
  display: flex;
  overflow: hidden;
  flex: 1;
}
.glue-page-header__sticky .glue-page-header__title {
  margin: 0;
}

.glue-page-header__sticky .glue-page-header__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glue-page-header__sticky .glue-page-header__buttons > * {
  margin-left: 12px;
}


html:lang(th) .glue-page-header__sticky .glue-page-header__title {
  line-height: 44px;
}

/**
 * Public modifier classes for entity types that should have circular images.
 */
.glue-page-header--artist .glue-page-header__content .glue-page-header__image,
.glue-page-header--user .glue-page-header__content .glue-page-header__image {
  width: 120px;
}
.glue-page-header--artist .glue-page-header__content .glue-page-header__image-inner, .glue-page-header--user .glue-page-header__content .glue-page-header__image-inner {
  border-radius: 500px;
}
.glue-page-header--artist .glue-page-header__content .glue-page-header__data,
.glue-page-header--user .glue-page-header__content .glue-page-header__data {
  justify-content: center;
}

/**
 * Public modifier class for the station entity, which has a special image
 * effect with ripples where the normal shadow doesn't look good.
 */
.glue-page-header--station .glue-page-header__image-inner {
  box-shadow: none;
}

/**
 * Public modifier class for Playlist2Shows entity pages, which has a very large
 * header with more content in the sticky header than normally.
 */
.glue-page-header--playlist2shows .glue-page-header__background-image {
  background-position: center top;
}
.glue-page-header--playlist2shows .glue-page-header__p2s-details {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: none;
  color: #ffffff;
}
.glue-page-header--playlist2shows .glue-page-header__p2s-details {
  margin-top: 8px;
}

.glue-page-header--playlist2shows .glue-page-header__p2s-followers {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #ffffff;
}
.glue-page-header--playlist2shows .glue-page-header__p2s-followers {
  margin-top: 8px;
}


.glue-page-header--playlist2shows .glue-page-header__sticky-wrapper {
  height: 180px;
}
.glue-page-header--playlist2shows .glue-page-header__sticky {
  height: 180px;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner {
  height: 180px;
  align-items: flex-end;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner {
  transform: translateY(180px);
  padding-bottom: 28px;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__image {
  width: 234px;
  height: 132px;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__image {
  margin: 0;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__sticky-data {
  margin-left: 16px;
}

.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__title {
  margin-bottom: 4px;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-details {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-details {
  margin-top: 0;
  margin-bottom: 4px;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-followers {
  margin-top: 0;
  margin-bottom: 16px;
}
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__buttons > * {
  margin-left: 0;
  margin-right: 12px;
}


/**
 * Public modifier class for a header with an active sticky header.
 */
.glue-page-header--with-active-sticky-header .glue-page-header__background-scroll-overlay-ellipse {
  background: #121212;
}
.glue-page-header--with-active-sticky-header .glue-page-header__content {
  opacity: 0;
  transition: opacity 166ms cubic-bezier(1, 0, 0.7, 1), transform 166ms cubic-bezier(1, 0, 0.7, 1);
}
.glue-page-header--with-active-sticky-header .glue-page-header__content {
  transform: translateY(-20px);
  transition-delay: 0ms;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky {
  pointer-events: auto;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 199ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 232ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 265ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 298ms;
  opacity: 1;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky-inner {
  transition: none;
}
.glue-page-header--with-active-sticky-header .glue-page-header__sticky-inner {
  transform: translateY(-48px);
}
.glue-page-header--with-active-sticky-header .glue-page-header__background {
  border-bottom: 1px solid #282828;
}
.glue-page-header--with-active-sticky-header .glue-page-header__background {
  right: -16px;
}

.glue-page-header--with-active-sticky-header .navbar.sticky-top {
  background-color: transparent;
  border-bottom: 0;
}

/**
 * Public modifier class for a header that also includes a navbar. Since the
 * navbar is inside the header, positions and sizes need to be adjusted.
 */
.glue-page-header--with-navbar .glue-page-header__content-wrapper {
  height: calc(100% - 44px);
}
.glue-page-header--with-navbar .glue-page-header__sticky-wrapper {
  bottom: 44px;
}

/**
 * Public modifier class for a header that includes a count label.
 */
@media (max-width: 1279px) {
  .glue-page-header--with-count-label .glue-page-header__spacer--large {
    width: 22%;
  }
}

/**
 * Public modifier class for a header with responsive height, appropriate for
 * a 16:9 video page. This is made for a header that gets replaced by a video
 * player when playback starts.
 */
.glue-page-header--with-responsive-height-video {
  height: calc((100vw / 1.7777777778) + 48px);
  min-height: 328px;
  max-height: calc( 100vh - ( 56px + 28px + (41px * 3) ) );
}

/**
 * Public modifier class for a header with responsive height, small size.
 * This is useful for a header that needs impact, but lacks a background image.
 */
.glue-page-header--with-responsive-height-small {
  height: 18.1818181818vw;
  min-height: 328px;
  max-height: 40vh;
}

/**
 * Public modifier class for a header with responsive height, large size.
 * This is useful for a header that needs impact and has a background image.
 */
.glue-page-header--with-responsive-height-large {
  height: 31.25vw;
  min-height: 328px;
  max-height: 40vh;
}




/**
 * Public modifier class for a header with centered content. This should only
 * be used in rare cases such as a video header where the header is very tall
 * and bottom left alignment would look weird.
 */
.glue-page-header--with-centered-content .glue-page-header__content-wrapper {
  justify-content: center;
}
.glue-page-header--with-centered-content .glue-page-header__data {
  align-items: center;
}
.glue-page-header--with-centered-content .glue-page-header__data {
  text-align: center;
}
@media (max-width: 819px) {
  .glue-page-header--with-centered-content .glue-page-header__content > .glue-page-header__buttons {
    display: none;
  }
  .glue-page-header--with-centered-content .glue-page-header__content-inner .glue-page-header__buttons {
    display: flex;
  }
}

/**
 * Public modifier class for a header that is in a fast scrolling mode.
 * When scrolling fast, most animations should be disabled to not cause a laggy
 * effect of animations being slower than the scroll speed. We make an exception
 * for the sticky header when it appears and items in the sticky header fade in
 * since that doesn't feel laggy.
 */
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 33ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 66ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 99ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
  transition: 266ms cubic-bezier(0.3, 0, 0, 1) 132ms;
  opacity: 1;
}
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
  transition-property: transform, opacity;
  transform: translateY(0);
}
.glue-page-header--with-fast-scrolling:not(.glue-page-header--with-active-sticky-header) .glue-page-header__image,
.glue-page-header--with-fast-scrolling:not(.glue-page-header--with-active-sticky-header) .glue-page-header__title,
.glue-page-header--with-fast-scrolling:not(.glue-page-header--with-active-sticky-header) .glue-page-header__button {
  transition: none !important;
}
.glue-page-header--with-fast-scrolling .glue-page-header__content,
.glue-page-header--with-fast-scrolling .glue-page-header__sticky-inner,
.glue-page-header--with-fast-scrolling .glue-page-header__sponsorship {
  transition: none !important;
}

/**
 * Public modifier class for a header that should have all animations disabled.
 * This can be needed in cases where the header is completely re-rendered with
 * new DOM nodes, since that would otherwise trigger animations (it's rendered
 * with initial state, then JS kicks in and updates sticky state etc which
 * triggers animations). An example of this is when switching between playlists,
 * where we want to just immediately switch to the next playlist without
 * animations even when the remembered scroll position is far enough down to
 * trigger sticky header.
 */
.glue-page-header--with-no-animations .glue-page-header__content,
.glue-page-header--with-no-animations .glue-page-header__sticky-inner,
.glue-page-header--with-no-animations .glue-page-header__image,
.glue-page-header--with-no-animations .glue-page-header__title,
.glue-page-header--with-no-animations .glue-page-header__button {
  transition: none !important;
}

/**
 * Public modifier classes for header content wrapper without a grid.
 * This adds some padding to the left edge, so that content like buttons can
 * extend slightly outside of the edge when needed. This is also for the title
 * that is pushed slightly to the left to align better.
 */
.glue-page-header__content-wrapper--without-grid {
  margin-left: -12px;
  padding-left: 12px;
}


/**
 * Public modifier classes for header content with a small image.
 */
.glue-page-header__content--with-custom-image-size .glue-page-header__image {
  width: auto;
}

/**
 * Public modifier class for an element around the content, where the buttons
 * should always be placed to the far left, even when an image is displayed.
 */
.glue-page-header__content--with-button-placement-left {
  flex-direction: column;
}
.glue-page-header__content--with-button-placement-left .glue-page-header__data .glue-page-header__buttons {
  display: none;
}
.glue-page-header__content--with-button-placement-left > .glue-page-header__buttons {
  display: flex;
}

/**
 * Public modifier class for a background image that has just been loaded.
 */
.glue-page-header__background-image-loader--with-loading-animation {
  transition: opacity 900ms cubic-bezier(0.3, 0, 0, 1), transform 900ms cubic-bezier(0.3, 0, 0, 1);
}

/**
 * Public modifier class for a background image that has been loaded.
 */
.glue-page-header__background-image-loader--is-loaded {
  opacity: 1;
}
.glue-page-header__background-image-loader--is-loaded {
  transform: scale(1.07);
}

/**
 * Sponsored playlist class for company's logos that appear in the header.
 */
.glue-page-header--sponsored .glue-page-header__label,
.glue-page-header--sponsored .glue-page-header__title,
.glue-page-header--sponsored .glue-page-header__description,
.glue-page-header--sponsored .glue-page-header__meta-info {
  opacity: 1;
  transition: opacity 700ms cubic-bezier(0.3, 0, 0, 1);
}
.glue-page-header--sponsored .glue-page-header__spacer {
  width: 150px;
}
.glue-page-header--sponsored .glue-page-header__content {
  flex-grow: 1;
}
.glue-page-header--sponsored .glue-page-header__content .glue-page-header__data {
  justify-content: center;
}
.glue-page-header--sponsored .glue-page-header__content .glue-page-header__data {
  padding-bottom: 20px;
}
.glue-page-header--sponsored .glue-page-header__label {
  height: auto;
}
.glue-page-header--sponsored .glue-page-header__background-image-overlay-gradient {
  background: linear-gradient(to bottom, transparent, #181818 70%);
}
.glue-page-header--sponsored .glue-page-header--with-active-sticky-header .glue-page-header__sponsorship {
  opacity: 0;
  transition: opacity 166ms cubic-bezier(0.3, 0, 0, 1), transform 166ms cubic-bezier(0.3, 0, 0, 1);
}
.glue-page-header--sponsored .glue-page-header--with-active-sticky-header .glue-page-header__sponsorship {
  transform: translateY(-20px);
  transition-delay: 0ms;
}
.glue-page-header--sponsored .glue-page-header__sponsorship {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: opacity 166ms cubic-bezier(0.3, 0, 0, 1), transform 166ms cubic-bezier(0.3, 0, 0, 1);
}
.glue-page-header--sponsored .glue-page-header__sponsorship {
  transform: translateY(0);
  transition-delay: 166ms;
  margin-top: auto;
}
.glue-page-header--sponsored .glue-page-header__sponsorship .glue-page-header__label {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 16px;
  height: 22px;
  color: #ffffff;
}


.glue-page-header--sponsored .glue-page-header__sponsorship .sponsored-logo {
  position: static;
}
.glue-page-header--sponsored .sponsored-logo {
  position: absolute;
  top: 40px;
  transition: top 0.7s;
}
.glue-page-header--sponsored .sponsored-logo {
  right: 0;
}

.glue-page-header--sponsored .sponsored-logo a:hover, .glue-page-header--sponsored .sponsored-logo a:focus {
  border-bottom: none;
}
.glue-page-header--sponsored .sponsored-logo img {
  max-height: 75px;
  max-width: 140px;
}
@media (max-height: 750px) {
  .glue-page-header--sponsored .glue-page-header__background-image-overlay-gradient {
    background: linear-gradient(to bottom, transparent, #181818 50%);
  }
}
@media (max-width: 819px) {
  .glue-page-header--sponsored .sponsored-logo {
    top: 29px;
  }
}

.glue-page-header__top-bar {
  height: 104px;
  position: fixed;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.glue-page-header__top-bar {
  background: linear-gradient(#121212, #121212 48px, transparent);
}

.glue-page-header__top-bar {
  left: 0;
  right: 0;
}



.glue-page-header--with-active-sticky-header .glue-page-header__top-bar {
  height: 48px;
}

.glue-page-header--with-active-sticky-header .glue-page-header__top-bar {
  transition-property: height;
  transition-duration: 0ms;
  transition-delay: 166ms;
}

/**
 * All of the code below is deprecated in favour of the new GLUE Header code.
 * The code still exists here as it is still used by some areas of the codebase.
 */
.header {
  position: relative;
}
.header {
  background: #181818;
  margin: 0 auto;
}
.header {
  clear: left;
}


.h-main-content {
  position: relative;
}

.h-main-content {
  padding-top: 16px;
  padding-bottom: 0;
}

.h-media {
  width: 210px;
}

.h-media {
  padding-bottom: 16px;
}

.h-media {
  float: left;
}


.h-media .card {
  position: relative;
}

.h-data {
  width: 100%;
}

.h-data {
  float: left;
  margin-left: -214px;
  padding-left: 230px;
}



.h-label {
  color: #b3b3b3;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}



.h-title {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.005em;
  font-weight: var(--glue-font-weight-black);
  color: #ffffff;
  text-transform: none;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h-title {
  margin: 0;
}

.h-title a {
  color: #ffffff !important;
}
.h-title a {
  border: none !important;
}

.h-description {
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}

.h-description {
  margin-top: 4px;
}

.h-controllers {
  bottom: 16px;
  position: absolute;
}
.h-controllers .button {
  margin-right: 12px;
}


.h-search-bar {
  line-height: 36px;
}

.h-search-bar {
  border-top: 1px solid #282828;
  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 {
  position: fixed;
  z-index: 1020;
  /* spotify-events/sticky sets other values */
  max-width: 1480px;
}
.h-search-field-wrapper.sticky-top {
  background-color: #181818;
}
.h-search-field-wrapper.sticky-top {
  left: 0 !important;
  right: 0 !important;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.h-search-field-wrapper.sticky-top::after {
  content: "";
  display: table;
}
.h-search-field-wrapper.sticky-top::after {
  clear: both;
}

.h-search-wrapper {
  position: relative;
  width: 100%;
  line-height: 36px;
}

.h-search-wrapper::before {
  position: absolute;
  pointer-events: none;
}

.h-search-wrapper::before {
  margin-left: 10px;
}



.h-search-wrapper:hover::before {
  color: #ffffff;
}
.h-search-wrapper:hover .h-search::placeholder {
  color: #ffffff;
}

.h-search {
  width: 100%;
  height: 36px;
  color: #ffffff;
  display: block;
  outline: 0;
}

.h-search {
  background: transparent;
  border: 0;
  border-radius: 3px;
  padding-bottom: 0;
}

.h-search {
  padding-left: 36px;
  padding-right: 36px;
}


.focus .h-search, .h-search:focus {
  background: #404040;
}

.h-search-close {
  bottom: 0;
  display: none;
  position: absolute;
  top: 0;
  width: 36px;
}

.h-search-close {
  text-align: center;
}

.h-search-close {
  right: 0;
}


.h-search-close:hover {
  color: #ffffff;
}
.focus .h-search-close {
  display: block;
}

.h-search-suggestions {
  display: none;
  position: absolute;
  list-style: none;
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  top: 100%;
}

.h-search-suggestions {
  background: #282828;
  border-radius: 3px;
  padding: 0;
}
.focus .h-search-suggestions {
  display: block;
}

.h-search-suggestion {
  color: #b3b3b3;
}

.h-search-suggestion {
  border-radius: 3px;
  cursor: pointer;
}

.h-search-suggestion {
  padding-left: 36px;
  padding-right: 10px;
}


.h-search-suggestion:hover {
  color: #ffffff;
}
.h-search-suggestion:hover {
  background: #333333;
}

.h-search-result {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h-search-matches {
  float: right;
  padding-left: 10px;
}



.header-image {
  min-height: 320px;
  max-width: 1480px;
}

.header-image {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  background-color: black;
  border-bottom: 1px solid #282828;
}
.header-image::before {
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
}
.header-image::before {
  background: rgba(0, 0, 0, 0.6);
}
.header-image::before {
  left: 0;
  right: 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;
}

.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-image,
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-placeholder-wrapper {
  display: none;
}
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-mask {
  background-image: url("https://local_resource_host/images/station-header-wave.svg");
}
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-overlay {
  height: 50.46%;
  top: 24.77%;
  width: 50.46%;
}
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-overlay {
  left: 24.77%;
}

.glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay {
  height: 59.52%;
  top: 20.24%;
  width: 59.52%;
}
.glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay {
  border-radius: 500px;
}
.glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay {
  left: 20.24%;
}


.header-inline .h-main-content {
  padding: 0;
}
.header-inline .h-media {
  width: 134px;
}
.header-inline .h-media {
  padding: 0;
}
.header-inline .h-data {
  padding-top: 0;
}
.header-inline .h-data {
  margin-left: -134px;
  padding-left: 150px;
}

.header-inline .h-controllers {
  bottom: 0;
}
.header-inline .h-title {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.005em;
  font-weight: var(--glue-font-weight-black);
  color: #ffffff;
  text-transform: none;
  max-height: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.header-inline .h-title {
  margin-bottom: 36px;
}


.fade-in {
  animation: fadeIn 0.7s;
}



@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 819px) {
  .h-extra {
    display: none;
  }

  .h-title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.005em;
    font-weight: var(--glue-font-weight-black);
    color: #ffffff;
    text-transform: none;
  }
  

  .h-media {
    width: 130px;
  }

  .h-media {
    padding-bottom: 60px;
  }

  .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;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.h-sticky-header {
  left: 0;
}

.h-sticky-header .h-sticky-header-inner {
  overflow: hidden;
  width: 100%;
  z-index: 1020;
}
.h-sticky-header .h-sticky-header-inner {
  background-color: #181818;
  padding: 0;
}
.h-sticky-header .h-sticky-header-inner {
  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 #282828;
  padding-bottom: 16px;
  padding-top: 16px;
}
.h-sticky-header .h-sticky-container > * {
  height: 36px;
}
.h-sticky-header .h-sticky-image {
  height: 36px;
  position: relative;
  width: 36px;
}
.h-sticky-header .h-sticky-image {
  background-size: cover;
  background-position: center;
}
.h-sticky-header .h-sticky-image {
  float: left;
  margin-right: 15px;
}

.h-sticky-header .h-sticky-image .card-image {
  bottom: 0;
  top: 0;
}
.h-sticky-header .h-sticky-image .card-image {
  left: 0;
  right: 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: #ffffff;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.005em;
  font-weight: var(--glue-font-weight-black);
  color: #ffffff;
  text-transform: none;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-sticky-header .h-sticky-title {
  margin: 0;
  padding: 0;
}

.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;
}

/* stylelint-disable selector-max-type */
/**
 * Tracklists
 *
 * Lists of tracks for different purposes, customization is not possible.
 * Every tracklist has a unique set of columns and properties.
 *
 * Styleguide 90.1
 */
/* stylelint-disable selector-max-type */
/**
 * Tables
 *
 * For basic styling—light padding and only horizontal dividers—add the base class
 * <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant,
 * but given the widespread use of tables for other plugins like calendars and date
 * pickers, we've opted to isolate our custom table styles.
 *
 * Template: tables
 *
 * Styleguide 30.6
 */
table {
  max-width: 100%;
}

th {
  font-weight: var(--glue-font-weight-bold);
}

th {
  text-align: left;
}



.table {
  width: 100%;
}
.table th,
.table td {
  position: relative;
  line-height: 20px;
  vertical-align: top;
}
.table th, .table td {
  padding: 8px;
  border-top: 1px solid #282828;
}
.table tbody > tr:last-child > td {
  border-bottom: 1px solid #282828;
}
.table thead th {
  border-top: 0;
}
.table thead th {
  vertical-align: bottom;
}

/**
 * Chart list
 *
 * Used on chart view
 *
 * Template: $tracklist-chart
 * Data: demo-chart
 *
 * Styleguide 90.8
 */
.trend-mark.trend-new::before {
  content: " ";
  display: block;
  height: 10px;
  width: 10px;
}
.trend-mark.trend-new::before {
  background-color: #2e77d0;
  border-radius: 10px;
  margin: 0 auto;
}
.trend-mark.trend-equal::before {
  content: " ";
  display: block;
  height: 2px;
  width: 8px;
}
.trend-mark.trend-equal::before {
  background-color: #404040;
  margin: 0 auto;
}
.trend-mark.trend-up {
  color: #1ed760;
}
.trend-mark.trend-down {
  color: #cd1a2b;
}

/*
 * Playlist & Collection
 *
 * Shared list for playlist and collection.
 *
 * Template: $tracklist-playlist
 * Data: demo-playlist
 *
 * Styleguide 90.4
 */
@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;
  }
}
@media screen and (max-width: 720px) {
  .tracklist-playlist .tl-added-by {
    display: none;
  }
}
@media screen and (max-width: 680px) {
  .tracklist-playlist .tl-date-added {
    display: none;
  }
}
.tracklist-playlist.tracklist-playlist--with-feedback .tl-local {
  display: none;
}
@media screen and (max-width: 750px) {
  .tracklist-playlist.tracklist-playlist--with-feedback .tl-date-added {
    display: none;
  }
  .tracklist-playlist.tracklist-playlist--with-feedback th.tl-name {
    width: 120px;
  }
}
@media screen and (max-width: 600px) {
  .tracklist-playlist.tracklist-playlist--with-feedback th.tl-name {
    width: 70px;
  }
}
@keyframes loopArtists-ltr {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loopArtists-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.tracklist-playlist .tl-artists__episode__wrapper {
  display: grid;
}
.tracklist-playlist tr:not(.current) .tl-artists__episode--collapsed {
  color: #ffffff;
}
.tracklist-playlist .tl-artists__episode {
  display: none;
}
.tracklist-playlist .tl-artists__episode__wrapper:hover .tl-artists__episode {
  display: block;
}
.tracklist-playlist .tl-artists__episode__wrapper:hover .tl-artists__episode--collapsed {
  display: none;
}
.tracklist-playlist .tl-artists__episode:hover {
  animation-duration: calc(var(--artistCount) * 1.5s);
  animation-timing-function: ease-in;
  animation-name:  loopArtists-ltr ;
  animation-iteration-count: infinite;
}


/*
 * Podcast
 *
 * Used on Show entity page
 *
 * Template: $tracklist-podcast
 */
.tracklist-podcast .tl-progress {
  width: 125px;
}
.tracklist-podcast .tl-progress .row-progress {
  overflow: hidden;
  width: 100px;
  height: 4px;
}
.tracklist-podcast .tl-progress .row-progress {
  border-radius: 2px;
  background-color: #404040;
}
.tracklist-podcast .tl-progress .row-progress__bar {
  --progress: 0;
  /* [1] */
  width: calc(var(--progress) * 100%);
  height: 4px;
}
.tracklist-podcast .tl-progress .row-progress__bar {
  background-color: #2e77d0;
}
.tracklist-podcast .tl-time {
  width: 80px;
}
.tracklist-podcast .tl-cell {
  vertical-align: top;
}
.tracklist-podcast .tl-cell__fixed-height {
  height: 40px;
  display: flex;
  align-items: center;
}
.tracklist-podcast .tl-status-indicator {
  flex: 0 0 10px;
}
.tracklist-podcast .tl-status-indicator {
  margin-right: 7px;
}

.tracklist-podcast .tl-time {
  width: 85px;
}
.tracklist-podcast .tl-time .tl-cell__fixed-height {
  justify-content: flex-end;
}
.tracklist-podcast .tl-name__title {
  text-overflow: ellipsis;
  overflow: hidden;
}
.tracklist-podcast .tl-name__description {
  white-space: normal;
  color: #b3b3b3;
}
.tracklist-podcast .tl-name__description {
  margin-bottom: 16px;
}
.tracklist-podcast .tl-name__description {
  padding-right: 16px;
}

.tracklist-podcast .tl-name__description__artists {
  white-space: normal;
  color: #ffffff;
  display: grid;
  grid-gap: 8px;
  grid-auto-flow: column;
  justify-content: start;
}
.tracklist-podcast .tl-name__description__artists {
  margin-bottom: 8px;
}
.tracklist-podcast .tl-name__description__artists {
  padding-right: 16px;
}

.tracklist-podcast .tl-name__description__artists__icon::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f134";
  font-size: 16px;
  line-height: inherit;
}
.tracklist-podcast .tl-name__description__artists--clamped {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.tracklist-podcast .tl-name__description--clamped {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.tracklist-podcast .tl-name__description--scrollable {
  overflow-y: auto;
  max-height: 160px;
}

.tl-row.unavailable .tl-name__description {
  color: #404040;
}

/*
 * Search
 *
 * Search views.
 *
 * Template: $tracklist-search
 * Data: demo-search-results
 *
 * Styleguide 90.5
 */
@media screen and (max-width: 850px) {
  .tracklist-search .tl-albums {
    display: none;
  }
}
@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
 */
.tracklist-station-footer-visible {
  opacity: 1;
}
.tracklist-station-footer-visible {
  padding-top: 0;
}

.tracklist-station-footer-visible-animate {
  opacity: 1;
  transition: none 0.5s cubic-bezier(0.3, 0, 0.4, 1);
}

.tracklist-station-footer-visible-animate {
  padding-top: 0;
  transition-property: opacity, padding-top;
}

.tracklist-station-footer-hidden-position {
  opacity: 0;
}

.tracklist-station-footer-hidden-position {
  padding-top: 20px;
}

.tracklist-station-footer-hide-animate {
  opacity: 0;
  transition: none 0.125s cubic-bezier(0.3, 0, 0.4, 1);
}

.tracklist-station-footer-hide-animate {
  transition-property: opacity;
}

.tracklist-station-container::after {
  display: block;
  position: relative;
  height: 250px;
  width: 100%;
  content: "";
  pointer-events: none;
}

.tracklist-station-container::after {
  margin-top: -250px;
  background: linear-gradient(rgba(24, 24, 24, 0), #181818);
}

@media screen and (max-width: 850px) {
  .tracklist-station .tl-albums {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .tracklist-station th.tl-name {
    width: 70px;
  }
}

.tracklist-station-footer-text {
  display: block;
  color: #ffffff;
  font-size: 14px;
  pointer-events: none;
}

.tracklist-station-footer-text {
  text-align: center;
}

.tracklist-station-footer-container {
  height: 40px;
}

.tracklist-album,
.tracklist-chart,
.tracklist-basic,
.tracklist-playlist,
.tracklist-podcast,
.tracklist-popular,
.tracklist-station,
.tracklist-queue,
.tracklist-search {
  color: #b3b3b3;
  table-layout: fixed;
  width: 100%;
}

.tracklist-album, .tracklist-chart, .tracklist-basic, .tracklist-playlist, .tracklist-podcast, .tracklist-popular, .tracklist-station, .tracklist-queue, .tracklist-search {
  border-bottom: 1px solid #282828;
}

.tl-header th,
.tl-cell {
  position: relative;
}

.tl-header th, .tl-cell {
  border-top: 1px solid #282828;
}

.tl-header th, .tl-cell {
  padding: 0 0 0 12px;
}



.tl-header th {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: var(--glue-font-weight-normal);
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 28px;
  text-transform: uppercase;
  vertical-align: bottom;
}

.tl-header th {
  border-top: 0;
  cursor: default;
}



.tl-header .tl-time {
  padding-top: 0;
  padding-bottom: 0;
}
.tl-header .tl-time::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f152";
  font-size: 16px;
  line-height: inherit;
}
.tl-header .tl-popularity {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.tl-header .tl-popularity::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f150";
  font-size: 16px;
  line-height: inherit;
}
.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: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f198";
  font-size: 16px;
  line-height: inherit;
}

.tl-header-hidden {
  display: none;
}

.tl-header th:last-child {
  padding-right: 12px;
}



.sticky-clone .tl-header {
  background: #181818;
}

.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-name .tl-highlight {
  display: flex;
}

.tl-filter-highlight {
  color: #ffffff;
}

.tl-filter-highlight {
  background-color: #2e77d0;
  border-radius: 2px;
}

.tl-name__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-albums, .tl-artists, .tl-name-with-featured {
  text-align: left;
}



.tl-save {
  overflow: visible;
}

.tl-row:focus {
  outline: 0;
}

.tl-number,
.tl-empty,
.tl-play {
  width: 40px;
}

.tl-local {
  width: 40px;
}

.tl-image {
  width: 40px;
}

.tl-image {
  padding: 0;
}
.tl-image img {
  display: block;
  max-width: none;
  position: absolute;
  top: 0;
}
.tl-image img {
  left: 0;
}


.tl-time {
  text-align: right/* rtl:ignore */;
  width: 70px;
  padding-left: 0 /* rtl:ignore */;
}

.tl-listen-count {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right/* rtl:ignore */;
  width: 130px;
}

.tl-date-added {
  width: 110px;
}

.tl-time-sent {
  width: 120px;
}

.tl-popularity {
  width: 54px;
}

.tl-popularity[data-sort] {
  width: 70px;
}

.tl-explicit {
  width: 6.7em;
}

.tl-premium {
  width: 7.2em;
}

.tl-more,
.tl-save,
.tl-trend {
  width: 40px;
}

.tl-more, .tl-save, .tl-trend {
  padding: 0;
}

.tl-trend {
  text-align: center;
}

.tl-message {
  text-align: center;
}

.tl-row .button-play {
  display: none;
  height: 28px;
  line-height: 26px;
  color: #ffffff;
  transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
  width: 28px;
}

.tl-row .button-play {
  padding-top: 1px;
  border-radius: 14px;
  background: rgba(24, 24, 24, 0.7);
  transition-property: transform, box-shadow, color, background-color;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}

.tl-row .button-play {
  margin-left: -4px;
  padding-left: 28px;
  padding-right: 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: rgba(24, 24, 24, 0.7);
}
.tl-row .button-play:not(:disabled):hover:active {
  color: #b3b3b3;
}
.tl-row .button-play:not(:disabled):hover:active {
  background: rgba(24, 24, 24, 0.7);
  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);
}
.tl-row .button-play::after {
  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);
}
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
  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);
}
.tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
  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;
  bottom: 0;
}
.tl-row .button-play::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
}
.tl-row .button-play::after {
  right: 0;
  left: 0;
}

.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #ffffff, 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 #ffffff;
}
@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 #ffffff;
  }
  .tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.tl-row .button-play:not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px #535353;
}
.tl-row .button-play:not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px #535353;
}
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
  transform: scale(1.0714285714);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
    transform: scale(1.0714285714);
  }
}
.tl-row .button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: left/* rtl:ignore */;
  line-height: 28px;
  font-size: 14px;
  padding-left: 7px /* rtl:ignore */;
  width: calc(100% - 7px);
}
.tl-row .button-play::before {
  border-radius: 500px;
}
.tl-row .button-play::before {
  left: 0;
  right: 0;
}

.tl-row .button-play.button-play::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f132";
  font-size: 14px;
  line-height: 28px;
}
.tl-row .button-play.button-play.playing:not(:hover), .tl-row.playing .tl-row .button-play.button-play:not(:hover), .card.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, .card.playing .tl-row .button-play.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row .button-play.button-play.playing:not(:hover)::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover)::after, .card.playing .tl-row .button-play.button-play:not(:hover)::after {
  border-radius: 500px;
  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, .card.playing .tl-row .button-play.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row .button-play.button-play.playing: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).contextmenu-active, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.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 .button-play.button-play.playing:not(:hover):not(:disabled):hover::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):not(:disabled):hover::after, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.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 .button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.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 .button-play.button-play.playing:not(:hover):not(:disabled):hover::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):not(:disabled):hover::after, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.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, .card.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, .card.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, .card.playing .tl-row .button-play.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 14px;
  line-height: 28px;
}
.tl-row .button-play.button-play.playing:hover::before, .tl-row.playing .tl-row .button-play.button-play:hover::before, .card.playing .tl-row .button-play.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 14px;
  line-height: 28px;
}
.tl-row.playing.tl-row .button-play.button-play:not(:hover), .card.playing.tl-row .button-play.button-play:not(:hover) {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::after,
.card.playing.tl-row .button-play.button-play:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::after, .card.playing.tl-row .button-play.button-play:not(:hover)::after {
  border-radius: 500px;
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::after, .card.playing.tl-row .button-play.button-play:not(:hover)::after {
  right: 0;
  left: 0;
}

.tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.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.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.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.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px transparent;
  }
  .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):not(:disabled):hover::after, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after {
    box-shadow: inset 0 0 0 1px transparent;
  }
}
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after {
  box-shadow: inset 0 0 0 1px transparent;
}
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::before,
.card.playing.tl-row .button-play.button-play:not(:hover)::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f15e";
  font-size: 14px;
  line-height: 28px;
}
.tl-row.playing.tl-row .button-play.button-play:hover::before,
.card.playing.tl-row .button-play.button-play:hover::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f130";
  font-size: 14px;
  line-height: 28px;
}

.tl-row.contextmenu-active .tl-type__icon,
.tl-row:hover .tl-type__icon {
  display: none;
}

.tl-save .button,
.tl-more .button {
  visibility: hidden;
}

.tl-save .button:focus,
.tl-more .button:focus {
  color: #ffffff;
}

.tl-row:hover .tl-save .button,
.tl-row:hover .tl-more .button,
.tl-row.selection-focus .tl-save .button,
.tl-row.selection-focus .tl-more .button {
  visibility: visible;
}

.tl-save {
  padding: 0 10px;
}
.tl-save .button {
  width: 20px !important;
  visibility: visible;
}
.tl-save .button::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f138";
  font-size: 16px;
  line-height: inherit;
}
.tl-save .button::before {
  padding-left: 2px;
}


.tl-save .button::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f320";
  font-size: 16px;
  line-height: inherit;
}

.tl-more .button::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f12c";
  font-size: 16px;
  line-height: inherit;
}

.tl-feedback {
  width: 60px;
}

.tl-feedback {
  padding: 0 5px;
}
.tl-feedback .button {
  visibility: hidden;
  width: 24px;
}
.tl-feedback .button.button-icon-only::before {
  padding-left: 4px;
}

.tl-feedback.thumbs-down .button-thumbs-down, .tl-feedback.thumbs-down .spoticon-ban-16, .tl-feedback.thumbs-down .spoticon-ban-active-16, .tl-feedback.thumbs-down .spoticon-block-16, .tl-feedback.thumbs-down .spoticon-block-active-16, .tl-feedback.thumbs-up .button-thumbs-up, .tl-feedback.thumbs-up .spoticon-heart-active-16 {
  pointer-events: none;
  visibility: visible;
}
.tl-feedback.thumbs-down .button-thumbs-down.allows-undo, .tl-feedback.thumbs-down .spoticon-ban-16.allows-undo, .tl-feedback.thumbs-down .spoticon-ban-active-16.allows-undo, .tl-feedback.thumbs-down .spoticon-block-16.allows-undo, .tl-feedback.thumbs-down .spoticon-block-active-16.allows-undo, .tl-feedback.thumbs-up .button-thumbs-up.allows-undo, .tl-feedback.thumbs-up .spoticon-heart-active-16.allows-undo {
  pointer-events: auto;
}
.offline .tl-feedback.thumbs-down .button-thumbs-down, .offline .tl-feedback.thumbs-down .spoticon-ban-16, .offline .tl-feedback.thumbs-down .spoticon-ban-active-16, .offline .tl-feedback.thumbs-down .spoticon-block-16, .offline .tl-feedback.thumbs-down .spoticon-block-active-16, .offline .tl-feedback.thumbs-up .button-thumbs-up, .offline .tl-feedback.thumbs-up .spoticon-heart-active-16 {
  pointer-events: none;
}

.tl-feedback {
  width: 40px;
}
.tl-feedback .button-thumbs-up, .tl-feedback .button.spoticon-heart-16, .tl-feedback .button.spoticon-heart-active-16 {
  display: none;
}
.tl-feedback .button.button-thumbs-down::before, .tl-feedback .button.spoticon-ban-16::before, .tl-feedback .button.spoticon-ban-active-16::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f31E";
  font-size: 16px;
  line-height: inherit;
}
.tl-feedback .button.spoticon-ban-active-16 {
  color: #cd1a2b;
  visibility: visible;
}

.tl-row.current .tl-cell:not(.tl-number),
.tl-row.current .tl-cell a:link,
.tl-row.current .tl-highlight {
  color: #1ed760;
}
.tl-row.current .tl-feedback .button {
  pointer-events: auto;
  visibility: visible;
}
.offline .tl-row.current .tl-feedback .button {
  pointer-events: none;
  visibility: hidden;
}
.tl-row.playing .tl-type__icon {
  display: none;
}
.tl-row.playing .tl-number-wrap {
  display: none;
}
.tl-row.playing .button-play {
  display: inline-block;
}
.tl-row.selected + .tl-row .tl-cell {
  border-top-color: #181818;
}
.tl-row.selected .tl-cell {
  background-color: #333333;
  border-color: #181818;
}
.tl-row.added .tl-save .button {
  visibility: visible;
}
.tl-row.offline-waiting .tl-save .button.button-add::before, .tl-row.offline-waiting.added .tl-save .button.button-add::before, .tl-row.offline-downloading .tl-save .button.button-add::before, .tl-row.offline-downloading.added .tl-save .button.button-add::before {
  content: "";
  line-height: 32px;
  width: 18px;
}
.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-ltr 1.5s linear infinite;
}

.tl-row.thumbs-down .tl-cell,
.tl-row.thumbs-down .tl-cell a:link,
.tl-row.thumbs-down .tl-highlight, .tl-row.unavailable .tl-cell,
.tl-row.unavailable .tl-cell a:link,
.tl-row.unavailable .tl-highlight {
  color: #404040 !important;
}
.tl-row.thumbs-down .button-play, .tl-row.unavailable .button-play {
  display: none !important;
}
.tl-row.thumbs-down .tl-number-wrap, .tl-row.unavailable .tl-number-wrap {
  display: inline-block;
}
.tl-row.thumbs-down .tl-number, .tl-row.unavailable .tl-number {
  color: #404040;
}
.tl-row.local .button-add {
  visibility: hidden !important;
}
.tl-row--episode .tl-save .button {
  visibility: hidden;
}

/**
 * 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:not(.unavailable):not(.local) .tl-cell,
.offline .tl-row:not(.unavailable):not(.local) .tl-cell a:link,
.offline .tl-row:not(.unavailable):not(.local) .tl-highlight,
.offline .tl-row:not(.unavailable):not(.local) .tl-feedback button {
  color: #404040 !important;
}
.offline .tl-row:not(.unavailable):not(.local) .button-play {
  display: none !important;
}
.offline .tl-row:not(.unavailable):not(.local) .tl-number-wrap {
  display: inline-block;
}
.offline .tl-row:not(.unavailable):not(.local) .tl-number {
  color: #404040;
}
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-cell, .offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-cell {
  color: inherit !important;
}
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-cell a:link,
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-highlight, .offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-cell a:link,
.offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-highlight {
  color: #ffffff !important;
}
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded:hover .button-play, .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.playing .button-play, .offline .tl-row:not(.unavailable):not(.local).locally-playable:hover .button-play, .offline .tl-row:not(.unavailable):not(.local).locally-playable.playing .button-play {
  display: inline-block !important;
}
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded:hover .tl-number-wrap, .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.playing .tl-number-wrap, .offline .tl-row:not(.unavailable):not(.local).locally-playable:hover .tl-number-wrap, .offline .tl-row:not(.unavailable):not(.local).locally-playable.playing .tl-number-wrap {
  display: none;
}
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell,
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell a:link,
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell .tl-highlight, .offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell,
.offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell a:link,
.offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell .tl-highlight {
  color: #1ed760 !important;
}

.tl-row:hover .tl-cell, .tl-row.contextmenu-active .tl-cell {
  background: #282828;
}
.tl-row:hover .tl-message, .tl-row.contextmenu-active .tl-message {
  background: transparent;
}
.tl-row:hover .tl-highlight,
.tl-row.contextmenu-active .tl-highlight {
  color: white;
}
.tl-row:hover.playing .tl-highlight,
.tl-row.contextmenu-active.playing .tl-highlight {
  color: #1ed760;
}
.tl-row:hover .tl-number-wrap,
.tl-row.contextmenu-active .tl-number-wrap {
  display: none;
}
.tl-row:hover.unavailable .tl-number-wrap,
.tl-row.contextmenu-active.unavailable .tl-number-wrap {
  display: block;
}
.tl-row:hover .button-play,
.tl-row.contextmenu-active .button-play {
  display: inline-block;
}
.tl-row:hover .tl-more .button,
.tl-row:hover .tl-save .button,
.tl-row.contextmenu-active .tl-more .button,
.tl-row.contextmenu-active .tl-save .button {
  visibility: visible;
}
.tl-row:hover .tl-more .button:not([disabled])::before,
.tl-row:hover .tl-save .button:not([disabled])::before,
.tl-row.contextmenu-active .tl-more .button:not([disabled])::before,
.tl-row.contextmenu-active .tl-save .button:not([disabled])::before {
  color: #ffffff;
}
.tl-row:hover .tl-more .button:not([disabled]):hover::before,
.tl-row:hover .tl-save .button:not([disabled]):hover::before,
.tl-row.contextmenu-active .tl-more .button:not([disabled]):hover::before,
.tl-row.contextmenu-active .tl-save .button:not([disabled]):hover::before {
  color: #ffffff;
}
.tl-row:hover .tl-feedback .button,
.tl-row.contextmenu-active .tl-feedback .button {
  visibility: visible;
}
.tl-row:hover .tl-feedback .button::before,
.tl-row.contextmenu-active .tl-feedback .button::before {
  color: #b3b3b3;
}
.tl-row:hover .tl-feedback .button:hover::before,
.tl-row.contextmenu-active .tl-feedback .button:hover::before {
  color: #ffffff;
}
.offline .tl-row:hover .tl-feedback .button,
.offline .tl-row.contextmenu-active .tl-feedback .button {
  visibility: hidden;
}
.tl-row:hover.current .tl-highlight,
.tl-row.contextmenu-active.current .tl-highlight {
  color: #1ed760;
}
.tl-row:hover.offline-waiting .tl-save .button.button-add.hover::before, .tl-row:hover.offline-downloading .tl-save .button.button-add.hover::before,
.tl-row.contextmenu-active.offline-waiting .tl-save .button.button-add.hover::before,
.tl-row.contextmenu-active.offline-downloading .tl-save .button.button-add.hover::before {
  content: "";
}
.tl-row:hover.offline-waiting .tl-save .button.button-add.hover::before, .tl-row:hover.offline-downloading .tl-save .button.button-add.hover::before, .tl-row.contextmenu-active.offline-waiting .tl-save .button.button-add.hover::before, .tl-row.contextmenu-active.offline-downloading .tl-save .button.button-add.hover::before {
  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,
.tl-row.contextmenu-active.offline-waiting.added .tl-save .button.button-add:hover::before,
.tl-row.contextmenu-active.offline-downloading.added .tl-save .button.button-add:hover::before {
  content: "";
}

.tl-row--episode:hover .tl-save .button,
.tl-row--episode.contextmenu-active .tl-save .button {
  visibility: hidden;
}

.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:hover .tl-premium .label,
.tl-row.selection-focus .tl-explicit .label,
.tl-row.selection-focus .tl-premium .label {
  color: #b3b3b3 !important;
}

.tl-row:hover .tl-explicit .label, .tl-row:hover .tl-premium .label, .tl-row.selection-focus .tl-explicit .label, .tl-row.selection-focus .tl-premium .label {
  border-color: #404040 !important;
}

.tl-row.selection-focus-touch .tl-more .button {
  visibility: visible;
}

.tl-highlight {
  color: #ffffff;
}

.tl-featuring a,
.tl-featuring span {
  color: #b3b3b3;
}
.tl-featuring a:hover,
.tl-featuring span:hover {
  color: #e6e6e6;
}

.tl-status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
}

.tl-status-indicator {
  border-radius: 50%;
  border: 1px solid #2e77d0;
}

.tl-status-indicator {
  margin-right: 2px;
}



.tl-status-indicator--new {
  background-color: #2e77d0;
}

.tl-status-indicator--in-progress {
  background: linear-gradient(to right, #2e77d0 0%, #2e77d0 55%, rgba(46, 119, 208, 0) 55%, rgba(46, 119, 208, 0) 100%);
}



.tl-item-local {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.tl-item-local {
  text-align: center;
}

.tl-explicit .label,
.tl-premium .label {
  color: #404040;
  letter-spacing: 0;
  vertical-align: baseline;
  font-size: 10px;
}

.tl-explicit .label, .tl-premium .label {
  background: transparent;
  padding-top: 2px;
  padding-bottom: 1px;
  border: 1px solid #333333;
}

.tl-number,
.tl-time,
.tl-listen-count {
  font-feature-settings: "tnum";
  letter-spacing: 0;
}

.tl-sort-asc::after,
.tl-sort-desc::after {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  color: #1db954;
  font-size: 14px;
}

.tl-sort-asc::after, .tl-sort-desc::after {
  margin-left: 4px;
}



.tl-sort-asc::after {
  content: "\f112";
}

.tl-sort-desc::after {
  content: "\f10c";
}

.tl-attention-highlight {
  position: absolute;
  height: 42px;
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(1, 0, 0.7, 1);
  pointer-events: none;
}

.tl-attention-highlight {
  border: 2px solid #2e77d0;
}
.tl-attention-highlight.visible {
  transition: none;
  opacity: 1;
}

th[data-sort]:hover {
  color: #ffffff;
}

.pop-meter {
  width: 100%;
  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;
  position: absolute;
  width: 2px;
  height: 8px;
  top: 0;
}

.pop-meter-background::after, .pop-meter-overlay::after {
  transform: translate(0, 0.5px);
}

.pop-meter-background::after, .pop-meter-overlay::after {
  left: -4px;
}



.pop-meter-background::after {
  box-shadow: 4px 0 0 0 #404040, 8px 0 0 0 #404040, 12px 0 0 0 #404040, 16px 0 0 0 #404040, 20px 0 0 0 #404040, 24px 0 0 0 #404040, 28px 0 0 0 #404040, 32px 0 0 0 #404040, 36px 0 0 0 #404040, 40px 0 0 0 #404040, 44px 0 0 0 #404040, 48px 0 0 0 #404040;
}



.pop-meter-overlay::after {
  box-shadow: 4px 0 0 0 #b3b3b3, 8px 0 0 0 #b3b3b3, 12px 0 0 0 #b3b3b3, 16px 0 0 0 #b3b3b3, 20px 0 0 0 #b3b3b3, 24px 0 0 0 #b3b3b3, 28px 0 0 0 #b3b3b3, 32px 0 0 0 #b3b3b3, 36px 0 0 0 #b3b3b3, 40px 0 0 0 #b3b3b3, 44px 0 0 0 #b3b3b3, 48px 0 0 0 #b3b3b3;
}



/* stylelint-disable selector-max-type */
/**
 * 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
 */
@keyframes throbber-ltr {
  7% {
    box-shadow: 0 -15px white, 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: 0 -15px rgba(255, 255, 255, 0.8), 11.25px -11.25px 0 white, 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: 0 -15px rgba(255, 255, 255, 0.6), 11.25px -11.25px 0 rgba(255, 255, 255, 0.8), 15px 0 0 white, 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: 0 -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 white, 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: 0 -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 white, -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: 0 -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 white, -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0 -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 white, -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0 -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 white;
  }
  63% {
    box-shadow: 0 -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: 0 -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: 0 -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: 0 -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: 0 -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-rtl {
  7% {
    box-shadow: 0 -15px white, -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: 0 -15px rgba(255, 255, 255, 0.8), -11.25px -11.25px 0 white, -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: 0 -15px rgba(255, 255, 255, 0.6), -11.25px -11.25px 0 rgba(255, 255, 255, 0.8), -15px 0 0 white, -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: 0 -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 white, 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: 0 -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 white, 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: 0 -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 white, 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0 -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 white, 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0 -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 white;
  }
  63% {
    box-shadow: 0 -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: 0 -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: 0 -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: 0 -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: 0 -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 throbberLarge-ltr {
  7% {
    box-shadow: 0 -26px white, 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: 0 -26px rgba(255, 255, 255, 0.8), 19.5px -19.5px 0 white, 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: 0 -26px rgba(255, 255, 255, 0.6), 19.5px -19.5px 0 rgba(255, 255, 255, 0.8), 26px 0 0 white, 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: 0 -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 white, 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: 0 -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 white, -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: 0 -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 white, -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0 -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 white, -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0 -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 white;
  }
  63% {
    box-shadow: 0 -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: 0 -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: 0 -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: 0 -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: 0 -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-rtl {
  7% {
    box-shadow: 0 -26px white, -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: 0 -26px rgba(255, 255, 255, 0.8), -19.5px -19.5px 0 white, -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: 0 -26px rgba(255, 255, 255, 0.6), -19.5px -19.5px 0 rgba(255, 255, 255, 0.8), -26px 0 0 white, -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: 0 -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 white, 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: 0 -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 white, 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: 0 -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 white, 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  49% {
    box-shadow: 0 -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 white, 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
  }
  56% {
    box-shadow: 0 -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 white;
  }
  63% {
    box-shadow: 0 -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: 0 -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: 0 -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: 0 -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: 0 -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 {
  position: relative;
  height: 40px;
  width: 40px;
}
.throbber div {
  position: absolute;
  top: 50%;
  height: 8px;
  width: 8px;
}
.throbber div {
  background: transparent;
  border-radius: 50%;
}
.throbber div {
  left: 50%;
  margin: -4px 0 0 -4px;
  box-shadow: 0 -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);
  animation:  throbber-ltr 1.5s ease infinite;
}


.throbber-large {
  position: relative;
  height: 70px;
  width: 70px;
}
.throbber-large div {
  position: absolute;
  top: 50%;
  height: 12px;
  width: 12px;
}
.throbber-large div {
  background: transparent;
  border-radius: 50%;
}
.throbber-large div {
  left: 50%;
  margin: -6px 0 0 -6px;
  box-shadow: 0 -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);
  animation:  throbberLarge-ltr 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 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;
  top: 50%;
}
.throbber-initial {
  margin-top: -35px;
}
.throbber-initial {
  left: 50%;
  margin-left: -35px;
}

.throbber-initial div {
  position: absolute;
  top: 50%;
  height: 12px;
  width: 12px;
}
.throbber-initial div {
  background: transparent;
  border-radius: 50%;
}
.throbber-initial div {
  left: 50%;
  margin: -6px 0 0 -6px;
  box-shadow: 0 -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);
  animation:  throbberLarge-ltr 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;
}
.error-and-offline {
  text-align: center;
  background-image: url("https://local_resource_host/images/error-bg.jpg");
  background-size: cover;
  background-position: center;
}
.error-and-offline {
  left: 0;
}

.error-and-offline::before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
}
.error-and-offline::before {
  background-color: rgba(0, 0, 0, 0.7);
}
.error-and-offline::before {
  left: 0;
  right: 0;
}

.error-and-offline > .container {
  position: relative;
  top: 50%;
}
.error-and-offline > .container {
  transform: translateY(-50%);
}
.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 .offline-content-title,
.error-and-offline .error-content-title {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.005em;
  font-weight: var(--glue-font-weight-black);
  color: #ffffff;
  text-transform: none;
}

.error-and-offline .error-version {
  position: absolute;
  bottom: 0;
}
.error-and-offline .error-version {
  margin: 0 7px;
}
.error-and-offline .error-version {
  right: 0;
}


.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;
}

.interaction-debug {
  /* stylelint-disable selector-max-type */
}
.interaction-debug.interaction-debug-wireframes {
  /* stylelint-disable selector-max-type */
  /*
  This file contains styles not directly related to debugger,
  but they make wireframes looks better by removing some margins, paddings, etc.,
  which are set by UI frameworks or added by app developers.
  */
}
.interaction-debug.interaction-debug-wireframes [data-interaction-target], .interaction-debug.interaction-debug-wireframes a[data-interaction-target] {
  border: 3px solid red !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-context] {
  border: 2px solid gray !important;
  padding: 15px !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-context]::before {
  color: white !important;
  content: attr(data-interaction-context) !important;
  display: table !important;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 14px !important;
  position: relative !important;
  top: -16px !important;
  z-index: 2147483647;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-context]::before {
  background: gray !important;
  padding: 4px !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-context]::before {
  left: -15px !important;
}

.interaction-debug.interaction-debug-wireframes [data-interaction-target][data-interaction-context],
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *[data-interaction-target] {
  outline: 3px solid red !important;
  outline-offset: -7px !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-list] {
  counter-reset: interaction-context !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > * {
  border: 2px solid gray !important;
  padding: 15px !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before {
  color: white !important;
  content: counter(interaction-context) !important;
  counter-increment: interaction-context !important;
  display: table !important;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 14px !important;
  position: relative !important;
  top: -16px !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before {
  background: gray !important;
  padding: 4px !important;
}
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before {
  left: -15px !important;
}

.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *:first-child::before {
  counter-increment: none !important;
}
.interaction-debug.interaction-debug-wireframes a:not([data-interaction-target]) {
  border: 3px solid #a0940e !important;
}
.interaction-debug.interaction-debug-wireframes button:not([data-interaction-target]) {
  border: 3px solid #a0940e !important;
}
.interaction-debug.interaction-debug-wireframes [data-sort]:not([data-interaction-target]) {
  border: 3px solid #a0940e !important;
}
.interaction-debug.interaction-debug-wireframes .card-puff__link[data-interaction-target].card-hit-area-counter-scale {
  border: 3px solid red !important;
}
.interaction-debug.interaction-debug-wireframes .glue-page-header--with-navbar .glue-page-header__content-wrapper {
  height: auto !important;
}
.interaction-debug.interaction-debug-wireframes .navbar-fixed-wrapper {
  height: auto !important;
}
.interaction-debug.interaction-debug-wireframes .navbar.sticky-top {
  background-color: #121212 !important;
}
.interaction-debug.interaction-debug-wireframes .scroll-container-enabled .tl-row {
  will-change: unset !important;
}
.interaction-debug.interaction-debug-wireframes .card-info-wrapper {
  height: auto !important;
}
.interaction-debug.interaction-debug-wireframes table {
  border-collapse: collapse !important;
}
.interaction-debug.interaction-debug-wireframes a {
  display: block !important;
}
.interaction-debug.interaction-debug-wireframes tr[data-interaction-context]::before {
  display: none !important;
}
.interaction-debug.interaction-debug-wireframes .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.interaction-debug .interaction-debug-top-level {
  padding-right: 300px;
}

.interaction-debug .interaction-debugger-panel-root {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px;
  word-break: break-word;
}
.interaction-debug .interaction-debugger-panel-root {
  right: 0;
}

.interaction-debug [data-interaction-target].highlighted {
  visibility: visible !important;
  outline: 5px solid yellow !important;
}
.interaction-debug .highlight-overlay {
  opacity: 0.7;
  z-index: 2147483647;
}
.interaction-debug .highlight-overlay {
  background: red;
}
.interaction-debug .interaction-debugger-panel {
  position: absolute;
  user-select: text;
}
.interaction-debug .interaction-debugger-panel {
  padding: 0 3px;
}
.interaction-debug .interaction-debugger-panel {
  right: 0;
}

.interaction-debug .key-value-pair {
  font-weight: bold;
  color: #fff;
}
.interaction-debug .key-value-pair span {
  color: #f00;
}
.interaction-debug .debug-section {
  margin-top: 40px;
}