/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

html{font-size:calc(14*1px)}

.body--yqPOx,body,html{line-height:calc(24/14)}

.body--yqPOx,body{font-size:1rem;font-weight:500;font-stretch:normal;color:var(--snow-white);-webkit-font-smoothing:antialiased}

.body-font--ecl2C,button,html,input,select,small,textarea{font-family:nationale,nationale-regular,Helvetica,sans-serif}

.osx-old--z6jSX .body-font--ecl2C,.osx-old--z6jSX body,.osx-old--z6jSX button,.osx-old--z6jSX input,.osx-old--z6jSX select,.osx-old--z6jSX small,.osx-old--z6jSX textarea{font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif}

.h1--1mE8h,.h2--1MzzX,.h3--2jZgG,.h4--3RUJ8,.h5--wKOWb,.h6--2BluV,.h7--znzQC,h1,h2,h3,h4,h5,h6{font-weight:inherit;font-style:normal;text-rendering:geometricPrecision}

.h1--1mE8h,h1{margin:1em 0 .929rem;font-size:calc(48*calc(1rem/14));line-height:calc(56*calc(1rem/14));letter-spacing:-.04em;font-weight:600}

.h2--1MzzX,h2{font-size:calc(32*calc(1rem/14));line-height:calc(40*calc(1rem/14));letter-spacing:-.03em;font-weight:600}

.h3--2jZgG,h3{font-size:calc(24*calc(1rem/14));line-height:calc(32*calc(1rem/14));letter-spacing:-.01em;font-weight:500}

.h4--3RUJ8,h4{margin:.714em 0 .571rem}

.h4--3RUJ8,.subtitle--2mpDt,h4{font-size:calc(16*calc(1rem/14))}

.h4--3RUJ8,.subtitle2--3FS_R,.subtitle--2mpDt,h4{line-height:calc(24*calc(1rem/14));letter-spacing:0;font-weight:500}

.subtitle2--3FS_R{font-size:calc(15*calc(1rem/14))}

.overline--2IVS0{text-transform:uppercase;font-size:calc(12*calc(1rem/14));line-height:calc(12*calc(1rem/14));letter-spacing:.036rem;font-weight:600}

.h5--wKOWb,h5{font-size:1.714rem}

.h6--2BluV,h6{margin:.357em 0 .286rem;font-size:1.286rem}

.h7--znzQC{font-size:.857rem;font-weight:600}

.sameSizeHeader--2fKAD{font-size:1em;display:inline;font-weight:600;margin:-2px 4px 0 0;padding:0}

.sameSizeHeader--2fKAD:after{content:" "}

.boldText--1GHek{font-weight:600}

.smallText--3XLLU{font-size:calc(12*calc(1rem/14));line-height:calc(20*calc(1rem/14))}

.normalText--1uzZj{font-size:calc(14*calc(1rem/14))}

.largeText--9V-7c{font-size:calc(16*calc(1rem/14))}

.iLink--1UtI4{font-style:italic;text-decoration:underline;margin:1em 0}

.iLink--1UtI4:hover{text-decoration:none}

.detail-view-title--2iQ-d{text-align:left;color:var(--snow-white)}

.detail-view-title-scroll--pbozD{text-align:left;color:var(--snow-white)}

.featured-module-title--3ibkm{text-align:left;color:var(--snow-white)}

.featured-module-overlay--xMlRP,.section-header-tabbed--18p1W,.suggestions-header--1LuoK{text-align:left;color:var(--snow-white)}

.featured-module-sub-title--2BZrB{color:hsla(0,0%,100%,.5)}

.modalText--3wAT_,.modalTitle--gj_hv{color:var(--snow-white)}

.modalLongText--1bK35{color:var(--snow-white)}

.modalLongText--1bK35 p+p{margin-top:1.65rem}

.nav-bar-title--xJT0E{text-align:left;color:var(--snow-white)}

.detail-view-button-text--1vUXh{text-align:center;color:var(--snow-white)}

.detail-view-sub-title--30Nji{text-align:left}

.about-version-number--1_3er,.detail-view-sub-title--30Nji{color:var(--snow-white)}

.cell-header--1w6vj,.module-title--1zO-5,.sidebar-section--3C8Oy{text-align:left;color:var(--snow-white)}

.cell-detail--4Ubbq,.module-sub-title--2oTgF{text-align:left;color:var(--glass-white-2)}

.module-heading-option--26enM{text-align:right;color:var(--snow-white)}

.context-menu---6VKC,.trackcells--2A4nF{text-align:left;color:var(--snow-white)}

.helpText--2ZXMv{color:var(--glass-white-2)}

.sidebar-header--2OQgP{text-align:left;color:var(--glass-white-2)}

.trackcells-sort--1D0MH{text-align:center;color:var(--glass-white-2)}

.video-duration--1Vcbw{text-align:center;color:var(--snow-white)}

.featured-module-content-type--2-WOI{text-align:left;color:var(--cyan-blue)}

.concert-month--2dVIv{text-align:center;text-transform:uppercase;color:var(--cyan-blue)}

.concert-day--31QAY{text-align:center;color:var(--snow-white)}

.textAction--2Pxri{color:var(--glass-white-2)}

.textAction--2Pxri:hover{text-decoration:underline}

.ellipsisText--2MEOn{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

.settingsQualityText--3B9X6{color:var(--glass-white-2);font-size:.9rem}

.selectableText--Daco0{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

.radioMixesText--2Zv7O{font-size:1.286rem;font-weight:800}

.mix--21Lfe{font-weight:900;font-size:calc(14*calc(1rem/14));line-height:calc(16*calc(1rem/14));letter-spacing:-.03em}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}

/* ==========================================================================
   Base Type
   ========================================================================== */

:root {
  --baseFontSize: 14;
  --baseLineHeight: calc(24 / var(--baseFontSize));
  --remRatio: calc(1rem / var(--baseFontSize));
}

html {
  font-size: calc(var(--baseFontSize) * 1px);
  line-height: var(--baseLineHeight);
}

body,
.body--29z8d {
  font-size: 1rem; /* 14px */
  font-weight: 500;
  font-stretch: normal;
  line-height: var(--baseLineHeight);
  color: var(--snow-white);
  -webkit-font-smoothing: antialiased;
}

/*
.osx body {
  font-weight: 500;
} */

html,
button,
input,
select,
textarea,
small,
.body-font--3-aHn {
  font-family: 'nationale', 'nationale-regular', 'Helvetica', sans-serif;
}

/*
  WIMPWC-6398: Font issues OS X "El Capitan"
  ------------
  It seems that the Nationale font is only able to properly fallback
  in "El Capitan" for missing glyps with the 'regular' variant set.
  Since we still want to have a difference between font weights,
  we decided to use the default system font for older OS X versions.
  This is checked with Aziz.
*/

.osx-old--3j4X9 body,
.osx-old--3j4X9 button,
.osx-old--3j4X9 input,
.osx-old--3j4X9 select,
.osx-old--3j4X9 textarea,
.osx-old--3j4X9 small,
.osx-old--3j4X9 .body-font--3-aHn {
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Headings and paragraph
   ========================================================================== */

/* stylelint-disable selector-list-comma-newline-after  */

h1,
.h1--1IWxF,
h2,
.h2--34NNP,
h3,
.h3--11p-9,
h4,
.h4--3-9h6,
h5,
.h5--2Ht0i,
h6,
.h6--2SeKS,
.h7--1ot1p {
  font-weight: inherit;
  font-style: normal;
  text-rendering: geometricPrecision;
}

/* stylelint-enable */

/* rem pixel ratio 0.0714375 */

h1,
.h1--1IWxF {
  margin: 1em 0 0.929rem; /* 14px & 13px */
  font-size: calc(48 * var(--remRatio));
  line-height: calc(56 * var(--remRatio));
  letter-spacing: calc(-4em / 100);
  font-weight: 600;
}

h2,
.h2--34NNP {
  font-size: calc(32 * var(--remRatio));
  line-height: calc(40 * var(--remRatio));
  letter-spacing: calc(-3em / 100);
  font-weight: 600;
}

h3,
.h3--11p-9 {
  font-size: calc(24 * var(--remRatio));
  line-height: calc(32 * var(--remRatio));
  letter-spacing: calc(-1em / 100);
  font-weight: 500;
}

h4,
.h4--3-9h6 {
  margin: 0.714em 0 0.571rem; /* 10px & 8px */
  font-size: calc(16 * var(--remRatio));
  line-height: calc(24 * var(--remRatio));
  letter-spacing: 0;
  font-weight: 500;
}

.subtitle--3fqMm {
  font-size: calc(16 * var(--remRatio));
  line-height: calc(24 * var(--remRatio));
  letter-spacing: 0;
  font-weight: 500;
}

.subtitle2--1Mcz2 {
  font-size: calc(15 * var(--remRatio));
  line-height: calc(24 * var(--remRatio));
  letter-spacing: 0;
  font-weight: 500;
}

.overline--1txAA {
  text-transform: uppercase;
  font-size: calc(12 * var(--remRatio));
  line-height: calc(12 * var(--remRatio));
  letter-spacing: 0.036rem;
  font-weight: 600;
}

h5,
.h5--2Ht0i {
  font-size: 1.714rem; /* 24px */ /* TODO Only used for ui-tooltip? */
}

h6,
.h6--2SeKS {
  margin: 0.357em 0 0.286rem; /* 5px && 4px */
  font-size: 1.286rem; /* 18px */ /* TODO adjust for new design? */
}

.h7--1ot1p {
  font-size: 0.857rem; /* 12px */
  font-weight: 600;
}

.sameSizeHeader--P9JQq {
  font-size: 1em; /* Uses em (not rem) to make it the same size as the other text in container */
  display: inline;
  font-weight: 600;
  /* negative margin-top to account for the font-weight 600 which increases the rendered text size. margin-right to act as a ' ' between header and text. */
  margin: -2px 4px 0 0;
  padding: 0
}

.sameSizeHeader--P9JQq::after {
    content: ' ';
  }

.boldText--2oY5Q {
  font-weight: 600;
}

.smallText--3wS5Q {
  font-size: calc(12 * var(--remRatio)); /* 12px */
  line-height: calc(20 * var(--remRatio)); /* 12px */
}

.normalText--3c654 {
  font-size: calc(14 * var(--remRatio)); /* 14px */
}

.largeText--2w9Af {
  font-size: calc(16 * var(--remRatio)); /* 16px */
}

.iLink--26Qj9 {
  font-style: italic;
  text-decoration: underline;
  margin: 1em 0; /* 14px */
}

.iLink--26Qj9:hover {
  text-decoration: none;
}

/* ***************** */

/*  from new design  */

/* ***************** */

/* Text styles */

.detail-view-title--r4XkW {
  text-align: left;
  color: var(--snow-white);
}

.detail-view-title-scroll--eAG-X {
  text-align: left;
  color: var(--snow-white);
}

.featured-module-title--3QE8h {
  text-align: left;
  color: var(--snow-white);
}

.section-header-tabbed--dNJtG {
  text-align: left;
  color: var(--snow-white);
}

.featured-module-overlay--3xvgD,
.suggestions-header--35Ues {
  text-align: left;
  color: var(--snow-white);
}

.featured-module-sub-title--1nEDF {
  color: rgba(255, 255, 255, 0.5);
}

.modalTitle--3hVXy {
  color: var(--snow-white);
}

.modalText--3hxG5 {
  color: var(--snow-white);
}

.modalLongText--3J_Bd {
  color: var(--snow-white)
}

.modalLongText--3J_Bd p + p {
    margin-top: 1.65rem;
  }

.nav-bar-title--1VftT {
  text-align: left;
  color: var(--snow-white);
}

.detail-view-button-text--YshJ7 {
  text-align: center;
  color: var(--snow-white);
}

.detail-view-sub-title--2l4PN {
  text-align: left;
  color: var(--snow-white);
}

.about-version-number--1tibU {
  color: var(--snow-white);
}

.sidebar-section--3gcxc {
  text-align: left;
  color: var(--snow-white);
}

.cell-header--1p9PA,
.module-title--IE4Wi {
  text-align: left;
  color: var(--snow-white);
}

.cell-detail--1HUd6,
.module-sub-title--1z0Vp {
  text-align: left;
  color: var(--glass-white-2);
}

.module-heading-option--_kK88 {
  text-align: right;
  color: var(--snow-white);
}

.trackcells--3HsQx {
  text-align: left;
  color: var(--snow-white);
}

.context-menu--6jWat {
  text-align: left;
  color: var(--snow-white);
}

.helpText--2BqtK {
  color: var(--glass-white-2);
}

.sidebar-header--V_zHv {
  text-align: left;
  color: var(--glass-white-2);
}

.trackcells-sort--HKhOy {
  text-align: center;
  color: var(--glass-white-2);
}

.video-duration--2Fko8 {
  text-align: center;
  color: var(--snow-white);
}

.featured-module-content-type--1w7KL {
  text-align: left;
  color: var(--cyan-blue);
}

.concert-month--1tV3q {
  text-align: center;
  text-transform: uppercase;
  color: var(--cyan-blue);
}

.concert-day--2g6Ni {
  text-align: center;
  color: var(--snow-white);
}

.textAction--20e3b {
  color: var(--glass-white-2)
}

.textAction--20e3b:hover {
    text-decoration: underline;
  }

.ellipsisText--DC8f6 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.settingsQualityText--3NWBK {
  color: var(--glass-white-2);
  font-size: 0.9rem;
}

.selectableText--37UUV {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.radioMixesText--dOFtx {
  font-size: 1.286rem; /* 16px */
  font-weight: 800;
}

.mix--3llCo {
  font-weight: 900;
  font-size: calc(14 * var(--remRatio));
  line-height: calc(16 * var(--remRatio));
  letter-spacing: calc(-3em / 100);
}

.sidebar--2_gw0{flex-grow:1;background-color:var(--gray-6);overflow-y:auto;contain:strict}

.section--1iW1v{box-sizing:border-box;margin:32px 0 0}

.headerItem--3auYW{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 22px}

.headerLink--OryxN{text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

.homeItem--35cRx{}

.item--3_8nW{display:flex;align-items:center;height:3.15rem;padding:0 12px;position:relative;margin:0 12px;border-radius:8px}

.item--3_8nW:hover .iconPlus--13wHf{background-color:var(--glass-white-1-hover)}

.item--3_8nW.playingItem--1wk8T svg{width:24px;height:24px;fill:var(--cyan-blue)}

.activeItem--2XwBC,.activeItem--2XwBC .playlistItem--16Xua,.section--1iW1v.playingItem--1wk8T{color:var(--cyan-blue)}

.activeItem--2XwBC svg,.activeItem--2XwBC .playlistItem--16Xua svg,.section--1iW1v.playingItem--1wk8T svg{fill:currentColor}

.icon--1MKOY{min-width:calc(24*var(--remRatio));min-height:calc(24*var(--remRatio));width:calc(24*var(--remRatio));height:calc(24*var(--remRatio))}

.icon--1MKOY,.iconSmall--1JlGP{margin-right:1rem;fill:var(--glass-white-2)}

.iconSmall--1JlGP{width:calc(14*var(--remRatio));height:calc(14*var(--remRatio))}

.item--3_8nW:hover .icon--1MKOY,.item--3_8nW:hover .iconSmall--1JlGP,.item--3_8nW:hover .profileIcon--of4E9{fill:var(--glass-white-2-hover)}

.iconRight--3Smgo{margin-right:22px}

.iconPlus--13wHf{background-color:var(--glass-white-1);border-radius:50%;margin-right:1rem;width:1.7143rem;min-width:1.7143rem;fill:var(--snow-white)}

.section--1iW1v .iconContextButton--2TRbO{width:22px;height:22px;color:var(--glass-white-2);transition:color .15s ease}

.section--1iW1v .iconContextButton--2TRbO svg{fill:currentColor}

.section--1iW1v .iconContextButton--2TRbO:hover{color:var(--glass-white-2-hover)}

.profileName--3dYg0{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:125px}

.userLoggedIn--3jqOa{margin-top:14px;height:50px;contain:strict;margin-bottom:-16px}

.userLoggedOut--3zW3V{padding:14px 22px 0;display:flex;flex-direction:column}

.button--2Auvf{margin:8px 0}

.iconLogo--1CIsW{width:32px;height:32px;fill:var(--snow-white)}

.image--J23eq{min-width:100%;max-width:100%;min-height:100%;border-radius:100%}

.profileIconWrapper--2fP1t{position:absolute;width:22px;height:22px;right:10px;top:50%;margin-top:-11px;pointer-events:none}

.profileIcon--of4E9{fill:var(--glass-white-2);width:100%;height:100%}

.playlistItem--16Xua{color:var(--snow-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s;opacity:1}

.playingItem--1wk8T .playlistItem--16Xua{flex:1 1}

.section--1iW1v a:link:hover,.userLoggedIn--3jqOa a:link:hover{text-decoration:none}

.indicateAddToCollection--3HIMB{opacity:1!important}

.isOver--29due .indicateAddToCollection--3HIMB{background-color:var(--gray-5)}

.indicateUndroppable--T8VXu,.indicateUndroppableSection--W_8dW a{opacity:.25}

.indicateHoveringDroppable--uyMgm,.item--3_8nW:hover{background-color:var(--gray-5)}

.responsiveText--1ezJA,.responsiveTextAlwaysShown--vIvpr{white-space:nowrap;text-overflow:ellipsis;min-width:40px;overflow-x:hidden;margin:0 8px 0 0}

@media (max-width:875px){.userLoggedOut--3zW3V{padding-left:14px}.profileIcon--of4E9,.profileName--3dYg0,.responsiveText--1ezJA{display:none}.responsiveIcon--G25ud .icon--1MKOY{display:inline}.icon--1MKOY,.iconPlus--13wHf{margin:0}.sidebarWrapper:hover .profileIcon--of4E9,.sidebarWrapper:hover .profileName--3dYg0,.sidebarWrapper:hover .responsiveText--1ezJA{display:inline}.sidebarWrapper:hover .responsiveIcon--G25ud .icon--1MKOY{display:none}.sidebarWrapper:hover .icon--1MKOY,.sidebarWrapper:hover .iconPlus--13wHf{margin-right:1rem}}

@media (min-width:875px){.responsiveIcon--G25ud .icon--1MKOY{display:none}}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.button--FoJMR{align-items:center;background-color:var(--glass-white-1);display:inline-flex;justify-content:center;border-radius:12px;height:48px;line-height:49px;padding:0 24px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .35s ease;min-height:0;min-width:0}

.button--FoJMR:hover{background-color:var(--glass-white-1-hover)}

[data-whatinput=mouse] .button--FoJMR{outline:none}

.button--FoJMR:disabled{opacity:.5}

.button--FoJMR:link:hover{text-decoration:none}

.blue--wD-gm{color:var(--cyan-blue)}

.button--FoJMR>span{margin-left:8px}

.button--FoJMR>svg,.icon--1fBUm{display:inline-block;fill:var(--snow-white);color:var(--snow-white);height:24px;position:relative;width:24px}

.icon--1fBUm svg{display:block;width:inherit;height:inherit}

.button--FoJMR.iconButton--GlLyz{border-radius:100%;min-width:48px;min-height:48px;padding:0}

.iconButton--GlLyz .icon--1fBUm{margin:0}

.text--1rriq{margin-left:8px}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.profilePicture--lPH85{overflow:hidden;background:var(--gray-5);border-color:var(--midnight-black);padding:0;border-radius:100%}

.profilePicture--lPH85 svg circle{fill:var(--gray-4)}

.profilePicture--lPH85 svg text{fill:var(--glass-white-2)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.svgWrapper--34O-P{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}

.svgWrapper--34O-P svg{width:100%;height:100%}

.svgWrapper--34O-P circle{fill:var(--gray-6)}

.svgWrapper--34O-P text{font-size:75px;fill:var(--gray-4);font-weight:600;text-transform:uppercase}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.image--2STXf{display:block;contain:layout;background-color:var(--gray-7);border:0}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.button--1-tcZ{width:24px;height:24px;color:var(--glass-white-2);padding:0;transition:color .35s ease}

.button--1-tcZ svg{fill:currentColor}

.button--1-tcZ:hover{color:var(--glass-white-2-hover)}
@-webkit-keyframes fadeIn--1Gkr7{0%{opacity:0}to{opacity:1}}@keyframes fadeIn--1Gkr7{0%{opacity:0}to{opacity:1}}@-webkit-keyframes dashProgress--LEtZB{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes dashProgress--LEtZB{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes diamondsAreForEver--33Mom{0%{-webkit-transform:scale(.01) rotate(45deg);transform:scale(.01) rotate(45deg)}50%{-webkit-transform:scale(1) rotate(45deg);transform:scale(1) rotate(45deg)}to{-webkit-transform:scale(.01) rotate(45deg);transform:scale(.01) rotate(45deg)}}@keyframes diamondsAreForEver--33Mom{0%{-webkit-transform:scale(.01) rotate(45deg);transform:scale(.01) rotate(45deg)}50%{-webkit-transform:scale(1) rotate(45deg);transform:scale(1) rotate(45deg)}to{-webkit-transform:scale(.01) rotate(45deg);transform:scale(.01) rotate(45deg)}}.fadeInAnimation--3sz0x{-webkit-animation-name:fadeIn--1Gkr7;animation-name:fadeIn--1Gkr7}.dashProgressAnimation--9M4w0{-webkit-animation-name:dashProgress--LEtZB;animation-name:dashProgress--LEtZB}.diamondsAreForEverAnimation--3FkVN{-webkit-animation-name:diamondsAreForEver--33Mom;animation-name:diamondsAreForEver--33Mom}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.logo--3p90_{display:inline-block;padding:14px 3px;text-align:center;width:72px;line-height:23px;height:44px;-webkit-animation:fadeIn--1Kz9T 3.9s ease;animation:fadeIn--1Kz9T 3.9s ease}

.logo--3p90_.animated--3lht_ .diamond--2vJIn{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}

@-webkit-keyframes fadeIn--1Kz9T{0%{opacity:0}90%{opacity:0}to{opacity:1}}

@keyframes fadeIn--1Kz9T{0%{opacity:0}90%{opacity:0}to{opacity:1}}

.small--1mHIX{height:24px;line-height:14px;width:48px}

.small--1mHIX>div{height:10px;margin:0 2px;width:10px}

.large--16mcu{width:87px;line-height:31px;height:52px}

.large--16mcu>div{height:21px;margin:0 4px;width:21px}

.diamond--2vJIn{-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:0;animation-iteration-count:0;-webkit-animation-delay:3.6s;animation-delay:3.6s;background-color:var(--snow-white);display:inline-block;height:16px;margin:0 3px;opacity:1;-webkit-transform:rotate(45deg);transform:rotate(45deg);vertical-align:top;width:16px}

.diamond1--2Fc98{-webkit-animation-delay:0ms;animation-delay:0ms}

.diamond2--YX30D{-webkit-animation-delay:75ms;animation-delay:75ms}

.diamond3--oTLyz{-webkit-animation-delay:175ms;animation-delay:175ms}

.diamond4--2kQcO{-webkit-animation-delay:275ms;animation-delay:275ms}
.container--mevF9{height:100%;width:100%;display:flex;justify-content:center;align-items:center}
.outer--3cife{display:flex;height:100%;width:100%;justify-content:space-around;align-items:center}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.item--3F2C3{color:var(--glass-white-2);padding:0 4px;white-space:pre}

.activeItem--ZaMvn{color:var(--snow-white)}

.activeItem--ZaMvn,.linkItem--1E6NK{}

.activeLinkItem--3drLM{}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.container--1dqTQ{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}

.divider--2294s{color:var(--glass-white-2)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.container--9Fo1X{border-radius:8px;background-color:var(--glass-white-1);display:flex;align-items:center;padding:0 7px;transition:background-color .2s ease-out;cursor:text}

.container--9Fo1X.highlighted--8fBL4{background-color:var(--snow-white)}

.container--9Fo1X.highlighted--8fBL4 .searchField--uWqyP{color:var(--black)}

.container--9Fo1X.highlighted--8fBL4 .searchField--uWqyP::-ms-input-placeholder{color:var(--gray-4)}

.container--9Fo1X.highlighted--8fBL4 .searchField--uWqyP::placeholder{color:var(--gray-4)}

.container--9Fo1X.highlighted--8fBL4 .clearSearchIcon--3lnNI,.container--9Fo1X.highlighted--8fBL4 .searchIcon--3B8yF{fill:var(--black)}

.clearSearchIcon--3lnNI,.searchIcon--3B8yF{fill:var(--snow-white);width:24px;height:24px;flex-shrink:0}

.searchField--uWqyP{height:36px;margin:0 8px;background:transparent;border:0;flex-grow:1;color:var(--snow-white);padding:0}

.searchField--uWqyP::-ms-input-placeholder{color:var(--glass-white-2)}

.searchField--uWqyP::placeholder{color:var(--glass-white-2)}

.clearSearchButton--3hV6U{height:24px;padding:0}
.button--1CS74,.container--3s2l4{display:flex}.button--1CS74{padding:0;align-items:center}.backwardButton--icx5k{margin-right:8px}.forwardButton--3e9vG{}.button--1CS74[disabled]{opacity:.5}.icon--2WIxM{fill:#fff;width:24px;height:24px}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.notification--1vSvk{opacity:0;background-color:var(--raspberry-pink);border-radius:8px;display:inline-flex;align-items:center;box-shadow:0 10px 16px 0 rgba(0,0,0,.5);margin-top:8px;padding:12px 16px;clear:left;float:left;line-height:1.43}

.notification--1vSvk a{text-decoration:underline}

.entered--3hIPp{opacity:1}

.entering--q1hlp{animation:fadeIn--nlVlr .5s forwards}

.exiting--2_kw4{animation:fadeOut--7L85W .5s forwards}

@keyframes fadeIn--nlVlr{0%{opacity:0}to{opacity:1}}

@keyframes fadeOut--7L85W{0%{opacity:1}to{opacity:0}}

.header--3Sxwx{}

.separator--1o4Jq{width:1px;height:28px;flex-shrink:0;opacity:.3;background-color:var(--snow-white);margin-left:16px;margin-top:-4px;margin-bottom:-4px}

.button--38l1l{margin:0;padding:0 0 0 16px}

.primaryButton--34-wA{}
:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}
.notificationWrapper--2lyVW{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);text-align:left;z-index:var(--z-index-notifications);display:flex;flex-direction:column;align-items:center}
.aboveFooter--2E36N{bottom:116px}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}

.fillingBlock--3jNp4{display:block;height:100%;width:100%}

.range--375_j,.wrapper--1N466{position:relative}

.range--375_j{background-color:#4d4d4d;contain:strict;overflow:hidden}

.roundedCorners--m-ad3{border-radius:4px}

.indicator--JP4IP{background-color:currentColor;position:relative;will-change:transform;transform:translateX(-100%)}

.wrapper--1N466:hover .knob--129sB{opacity:1}

.interactionLayer--3KoTi{height:30px;cursor:pointer;transform:translateY(-60%)}

.minDragArea--27OHo{transform:translate(-100%,-50%)}

.maxDragArea--3Er3k,.minDragArea--27OHo{position:absolute;display:none;height:300vh;width:300vw;top:0}

.maxDragArea--3Er3k{left:100%;transform:translateY(-50%)}

.visible--k59xW{display:block}

.knob--129sB{opacity:0;width:12px;height:12px;border-radius:50%;background:var(--snow-white);position:absolute;z-index:10;transition:opacity .15s ease;box-shadow:1px 1px 3px 1px rgba(0,0,0,.4);pointer-events:none}

.isDragging--3Wg_a{height:100vh;transform:translateY(-90vh);z-index:1000}

.isDragging--3Wg_a+.toolTip--12q62{opacity:1}

.toolTip--12q62{position:absolute;bottom:11px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;background-color:var(--snow-white);border-radius:4px;font-weight:600;color:var(--midnight-black);padding:2px 6px;height:22px;contain:content;opacity:0;transition:opacity .33s ease}

.wrapper--1N466:hover .toolTip--12q62{will-change:transform;opacity:1}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.progressBarWrapper--BdltI{width:100%;height:2px;color:var(--cyan-blue);position:relative;outline:none}

.adMode--3up7y{color:#f8e71c}

.masterGold--nImKE{color:var(--master-gold)}
.container--3K9Ru{position:relative}.container--3K9Ru,.image--2guhr{width:100%;height:100%}.image--2guhr{position:absolute;object-fit:cover}
.image--2mPhM{-webkit-filter:blur(var(--blurRadius));filter:blur(var(--blurRadius))}
.wrapper--3ZKhU{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;opacity:.2;width:100vw;height:100vh}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.button--2s1Pa{width:24px;height:24px;color:var(--glass-white-2);padding:0;transition:color .15s ease}

.button--2s1Pa svg{fill:currentColor}

.button--2s1Pa:hover{color:var(--glass-white-2-hover)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.button--3UBtc{height:24px;width:24px;color:var(--snow-white);padding:0;transition:color .15s ease}

.button--3UBtc svg{fill:currentColor}

.button--3UBtc:hover{color:var(--snow-white-hover)}

.button--3UBtc[disabled]{opacity:.5}

.gray--3WmQU{color:var(--glass-white-2)}

.gray--3WmQU:hover{color:var(--glass-white-2-hover)}

.favorite--2mE-8{color:var(--cyan-blue)}

.favorite--2mE-8:hover{color:var(--cyan-blue-hover)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.button--3tuhX{width:24px;height:24px;fill:var(--snow-white);padding:0}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.pictureInPictureButton--jn7DN{padding:0;color:var(--glass-white-2);transition:color .15s ease}

.pictureInPictureButton--jn7DN svg{fill:currentColor;width:20px}

.pictureInPictureButton--jn7DN:hover{color:var(--glass-white-2-hover)}

.light--1WxXD{color:var(--snow-white)}

.light--1WxXD:hover{color:var(--snow-white-hover)}

.pictureInPictureButton--jn7DN.active--2l6w5{color:var(--cyan-blue)}

.pictureInPictureButton--jn7DN.active--2l6w5:hover{color:var(--cyan-blue-hover)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.overlay--D8okL{-webkit-box-align:center;align-items:center;background-color:var(--controls-overlay);box-sizing:border-box;cursor:pointer;display:-webkit-box;display:flex;height:100%;justify-content:space-around;left:0;opacity:0;position:absolute;top:0;-webkit-transition:opacity .2s;transition:opacity .2s;width:100%}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.container--1euLk{position:relative;height:100%}

.container--1euLk:hover .overlay--3vt-z{opacity:1}

.overlay--3vt-z{border-radius:inherit;justify-content:center}

.overlay--3vt-z.overlayClickable--Je_cN{cursor:pointer}

.overlay--3vt-z button{transition:transform .1s}

.overlay--3vt-z button:hover{transition:var(--hoverTransition)}

.overlay--3vt-z button:hover:hover{filter:var(--hoverDarken)}

.overlay--3vt-z button:active{transform:scale(1)}

.maximizeIcon--3J4de svg{width:100%;height:100%;fill:var(--snow-white)}

.roundOverlay--2VzWy{border-radius:50%}

.playButton--29Ubi{height:42px;width:42px}

.playButtonSmall--3y_Xr{width:24px;height:24px}

.contextMenuButton--1pjoP,.favoriteButton--2YBnX{position:absolute;height:31px;width:31px}

.contextMenuButton--1pjoP{left:15%;color:var(--snow-white)}

.favoriteButton--2YBnX{right:15%}

.pictureInPictureButton--d_kAk{margin-left:20px}
.videoView--1TP8f{position:relative}.videoView--1TP8f:before{display:block;content:"";width:100%;padding-top:56.25%}.videoView--1TP8f video{position:absolute;top:0;left:0;right:0;bottom:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;pointer-events:none}.is-fullscreen .videoView--1TP8f{height:100vh;width:100vw}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.isVideo--JjBGd{overflow:hidden;height:0;padding-top:56.25%;position:relative}

.isVideo--JjBGd>:first-child{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background-color:var(--black)}
.container--UiaTi{display:flex}.container--UiaTi h4{text-overflow:ellipsis}.title--10-yN{text-align:left}.text--hysQ9,.title--10-yN{white-space:nowrap}.text--hysQ9,.text--hysQ9 h4{overflow:hidden}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}

.ReactModal__Body--open .footerPlayer--2d1-L{position:static}

.footerPlayer--2d1-L{height:98px;position:relative;z-index:var(--z-index-player)}

.isPortal--oYNNG{z-index:var(--z-index-high);background-color:var(--black)}

.isPortal--oYNNG .rightColumn--ZsskN{margin-right:1rem}

.isPortal--oYNNG .chromecastButton--Dt2DP,.isPortal--oYNNG .mediaActions--2bCb9,.isPortal--oYNNG .playQueueButton--2We5N,.isPortal--oYNNG .volumeSlider--2XrjS{display:none}

.blurryBackground--cCcII{position:absolute;object-fit:cover;pointer-events:none}

.bottomRow--25xS1,.centerColumn--1MAnN,.dragItem--3WWiC,.leftColumn--5B2JF,.mediaActions--2bCb9,.rightColumn--ZsskN,.topRow--3XFnz{display:flex;flex-flow:row nowrap;align-items:center;box-sizing:border-box}

.bottomRow--25xS1,.centerColumn--1MAnN,.dragItem--3WWiC,.leftColumn--5B2JF,.rightColumn--ZsskN{height:96px}

.centerColumn--1MAnN,.leftColumn--5B2JF,.rightColumn--ZsskN{width:33%;flex:3 1;min-width:200px;white-space:nowrap}

.leftColumn--5B2JF{overflow:hidden}

.rightColumn--ZsskN{justify-content:flex-end}

.centerColumn--1MAnN{justify-content:center}

.isVideo--2qOwC .mediaImageryHoverWrapper--1Jrd9{background-color:var(--black)}

.mediaImageryHoverWrapper--1Jrd9{margin:14px 16px;flex-shrink:0;transition:width .25s ease;width:64px;contain:strict;overflow:hidden;color:var(--snow-white)}

.isVideo--2qOwC .mediaImageryHoverWrapper--1Jrd9{width:113.777777778px}

.mediaImageryHoverWrapper--1Jrd9 svg{fill:currentColor;width:24px;height:24px;pointer-events:none}

.resourceImage--127Vu{pointer-events:none}

.mediaImagery--2gmWt img{width:100%;height:100%;display:block}

.mediaActions--2bCb9{margin-left:1rem}

.button--3sWip{height:24px;padding:0}

[data-whatinput=mouse] .button--3sWip{outline:none}

.mediaActions--2bCb9 button:not(:last-child){margin-right:.5em}

.contextMenuButton--3GR_-,.playQueueButton--2We5N{color:var(--glass-white-2);transition:color .15s ease}

.contextMenuButton--3GR_- svg,.playQueueButton--2We5N svg{fill:currentColor;height:24px;width:24px}

.contextMenuButton--3GR_-:hover,.playQueueButton--2We5N:hover{color:var(--glass-white-2-hover)}

.playQueueButton--2We5N{margin:0 12px}

.dragItem--3WWiC{max-width:100%;height:64px;overflow:hidden;white-space:nowrap}

.dragItem--3WWiC span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;margin-bottom:-4px}

.mediaInformation--1dAUh{width:calc(100% - 96px)}

.is-fullscreen .mediaInformation--1dAUh{width:100%}

.mediaArtists--3UIyd,.playingFrom--3x_p7{color:var(--glass-white-2)}

.mediaArtists--3UIyd{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;margin-top:-4px}

.playingFrom__text--33hoj,.playingFrom__title--377Ax{font-size:.857rem;margin:0;padding-top:2px}

.chromecastButton--Dt2DP,.fullscreenButton--2If6K,.soundOutputButton--2Mw0-,.videoQualityOptionsButton--1DPXH{margin-left:14px;height:auto}

.chromecastButton--Dt2DP{transform:translateY(1.5px)}

.qualityIndicator--2JgTZ{margin-right:22px}

.volumeSlider--2XrjS{margin:0 0 0 22px;position:relative}

@media (max-width:1024px){.centerColumn--1MAnN{width:25%}.leftColumn--5B2JF{max-width:250px}}

@media (max-width:925px){.mediaImageryHoverWrapper--1Jrd9{display:none}.mediaInformation--1dAUh{margin-left:14px;width:114px}.leftColumn--5B2JF{max-width:225px;min-width:0}.soundOutputButton--2Mw0-{margin-left:0}.volumeSlider--2XrjS{margin:0 14px}}

@media (max-width:875px){.centerColumn--1MAnN{justify-content:flex-start;margin-left:14px}.volumeSlider--2XrjS{width:auto;padding:20px 0}}

.mediaItemTitle--eJyNw{}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.shuffleButton--2g-eo{color:var(--glass-white-2)}

.shuffleButton--2g-eo:hover{color:var(--glass-white-2-hover)}

.shuffleButton--2g-eo svg{fill:currentColor;width:24px;height:24px}

.active--rvMAD{color:var(--cyan-blue)}

.active--rvMAD:hover{color:var(--cyan-blue-hover)}

.active--rvMAD.isMaster--ioGN1{color:var(--master-gold)}

.active--rvMAD.isMaster--ioGN1:hover{color:var(--master-gold-hover)}
.svg--3cSMl{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);width:64px;height:64px;contain:strict}.spinner--1S7_E{stroke-dasharray:471.24;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-transform-origin:50%;transform-origin:50%}.animating--1Ttfp{-webkit-animation-play-state:running;animation-play-state:running;will-change:transform}
.playbackToggle--1eQO2{position:relative}.playbackToggle--1eQO2 .spinningCircle--PrOB9{position:absolute;top:calc(50% - 3px);left:50%;transform:translate(-50%,-50%) translateZ(0);width:220%;height:220%;opacity:0;pointer-events:none;transition:opacity .5s linear 0}.playbackToggle--1eQO2 .spinningCircle--PrOB9.isLoading--2WV3M{transition:opacity .7s linear 3s;opacity:1}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.repeatButton--3iDaJ{color:var(--glass-white-2)}

.repeatButton--3iDaJ:hover{color:var(--glass-white-2-hover)}

.repeatButton--3iDaJ svg{fill:currentColor;width:24px;height:24px}

.all--3BIEW,.once--1gDfg{color:var(--cyan-blue)}

.all--3BIEW:hover,.once--1gDfg:hover{color:var(--cyan-blue-hover)}

.isMaster--1VB4U{color:var(--master-gold)}

.isMaster--1VB4U:hover{color:var(--master-gold-hover)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.blockButton--1htpn{color:var(--glass-white-2)}

.blockButton--1htpn:hover{color:var(--glass-white-2-hover)}

.active--1H290{color:var(--cyan-blue)}

.active--1H290:hover{color:var(--cyan-blue-hover)}

.blockButton--1htpn svg{width:20px;height:20px;fill:currentColor}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.playbackControls--10rXZ{display:flex;flex-flow:row nowrap;align-items:center;contain:layout}

.playbackControls--10rXZ button{margin:0 14px;padding:0;transition:color .15s ease}

[data-whatinput=mouse] .playbackControls--10rXZ button{outline:none}

.playbackControls--nowPlaying--_I1l_ button{margin:0 15px}

.playbackControls--nowPlaying--_I1l_ button svg{width:40px;height:40px}

.playbackControls--nowPlaying--_I1l_ button:first-child svg,.playbackControls--nowPlaying--_I1l_ button:last-child svg{width:28px;height:28px}

.playbackControls--nowPlaying--_I1l_ .blockButton--1_G8p svg{width:24px;height:24px}

.livestream--3TZ-w button:not(:nth-child(3)){opacity:0;pointer-events:none}

@media (max-width:1068px){.playbackControls--10rXZ:not(.playbackControls--nowPlaying--_I1l_) button{margin:0 10px}}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.qualityIndicator--1WnBC{background-color:var(--glass-white-5);border-radius:4px;cursor:pointer;color:var(--snow-white);display:flex;justify-content:center;align-items:center;height:22px}

.qualityIndicator--1WnBC:hover{cursor:pointer;background-color:var(--glass-white-6)}

.qualityIndicator--1WnBC svg{fill:currentColor}

.qualityIndicator--1WnBC{transition:color .3s ease,background-color .3s ease}

.isHifi--14EY8{background-color:var(--glass-cyan-2);color:var(--cyan-blue)}

.isHifi--14EY8:hover{background-color:var(--glass-cyan-3)}

.isMaster--2R2mq{background-color:var(--glass-master-gold);color:var(--master-gold);padding:0 8.65px}

.isMaster--2R2mq:hover{background-color:var(--glass-master-gold-2)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.badge--3I26H{display:-webkit-inline-box;display:inline-flex;height:14px;width:14px}

.badge--3I26H svg{height:100%;fill:currentColor;color:var(--black)}

.videoBadge--1IER-{width:auto}

.badgeBig--uF6Sd{width:74px;height:24px}

.liveBadge--1Y3Rq{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;justify-items:center;width:57px;height:22px;background-color:var(--glass-white-5);border-radius:4px}

.liveBadge--1Y3Rq svg{color:var(--snow-white)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.duration--3f3-B{color:var(--glass-white-3)}

.currentTime--2fCqA{color:var(--gray-5)}

.currentTime--2fCqA:after{content:" / ";margin:0 .1em}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.nativeRange--17fOz{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;min-width:75px;height:14px;background:transparent;font:1em/1 arial,sans-serif;cursor:pointer;outline:none;contain:strict}

.nativeRange--17fOz::-ms-track{box-sizing:border-box;border:none;width:100%;height:4px;background:transparent;color:transparent;border-radius:4px}

.nativeRange--17fOz::-ms-fill-lower,.nativeRange--17fOz:focus::-ms-fill-lower{background:var(--snow-white);border-radius:4px}

.nativeRange--17fOz::-ms-fill-upper,.nativeRange--17fOz:focus::-ms-fill-upper{background:var(--glass-white-5);border-radius:4px}

.nativeRange--17fOz:focus{outline:none}

.nativeRange--17fOz::-webkit-slider-runnable-track{box-sizing:border-box;border:none;width:100%;height:4px;background:linear-gradient(var(--snow-white),var(--snow-white)) 0/calc(2px + (var(--val) - var(--min))/(var(--max) - var(--min))*(100% - 2px)) 100% no-repeat var(--glass-white-5);border-radius:4px;outline:none}

.nativeRange--17fOz::-moz-range-track{box-sizing:border-box;border:none;width:100%;height:4px;background:linear-gradient(var(--snow-white),var(--snow-white)) 0/calc(2px + (var(--val) - var(--min))/(var(--max) - var(--min))*(100% - 2px)) 100% no-repeat var(--glass-white-5);border-radius:4px;outline:none;box-shadow:none}

.nativeRange--17fOz:focus::-moz-range-track{outline:none;box-shadow:none}

.nativeRange--17fOz::-moz-range-progress{background:var(--snow-white)}

.nativeRange--17fOz::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border:none;width:12px;height:12px;border-radius:50%;background:var(--snow-white);cursor:pointer;box-shadow:1px 1px 3px 1px rgba(0,0,0,.4);margin-top:-4px}

.nativeRange--17fOz[type=range]::-moz-range-thumb{margin-top:0;box-sizing:border-box;border:none;width:12px;height:12px;border-radius:50%;background:var(--snow-white);cursor:pointer;opacity:0;box-shadow:1px 1px 3px 1px rgba(0,0,0,.4)}

.nativeRange--17fOz:hover[type=range]::-moz-range-thumb{opacity:1;transform:opacity .3s}

.nativeRange--17fOz::-ms-tooltip{display:none}

.nativeRange--17fOz::-ms-thumb{transform:translateY(2px);box-shadow:1px 1px 3px 1px rgba(0,0,0,.4)}

.nativeRange--17fOz[value="0"]::-webkit-slider-runnable-track{background:var(--glass-white-5)}

.nativeRange--17fOz[value="0"]::-moz-range-track{background:var(--glass-white-5)}

.nativeRange--17fOz[value="0"]::-ms-fill-lower,.nativeRange--17fOz[value="0"]::-ms-fill-upper{background:none}

.nativeRange--17fOz[value="0"]::-ms-track{background:var(--glass-white-5)}

.disabled--1COAq.nativeRange--17fOz::-webkit-slider-thumb{background:none}

.disabled--1COAq.nativeRange--17fOz::-webkit-slider-runnable-track{background:var(--glass-white-5)}

.nativeRange--17fOz[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:transparent}

.nativeRange--17fOz[type=range]::-moz-focus-outer{border:0}

.nativeRange--17fOz[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}

@media (max-width:836px){.nativeRange--17fOz[type=range]:not(.nowPlayingMode--1bL0S){display:none;position:absolute;bottom:86px;right:-26px;transform:rotate(270deg);width:64px;transition:.15s ease-in;z-index:1}.nativeRange--17fOz[type=range]:not(.nowPlayingMode--1bL0S).isDragging,.nativeRange--17fOz[type=range]:not(.nowPlayingMode--1bL0S):hover{display:block}.responsiveRangeWrapper--iyZ3Z{display:none;position:absolute;bottom:54px;right:12px;width:24px;height:80px;background:var(--gray-6);border-radius:112px;transition:.15s ease-in;z-index:0}.responsiveRangeWrapper--iyZ3Z.isDragging,.responsiveRangeWrapper--iyZ3Z:hover{display:block}}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.volumeSlider--3DVio{display:flex;align-items:center}

.volumeSlider--3DVio.disabled--3Dl5k{pointer-events:none}

.volumeSlider--3DVio [type=range]::-webkit-slider-thumb{opacity:0}

.volumeSlider--3DVio:hover [type=range]::-webkit-slider-thumb{opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s}

.volumeSlider--3DVio:hover [type=range],.volumeSlider--3DVio:hover [type=range]+div{display:block}

.volumeSlider--3DVio .isDragging::-webkit-slider-thumb{opacity:1}

.range--M6tzt{flex:1 1}

.range--M6tzt.muted--2Tr2L{opacity:.5}

.icon--wOcoD{height:24px;transform:translateY(1.5px)}

.icon--wOcoD path{fill:var(--snow-white)}

.icon--wOcoD.disabledIcon--1UaCU path{fill:var(--gray-4)}

.toggleButton--2ro_S{flex-shrink:0;padding:0;margin-right:12px;transition:var(--hoverTransition)}

.toggleButton--2ro_S:hover{filter:var(--hoverDarken)}

.volumeSliderNowPlaying--238aG .range--M6tzt{margin-right:47px}

.volumeSliderNowPlaying--238aG .icon--wOcoD{width:28px;height:28px}

@media (max-width:836px){.toggleButton--2ro_S{margin-right:0}}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.chromecastButton--VGyjZ{padding:0;color:var(--glass-white-2);transition:color .15s ease}

.chromecastButton--VGyjZ svg{fill:currentColor;width:20px}

.chromecastButton--VGyjZ:hover{color:var(--glass-white-2-hover)}

.buttonIsLight--2MW4v{color:var(--snow-white)}

.buttonIsLight--2MW4v:hover{color:var(--snow-white-hover)}

.chromecastButton__middleBox--1k3ti{opacity:0;transition:opacity .5s ease}

.chromecastButton--VGyjZ.connected--7DDcx .chromecastButton__middleBox--1k3ti{opacity:1}

.chromecastButton--VGyjZ.connected--7DDcx,.chromecastButton--VGyjZ.connecting--2G6k2 .chromecastButton__middleBox--1k3ti{color:var(--cyan-blue)}

.chromecastButton--VGyjZ.connected--7DDcx:hover,.chromecastButton--VGyjZ.connecting--2G6k2 .chromecastButton__middleBox--1k3ti:hover{color:var(--cyan-blue-hover)}

.chromecastButton__firstCurve--QyfBi,.chromecastButton__secondCurve--AJ3cD,.chromecastButton__thirdCurve--tXN9n{transition:fill 50ms ease}

.chromecastButton--VGyjZ.connecting--2G6k2 .chromecastButton__firstCurve--QyfBi{animation:connecting--2G6k2 1.2s ease .3s infinite}

.chromecastButton--VGyjZ.connecting--2G6k2 .chromecastButton__secondCurve--AJ3cD{animation:connecting--2G6k2 1.2s ease .6s infinite}

.chromecastButton--VGyjZ.connecting--2G6k2 .chromecastButton__thirdCurve--tXN9n{animation:connecting--2G6k2 1.2s ease .9s infinite}

@keyframes connecting--2G6k2{0%{color:var(--cyan-blue)}to{color:var(--snow-white)}}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.button--3_FTD{color:var(--snow-white);transition:color .15s ease;width:24px;height:auto}

.button--3_FTD svg{fill:currentColor;width:24px;height:24px}

.button--3_FTD:hover{color:var(--snow-white-hover)}

.buttonIsActive--fk3JC{color:var(--cyan-blue)}

.buttonIsActive--fk3JC:hover{color:var(--cyan-blue-hover)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

button.hasActives--2_b8- svg{fill:var(--cyan-blue)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.fullscreenButton--3W0Qx{color:var(--snow-white);transition:color .15s ease;width:24px;height:auto}

.fullscreenButton--3W0Qx svg{fill:currentColor;width:24px;height:24px}

.fullscreenButton--3W0Qx:hover{color:var(--snow-white-hover)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.button--1WpgA{width:24px;height:24px;color:var(--glass-white-2);padding:0;transition:color .15s ease}

.button--1WpgA svg{fill:currentColor;height:24px;width:24px}

.button--1WpgA:hover{color:var(--glass-white-2-hover)}

.buttonIsLight--2Hxhb{color:var(--snow-white)}

.buttonIsLight--2Hxhb:hover{color:var(--snow-white-hover)}

.buttonIsActive--fy8FJ{color:var(--cyan-blue)}

.buttonIsActive--fy8FJ:hover{color:var(--cyan-blue-hover)}

:root {
  --var-sidebar-responsive-width: 20vw;
  --var-sidebar-collapsed-width: 78px;
  --var-sidebar-width: 240px;
  --header-height: 54px;
  --header-top-padding: 18px;
  --header-side-padding: 24px;
  --extended-header-height: 80px;
  --extended-container-height: 160px;
}:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}.container--3xsHm{display:flex;align-items:center}.container--3xsHm>div:first-child{-webkit-app-region:no-drag;flex-shrink:0;z-index:var(--z-index-navigation-buttons)}.container--3xsHm>div:nth-child(2){flex-grow:1;margin:0 16px;max-width:calc(100% - 420px);z-index:var(--z-index-navigation-buttons)}.container--3xsHm>div:nth-child(2) a{-webkit-app-region:no-drag}.container--3xsHm>div:nth-child(3){-webkit-app-region:no-drag;width:100%;max-width:388px;z-index:var(--z-index-navigation-buttons);box-sizing:border-box}
:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}
.container--1EGjv{-webkit-app-region:drag;z-index:var(--z-index-drag-layer)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

.grid{display:flex;flex-direction:column;height:100%;width:100%}

.grid__row{display:flex;flex:1 1;min-height:0;position:relative;overflow:hidden}

.grid__nav{border-left-color:var(--midnight-black);border-bottom-color:var(--midnight-black);border-right:1px solid;border-right-color:var(--midnight-black);border-top-color:var(--midnight-black);background:#2f2e31;width:250px}

.grid__nav.grid__nav--visible{margin-left:0;margin-top:0;padding:0}

.is-now-playing .grid__main,.is-now-playing .grid__nav{opacity:0;transition:opacity .5s ease}

.hide-main-content .frontpage{position:fixed}

.grid__main{flex:1 1;position:relative;will-change:scroll-position}

.grid__main--hidden{width:100%;height:100%;overflow:hidden}

.grid__aside,.is-fullscreen.clean-fullscreen .grid__aside{width:400px;position:fixed;right:0;top:40px;transform:translateX(400px);transition:transform .6s ease}

.grid__aside{height:calc(100vh - 104px)}

.is-now-playing .grid__aside{height:calc(100vh - 42px);top:48px;overflow:hidden}

.is-fullscreen .grid__aside{height:calc(100vh - 96px)}

.is-now-playing .is-fullscreen .grid__aside{height:calc(100vh - 42px)}

.is-downloading .grid__aside{top:59px}

.grid__aside--visible{transform:none}

.ie10 .grid__aside{display:none;width:0}

.ie10 .grid__aside--visible{width:400px;display:block}

.grid__footer{z-index:20;height:auto}

.is-fullscreen .grid__footer,.is-fullscreen .grid__header,.is-now-playing .grid__footer,.is-now-playing .grid__header{z-index:0}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

:root {
  --var-sidebar-responsive-width: 20vw;
  --var-sidebar-collapsed-width: 78px;
  --var-sidebar-width: 240px;
  --header-height: 54px;
  --header-top-padding: 18px;
  --header-side-padding: 24px;
  --extended-header-height: 80px;
  --extended-container-height: 160px;
}

:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}

.containerRow--3HPFv{display:flex;flex:auto;max-height:100vh}

.containerRow--3HPFv.hasPlayer--3Nv2G{max-height:calc(100vh - 98px)}

.is-windows.is-desktop.containerRow--3HPFv{max-height:calc(100vh - 30px)}

.is-windows.is-desktop.containerRow--3HPFv.hasPlayer--3Nv2G{max-height:calc(100vh - 128px)}

.is-fullscreen .containerRow--3HPFv{visibility:hidden}

.sidebarWrapper{display:flex;flex-direction:column;width:var(--var-sidebar-width);flex-shrink:0;z-index:var(--z-index-sidebar);background:#242428;max-height:100%;transition:50ms ease-in}

.sidebarOSXDragArea--13Npl{height:35px;flex-shrink:0}

.contentOSXDragArea--3-Nqu{height:22px;width:calc(100vw - var(--var-sidebar-width))}

.contentArea--1raSP{flex-grow:1;display:flex;flex-direction:column;max-width:calc(100vw - var(--var-sidebar-width));position:relative}

.contentArea--1raSP,.header--2brPA{transition:50ms ease-in}

.header--2brPA{flex-shrink:0;padding:18px 24px 0;width:calc(100vw - var(--var-sidebar-width) - var(--header-side-padding)*2);height:var(--header-height);position:fixed;z-index:var(--z-index-header)}

.main--1kmZO{height:calc(100vh - var(--header-height) - var(--header-top-padding));overflow-x:hidden;overflow-y:scroll;width:100%;margin-top:80px}

.is-mac.is-desktop .main--1kmZO{margin-top:58px}

.is-contributor-page .main--1kmZO{margin-top:280px}

.is-contributor-page .is-mac.is-desktop .main--1kmZO{margin-top:258px}

.mainLayout--F8L4I{display:flex;flex-direction:column;max-height:100vh}

@media (max-width:1024px){.sidebarWrapper{width:var(--var-sidebar-responsive-width)}.contentArea--1raSP{max-width:calc(100vw - var(--var-sidebar-responsive-width))}.header--2brPA{width:calc(100vw - var(--var-sidebar-responsive-width) - var(--header-side-padding)*2)}}

@media (max-width:875px){.sidebarWrapper{position:absolute;width:var(--var-sidebar-collapsed-width);height:100%;max-height:inherit}.sidebarWrapper:hover{width:var(--var-sidebar-width)}.contentArea--1raSP{max-width:calc(100vw - var(--var-sidebar-collapsed-width));padding-left:var(--var-sidebar-collapsed-width)}.header--2brPA{width:calc(100vw - var(--var-sidebar-collapsed-width) - var(--header-side-padding)*2)}}
:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}
.container--arp25{width:388px;position:fixed;right:24px;top:60px;transform:translateX(412px);transition:transform .6s ease;display:flex;align-items:stretch;height:calc(100vh - 166px);z-index:var(--z-index-floating-aside)}
.is-fullscreen .container--arp25,.is-now-playing .container--arp25{z-index:var(--z-index-floating-aside-over-player)}
.is-now-playing .container--arp25{height:calc(100vh - 68px)}
.is-fullscreen .container--arp25{right:32px;top:74px;height:calc(100vh - 216px)}
.container--arp25.hasWindowsTitlebar--3g9TX{top:90px;height:calc(100vh - 196px)}
.is-fullscreen .container--arp25.hasWindowsTitlebar--3g9TX{top:68px;height:calc(100vh - 216px)}
.containerIsOpen--2Dlrq{transform:translateX(0)}
/*
 * Color palette
 * ------
 * Originally from Zeplin: https://app.zeplin.io/project/59a7c264c4d96e2c4cb674cc/styleguide
 * But adjusted since then as we use Figma now
*/

/* stylelint-disable color-no-hex */

:root {
  --glass-white-1: rgba(229, 238, 255, 0.2);
  --glass-white-1-hover: rgba(229, 238, 255, 0.3);
  --glass-white-2: rgba(229, 238, 255, 0.6);
  --glass-white-2-hover: rgba(229, 238, 255, 0.8);
  --glass-white-3: rgba(255, 255, 255, 0.5);
  --glass-white-4: rgba(246, 245, 255, 0.08);
  --glass-white-5: rgba(246, 245, 255, 0.1);
  --glass-white-6: rgba(246, 245, 255, 0.2);
  --snow-white: hsl(0, 0%, 100%);
  --snow-white-hover: hsl(0, 0%, 70%);
  --gray-4: #72777f;
  --gray-5: #4c4e54;
  --gray-6: #242528;
  --gray-7: #151517;
  --cyan-blue: hsl(180, 100%, 50%);
  --cyan-blue-hover: hsl(180, 100%, 40%);
  --glass-cyan-1: rgba(0, 255, 255, 0.1);
  --glass-cyan-2: hsla(180, 100%, 50%, 0.2);
  --glass-cyan-3: hsla(180, 100%, 50%, 0.3);
  --master-gold: rgba(255, 190, 125, 1);
  --master-gold-hover: rgba(255, 190, 125, 0.9);
  --glass-master-gold: rgba(255, 190, 125, 0.2);
  --glass-master-gold-2: rgba(255, 190, 125, 0.3);
  --raspberry-pink: #cd005d;
  --raspberry-pink-lighter: #dc4d8e;
  --black: #000;
  --midnight-black: #101012;
  --controls-overlay: rgba(0, 0, 0, 0.7);
  --duration-overlay: rgba(0, 0, 0, 0.3);
  --background-dark: #18181b;
  --twitter: #55acee;
  --facebook: #3b5998;
  --facebook-hover: #385486;
  --hoverLighten: brightness(130%);
  --hoverDarken: brightness(70%);
  --hoverTransition: filter 0.15s ease;
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #5a5a5a;
}

/* stylelint enable */

:root {
  --z-index-low: 10;
  --z-index-header: 20;
  --z-index-navigation-buttons: 30;
  --z-index-sidebar: 50;
  --z-index-floating-aside: 70; /* Play queue and search */
  --z-index-player: 80;
  --z-index-floating-aside-over-player: 90;
  --z-index-medium: 500;
  --z-index-modal: 500;
  --z-index-context-menu: 550;
  --z-index-drag-layer: 600;
  --z-index-notifications: 700;
  --z-index-enlarged-image: 800;
  --z-index-overlay: 900;
  --z-index-high: 1000;
}

.overlay--2BDa3{background-color:var(--black);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:var(--z-index-overlay)}

.indicator--3jHNi{margin:-25px auto;position:relative;text-align:center;top:50%}

/*# sourceMappingURL=app.1e2a595f442966092479.css.map*/