.disableUnderline--2XtVU:link:hover{text-decoration: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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.body--yqPOx,body,html{line-height:var(--baseLineHeight)}

.body--yqPOx,body{color:var(--snow-white);font-weight:500;font-size:1rem;font-stretch:normal;-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-weight:600;font-size:calc(48*var(--remRatio));line-height:calc(58*var(--remRatio));letter-spacing:-.04em}

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

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

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

.h4--3RUJ8,.subtitle--2mpDt,h4{font-size:calc(16*var(--remRatio))}

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

.subtitle2--3FS_R{font-size:calc(15*var(--remRatio))}

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

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

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

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

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

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

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

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

.normalText--1uzZj{font-size:calc(14*var(--remRatio))}

.largeText--9V-7c{font-size:calc(16*var(--remRatio))}

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

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

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

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

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

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

.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{color:var(--snow-white);text-align:left}

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

.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{color:var(--snow-white);text-align:left}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-weight:800;font-size:1.286rem}

.mix--21Lfe{font-weight:900;font-size:calc(14*var(--remRatio));line-height:calc(16*var(--remRatio));letter-spacing:-.03em}

.lyrics--3wGFv{margin-bottom:calc(48*var(--remRatio));font-weight:600;font-size:calc(32*var(--remRatio));line-height:calc(48*var(--remRatio))}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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;
}

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

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

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

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

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

.homeItem--35cRx{}

.item--3_8nW{position:relative;display:flex;align-items:center;height:3.15rem;margin:0 12px;padding: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{width:calc(24*var(--remRatio));min-width:calc(24*var(--remRatio));height:calc(24*var(--remRatio));min-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{width:1.7143rem;min-width:1.7143rem;margin-right:1rem;background-color:var(--glass-white-1);border-radius:50%;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{max-width:125px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

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

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

.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;top:50%;right:10px;width:22px;height:22px;margin-top:-11px;pointer-events:none}

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

.updateBadge--mcRZ4{bottom:13px;left:13px}

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

.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{min-width:40px;margin:0 8px 0 0;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}

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

@media (min-width:875px){.isLoggedIn--14J_Z .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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

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

.button--FoJMR:disabled{cursor:not-allowed;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{position:relative;display:inline-block;width:24px;height:24px;color:var(--snow-white);fill:var(--snow-white)}

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

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.profilePicture--lPH85{padding:0;overflow:hidden;background:var(--gray-5);border-color:var(--midnight-black);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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.svgWrapper--34O-P{display:flex;align-items: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-weight:600;font-size:75px;text-transform:uppercase;fill:var(--gray-4)}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.image--2STXf{display:block;contain:layout;background-color:var(--gray-7);border:0}

.rounded--3gcc-{border-radius:50%}
.container--3K9Ru{position:relative}.container--3K9Ru,.image--2guhr{width:100%;height:100%}.image--2guhr{position:absolute;object-fit:cover}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.badgeContainer--1bpNn{position:relative}

.updateBadge--1oIWq{position:absolute;width:8px;height:8px;background:var(--raspberry-pink);border:3px solid var(--gray-6);border-radius:50%}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.button--2s1Pa:hover{color:var(--glass-white-2-hover)}
@keyframes fadeIn--1Gkr7{0%{opacity:0}to{opacity:1}}@keyframes dashProgress--LEtZB{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes diamondsAreForEver--33Mom{0%{transform:scale(.01) rotate(45deg)}50%{transform:scale(1) rotate(45deg)}to{transform:scale(.01) rotate(45deg)}}.fadeInAnimation--3sz0x{animation-name:fadeIn--1Gkr7}.dashProgressAnimation--9M4w0{animation-name:dashProgress--LEtZB}.diamondsAreForEverAnimation--3FkVN{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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

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

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

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

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

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

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

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

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

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

.diamond4--2kQcO{animation-delay:275ms}
.container--mevF9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.outer--3cife{display:flex;align-items:center;justify-content:space-around;width:100%;height: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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

.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{flex-shrink:0;width:1px;height:28px;margin-top:-4px;margin-bottom:-4px;margin-left:16px;background-color:var(--snow-white);opacity:.3}

.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%;z-index:var(--z-index-notifications);display:flex;flex-direction:column;align-items:center;text-align:left;transform:translateX(-50%)}
.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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;width:100%;height:100%}

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

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

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

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

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

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

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

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

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

.visible--k59xW{display:block}

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

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

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

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

.wrapper--1N466:hover .toolTip--12q62{opacity:1;will-change:transform}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.masterGold--nImKE{color:var(--master-gold)}
.wrapper--3ZKhU{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;width:100vw;height:100vh;opacity:.2}
.videoView--1TP8f{position:relative}.videoView--1TP8f:before{display:block;width:100%;padding-top:56.25%;content:""}.videoView--1TP8f video{position:absolute;top:0;right:0;bottom:0;left:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;pointer-events:none}.is-fullscreen .videoView--1TP8f{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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

.isVideo--JjBGd>:first-child{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background-color:var(--black)}

.seekIcon--jLQ_k{position:absolute;top:50%;z-index:1;width:92px;height:92px;transform:translateY(-50%);opacity:0;transition:opacity .2s ease;pointer-events:none;contain:strict}

.seekIconBwd--2mSNk{left:10%}

.seekIconFwd--1M_PA{right:10%}

.seekIconHidden--2DtQV{animation:fadeOut--2Q95t .2s ease}

.seekIconVisible--2e2gO{opacity:1}

.seekIconFooterPlayer--1xRxV{left:50%;width:48px;height:48px;transform:translate(-50%,-50%)}

@keyframes fadeOut--2Q95t{0%{opacity:1}to{opacity:0}}
.container--UiaTi{display:flex;align-items:center;margin-top:4px}.title--10-yN{text-align:left}.text--hysQ9,.title--10-yN{white-space:pre}.text--hysQ9{overflow:hidden;text-overflow:ellipsis}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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;
}

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

.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;height:100%;object-fit:cover;overflow:hidden;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{min-width:740px}

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

.centerColumn--1MAnN,.leftColumn--5B2JF,.rightColumn--ZsskN{flex:3 1;width:33%;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)}

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

.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{width:24px;height:24px;fill:currentColor}

.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:pre}

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

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

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

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

.mediaArtists--3UIyd{display:block;overflow:hidden;white-space:pre;text-overflow:ellipsis}

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

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

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

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

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

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

@media (max-width:925px){.mediaImageryHoverWrapper--1Jrd9{display:none}.mediaInformation--1dAUh{width:114px;margin-left:14px}.leftColumn--5B2JF{min-width:0;max-width:225px}.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.button--3UBtc{width:24px;height:24px;padding:0;color:var(--snow-white);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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.button--2jBsf{width:32px;height:20px;padding-top:2px;color:var(--glass-white-2);transform:translateX(-3px) translateY(-1px);transition:.15s ease}

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

.button--2jBsf path{stroke-width:2;stroke-linecap:round}

.gray--2b8jI path:first-child{opacity:.6;transition:opacity .15s ease;fill:transparent;stroke:var(--snow-white);stroke-width:2}

.gray--2b8jI path:nth-child(2),.gray--2b8jI path:nth-child(3){color:var(--snow-white);stroke:transparent}

.gray--2b8jI path:nth-child(4){color:var(--snow-white)}

.hover--fTNQ0:hover path:first-child{opacity:1}

.hover--fTNQ0:hover path:nth-child(2),.hover--fTNQ0:hover path:nth-child(3){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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

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

.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{width:64px;height:64px;transform:rotate(-180deg);contain:strict}.spinner--1S7_E{transform-origin:50%;animation-duration:1.2s;animation-play-state:paused;animation-timing-function:linear;animation-iteration-count:infinite;stroke-dasharray:471.24}.animating--1Ttfp{animation-play-state:running;will-change:transform}
.playbackToggle--1eQO2{position:relative}.playbackToggle--1eQO2 .spinningCircle--PrOB9{position:absolute;top:calc(50% - 3px);left:50%;width:220%;height:220%;transform:translate(-50%,-50%) translateZ(0);opacity:0;transition:opacity .5s linear 0;pointer-events:none}.playbackToggle--1eQO2 .spinningCircle--PrOB9.isLoading--2WV3M{opacity:1;transition:opacity .7s linear 3s}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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}

.seekButton--2xDMM{opacity:1;animation:popFade--1H2fG 1s ease;pointer-events:auto}

[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}

.isLiveStream--26Srs button:not(:nth-child(3)){opacity:0;pointer-events:none}

@media (max-width:1068px){.playbackControls--10rXZ:not(.playbackControls--nowPlaying--_I1l_) button{margin:0 10px}}

@media (max-width:1500px){.playbackControls--10rXZ:not(.isFullscreen--352ON) .seekButton--2xDMM{opacity:0;animation:none;pointer-events:none}}

@keyframes popFade--1H2fG{0%{transform:scale(.9);opacity:0}to{transform:none;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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.qualityIndicator--1WnBC{display:flex;align-items:center;justify-content:center;height:22px;padding:0;color:var(--snow-white);background-color:var(--glass-white-5);border-radius:4px;transition:color .3s ease,background-color .3s ease}

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

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

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

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

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.currentTime--2fCqA:after{margin:0 .1em;content:" / "}
/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.nativeRangeContainer--2_Ctz{display:flex}

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

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

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

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

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

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

[data-whatinput=mouse] .nativeRange--17fOz:focus{outline:none}

.nativeRange--17fOz::-webkit-slider-runnable-track{box-sizing:border-box;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:none;border-radius:4px;outline:none}

.nativeRange--17fOz::-moz-range-track{box-sizing:border-box;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:none;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{box-sizing:border-box;width:12px;height:12px;margin-top:-4px;background:var(--snow-white);border:none;border-radius:50%;box-shadow:1px 1px 3px 1px rgba(0,0,0,.4);cursor:pointer;-webkit-appearance:none;appearance:none}

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

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

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

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

.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{background:none}

.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]{width:100%;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}

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

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

@media (max-width:836px){.nativeRange--17fOz[type=range]:not(.nowPlayingMode--1bL0S){position:absolute;right:-26px;bottom:86px;z-index:1;display:none;width:64px;transform:rotate(270deg);transition:.15s ease-in}.nativeRange--17fOz[type=range]:not(.nowPlayingMode--1bL0S):hover{display:block}.nativeRange--17fOz[type=range]:not(.nowPlayingMode--1bL0S).isDragging{display:block}.responsiveRangeWrapper--iyZ3Z{position:absolute;right:12px;bottom:54px;z-index:0;display:none;width:24px;height:80px;background:var(--gray-6);border-radius:112px;transition:.15s ease-in}.responsiveRangeWrapper--iyZ3Z:hover{display:block}.responsiveRangeWrapper--iyZ3Z.isDragging{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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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;margin-right:12px;padding:0;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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

.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)}

.buttonIsActive--fy8FJ.isMaster--JkZwa{color:var(--master-gold)}

.buttonIsActive--fy8FJ.isMaster--JkZwa: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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

.item--3F2C3{padding:0 4px;color:var(--glass-white-2);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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

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

.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{flex-shrink:0;width:24px;height:24px;fill:var(--snow-white)}

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

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

.searchField--uWqyP:focus{outline:none}

.clearSearchButton--3hV6U{height:24px;padding:0}
.button--1CS74,.container--3s2l4{display:flex}.button--1CS74{align-items:center;padding:0}.backwardButton--icx5k{margin-right:8px}.forwardButton--3e9vG{}.button--1CS74[disabled]{opacity:.5}.icon--2WIxM{width:24px;height:24px;fill:#fff}
: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;
}/*
 * 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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}/* stylelint enable */.container--16Wli{position:fixed;top:77px;right:24px;z-index:var(--z-index-floating-aside);display:none;flex-flow:column nowrap;align-items:stretch;box-sizing:border-box;width:416px;max-height:0;overflow:hidden;background-color:var(--gray-6);border-radius:8px;box-shadow:0 12px 20px 0 rgba(0,0,0,.3);transform:none;transform-origin:50% 0;opacity:0;transition:all .2s ease;pointer-events:auto}.container--16Wli .focusable--15Y_1{margin:6px 0}.sidebarItem--3_Yuy{padding:8px 0;border-radius:15px}.header--1R_Ud{display:flex;flex-grow:1;align-items:baseline;justify-content:space-between;margin:0 0 12px 16px}.title--28S_I{transform:translateY(4px)}.feedBellContainer--1I3gq{display:flex}.feedBell--1-nIa svg{width:26px;height:24px}.feedBell--1-nIa svg path{fill:var(--glass-white-2);fill-rule:evenodd}.feedBell--1-nIa.hasNewFeedItems--3lb8A svg path{fill:var(--snow-white)}.feedBell--1-nIa.hasNewFeedItems--3lb8A svg circle{fill:var(--red-alert)}.feedEmptyState--3-k4P svg{width:150px}.feedEmptyState--3-k4P path{fill:var(--glass-white-2);fill-rule:evenodd}.container--16Wli.hasWindowsTitlebar--15dLK{top:90px}.container--16Wli.shiftedDown--3gToa{top:84px}.containerIsOpen--3hLx7{display:flex;max-height:calc(100vh - 165px);overflow-y:auto;transform:none;opacity:1;pointer-events:auto}.containerIsOpen--3hLx7.hasWindowsTitlebar--15dLK{max-height:calc(100vh - 193px)}.is-now-playing .container--16Wli{right:69px;z-index:var(--z-index-floating-aside-over-player);max-height:calc(100vh - 67px)}.is-now-playing .container--16Wli.hasWindowsTitlebar--15dLK{max-height:calc(100vh - 98px)}
: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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* stylelint enable */

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

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

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

.grid__nav.grid__nav--visible{margin-top:0;margin-left: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{position:relative;flex:1 1;will-change:scroll-position}

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

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

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

.is-now-playing .grid__aside{top:48px;height:calc(100vh - 42px);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{display:block;width:400px}

.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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{z-index:var(--z-index-sidebar);display:flex;flex-direction:column;flex-shrink:0;width:var(--var-sidebar-width);max-height:100%;background:#242428;transition:50ms ease-in}

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

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

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

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

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

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

.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){.isLoggedIn--ickie .sidebarWrapper{width:var(--var-sidebar-responsive-width)}.isLoggedIn--ickie .contentArea--1raSP{max-width:calc(100vw - var(--var-sidebar-responsive-width))}.isLoggedIn--ickie .header--2brPA{width:calc(100vw - var(--var-sidebar-responsive-width) - var(--header-side-padding)*2)}}

@media (max-width:875px){.isLoggedIn--ickie .sidebarWrapper{position:absolute;width:var(--var-sidebar-collapsed-width);height:100%;max-height:inherit}.isLoggedIn--ickie .sidebarWrapper:hover{width:var(--var-sidebar-width)}.isLoggedIn--ickie .contentArea--1raSP{max-width:calc(100vw - var(--var-sidebar-collapsed-width));padding-left:var(--var-sidebar-collapsed-width)}.isLoggedIn--ickie .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{position:fixed;top:60px;right:24px;z-index:var(--z-index-floating-aside);display:flex;align-items:stretch;width:388px;height:calc(100vh - 166px);transform:translateX(412px);transition:transform .6s ease}
.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{top:74px;right:32px;height:calc(100vh - 216px)}
.container--arp25.hasWindowsTitlebar--3g9TX{top:90px;height:calc(100vh - 196px)}
.container--arp25.shiftedDown--3d5th{top:84px}
.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;
  --lighten-25: #b2b2bf;
  --red-alert: #ff3269;
}

/* 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{position:fixed;top:0;left:0;z-index:var(--z-index-overlay);width:100vw;height:100vh;background-color:var(--black)}

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

/*# sourceMappingURL=app.2b93cfbf2aafb072ee28.css.map*/