:root {
  --backdrop: rgba(0,0,0,0.3);
  --button-border: 8px;
  --spice-text: #FFFFFF;
  --spice-button: #30bf63
}

svg {
  filter: drop-shadow(-2px 2px 2px rgb(0 0 0 / 15%));
}

/*-----------------
EXPERIMENTAL STYLES
-------------------

.Root__main-view,
.main-buddyFeed-container,
.Root__now-playing-bar,
.main-yourLibraryX-entryPoints{
  backdrop-filter: blur(8px)
}

/*-------------------
ALBUM ART BACKGROUND
-------------------*/

.Root__top-container::before {
  content: "";
  background-image: var(--image_url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: background-image var(--fade-time) ease !important;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(var(--blur)) contrast(var(--cont)) saturate(var(--satu)) brightness(var(--bright));
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
  transition: background-image var(--transition);
  opacity: 0.55;
  z-index: 0;
}

/*-------------------------
TRANSPARENT WINDOW CONTROLS
--------------------------*/

html:not(.spotify__container--is-desktop.fullscreen) body.windows:not(.video-full-window)::after {
  content: '';
  position: absolute;
  right: 0;
  z-index: 999;
  backdrop-filter: brightness(2.12);
  width: var(--control-width);
  height: var(--control-height);
}

/*------------
NAVIGATION BAR
-------------*/

.Root__nav-bar  {
  background-color: transparent
} 

.Root__nav-bar [fade="top"] {
  -webkit-mask-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 1) 20%);
}
.Root__nav-bar [fade="full"] {
  -webkit-mask-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 92%, transparent 100%);
}

.main-yourLibraryX-entryPoints {
  background-color: var(--backdrop) !important
}

.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper {
  color: var(--spice-subtext);
}

.main-navBar-navBarLinkActive,
.main-collectionLinkButton-selected {
  border-radius: 8px !important;
}

.main-yourLibraryX-libraryContainer {
  --background-highlight: rgba(255,255,255,0.05) !important;
  --background-press: rgba(255,255,255,0.05);
}

.main-rootlist-wrapper {
  --spice-rgb-shadow: !important;
}

.main-yourLibraryX-isScrolled {
  -webkit-box-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.1s ease;
}

.main-yourLibraryX-listRowEntityImage {
  box-shadow: -2px 4px 6px 2px rgb(0 0 0 / 14%);;
}

/*-------------
NOW PLAYING BAR
--------------*/

.Root__now-playing-bar {
  background-color: var(--backdrop) !important;
  border-radius: 8px;
}

.main-nowPlayingBar-nowPlayingBar {
  height: 90px !important;
  margin-right: 16px;

}

.main-coverSlotCollapsed-container {
  border-radius: 4px !important;
  transform: scale(1.2) !important;
  margin-right: 10px;
  margin-left: 10px;
  box-shadow: -2px 1px 10px 3px rgb(0 0 0 / 20%);
}


.main-nowPlayingWidget-nowPlaying {
  display: -webkit-box !important;
  width: 70% !important;
}

.main-playPauseButton-button {
  background-color: transparent;
}

.main-skipForwardButton-button,
.main-skipBackButton-button, 
.main-repeatButton-button, 
.main-playPauseButton-button,
.main-shuffleButton-button {
  color: var(--spice-text)
}

.main-repeatButton-button.main-repeatButton-active,
.main-shuffleButton-button.main-shuffleButton-active,
.main-genericButton-button {
  transition: all 0.2s ease;
}

.main-repeatButton-button.main-repeatButton-active:not([disabled]):hover,
.main-genericButton-buttonActive:not([disabled]):hover,
.main-shuffleButton-button[aria-checked="true"]:hover {
  filter: drop-shadow(0 0 6px var(--spice-button))
}

.Button-small-small-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle:hover {
    transform: unset !important;
}


.main-nowPlayingWidget-coverExpanded > .main-coverSlotCollapsed-container {
  transform: translateX(-8px) scale(1) !important;
}

.progress-bar {
  --bg-color: rgba(255,555,255,.2);
  --fg-color: #1db954;
  --is-active-fg-color: #2bc260;
}

.progress-bar__slider {
  transition: left 1s linear;
  width: 11px;
  height: 11px
}

.playback-bar .x-progressBar-fillColor {
  transition: transform 1s linear, background-color 0.3s ease !important;
}

.volume-bar__slider-container .x-progressBar-fillColor {
  transition: background-color 0.3s ease !important;
}

.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
  transition: none;
}

.x-progressBar-sliderArea {
  box-shadow: -2px 1px 7px 1px rgb(0 0 0 / 14%)
}

.main-addButton-active,
.control-button-heart {
  transition: filter 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.main-addButton-button[aria-label="Remove from Your Library"]:hover {
  filter: drop-shadow(0 0 6px var(--spice-button));
}

.main-addButton-button[aria-label="Save to Your Library"]:hover {
  filter: drop-shadow(0 0 2px rgba(var(--spice-rgb-selected-row),.7));
}

/*-----
SIDEBAR
------*/

.main-buddyFeed-container {
  --background-base: var(--backdrop)!important;
}

.main-buddyFeed-header {
  padding-top: 0px !important;
  padding-bottom: 0px;
  padding-inline-start: 3px;
}

.main-nowPlayingView-nowPlayingWidget {
  padding-top: 0px !important; 
}

.main-nowPlayingView-content.main-nowPlayingView-gradient {
  background: none !important;
}

.main-nowPlayingView-sectionHeaderSpacing.main-nowPlayingView-lyricsGradient {
  background-color: var(--background-tinted-base);
}

.main-nowPlayingView-section {
  background-color: var(--backdrop);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 10%);
}

.Button-sc-y0gtbx-0  {
  border-radius: var(--button-border) !important;
  transition: 0.2s ease !important;
  border-width: 2px;
  border-color: rgb(255 255 255 / 60%)
}

.Button-sc-y0gtbx-0:hover {
  transform: none;
  box-shadow: 0px 0px 8px 1px rgb(255 255 255 / 20%);
}

.main-nowPlayingView-section.vbsB4OQJkFHLU8SbSGzS {
  padding: 0px !important
}

.hd6a3g_3QyF8MFL0wWs1 {
  background: none !important
}

.GTmlByXpJj7V6AwVq0Vk.ouorHKa6NI5cm666H3tp {
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.95) 75%, transparent 100%) !important;
}

.main-nowPlayingView-artistBioButton:hover {
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
  cursor: pointer;
}

/*--------
WHAT'S NEW
---------*/

.main-whatsNewFeed-listRow {
  background-color: tran !important;
  margin: 4px 0;
  padding: 12px 8px 2px 8px!important;
  gap: 2px 12px;
}

.main-whatsNewFeed-listRow:hover {
  --background-highlight:      ;
  --spice-highlight:     ;
  --background-elevated-press:    ;
  --background-press:     ;
  background-color: var(--backdrop) !important;
}

.main-whatsNewFeed-list {
  margin-top: 2px;
}

.main-whatsNewFeed-content {
  padding: 2px 16px 16px 16px;
}

.main-whatsNewFeed-content > p {
  display: none
}

.main-whatsNewFeed-list:last-child,
.main-buddyFeed-content > div:nth-child(3) > ol:last-child {
  padding-bottom: 8px
}

.main-buddyFeed-overlay {
  border-radius: var(--button-border) !important;
  transition: all 0.3s ease
}

.main-avatar-avatar.main-avatar-withBadge:after {
  background: var(--spice-button);
  -webkit-box-shadow: 0 0 0 1px #000;
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.6);
  height: 12px;
  width: 12px;
  left: 30px;
  bottom: unset !important;
  top: 30px;
}

.main-userWidget-boxCondensed,
.main-avatar-avatar,
.main-avatar-placeholderWrapper {
  border-radius: var(--button-border) !important
}

/*-----------
PLAYLIST VIEW
------------*/

.Root__main-view {
  background-color: var(--backdrop) !important;
}

[dir=ltr] .main-actionBar-ActionBarRow>:not(:last-child) {
  margin-right: 24px;
}

.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover {
  background-color: transparent !important;
}

.main-trackList-trackListRow.main-trackList-selected,
.main-trackList-trackListRow.main-trackList-selected:hover {
  background-color: transparent !important;
}

.playlist-playlist-playlistContent {
  background: none !important;
}

.main-rootlist-wrapper > div[role="presentation"] > div[aria-selected="true"] {
  background-color: hsla(0, 0%, 100% ,.1);
  border-radius: 8px
}

.main-trackList-rowSectionStart > img {
  box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 15%); 
}

.main-trackList-rowMainContent > div {
  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
}

.main-trackList-rowMainContent > span,
.main-trackList-rowSectionVariable > span,
.main-trackList-rowDuration,
.main-trackList-rowPlayCount,
.main-trackList-rowMarker > span {
  text-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

.x-filterBox-filterInput {
  border-radius: var(--button-border);
}

.main-entityHeader-imageContainer {
  border-radius: 10px
}

.main-entityHeader-image{
  border-radius: 8px !important;
  box-shadow: -2px 4px 9px 3px rgb(0 0 0 / 15%);
}

.main-entityHeader-shadow {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.main-entityHeader-container {
  justify-content: center;
}

.playlist-playlist-playlistImageContainer {
  --icon-width: 180px;
  align-self: center;
  flex-shrink: 0;
  height: var(--icon-width);
  width: var(--icon-width);
  min-width: var(--icon-width);
  position: sticky;
  margin-top: auto;
}

.main-playlistEditDetailsModal-imageDropDownButton {
  border-radius: var(--button-border)
}

.main-editImageButton-overlay {
  background-color: rgb(0 0 0 / 50%);
  border-radius: 8px
}

.main-image-image.main-trackList-rowImage.main-image-loaded {
  border-radius: 3px
}

.main-image-image.main-avatar-image.main-image-loaded {
  box-shadow: 0 1px 12px 1px rgb(0 0 0 / 15%);
  border-radius: var(--button-border)
}

.main-nowPlayingView-nowPlayingWidget > div > div:nth-child(1) > div {
  box-shadow: 0px 4px 10px 3px rgb(0 0 0 / 12%);
}

.main-entityHeader-headerText > span.Type__TypeElement-sc-goli3j-0.TypeElement-mestoBold-type {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.Button-sm-buttonSecondary-useBrowserDefaultFocusStyle,
.Button-sc-y0gtbx-0.Button-sm-buttonSecondary-iconLeading-useBrowserDefaultFocusStyle.I3oc8sxg8Duq4kYUGnMo.LEZf9K5hG4hfCKfgr5Xo,
.main-buddyFeed-closeButton {
  border-radius: var(--button-border)
}

.Button-large-large-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle {
  scale: 0.9;
  transition: all 0.2s ease
}

.Button-large-large-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle:hover {
  scale: 1
}

/*-----
TOP BAR
------*/

.main-topBar-container.coBkWVskipFo8KxLKief:before {
  display: none
}

[fade="bottom"] {
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 95%, transparent 100%);
}
[fade="top"] {
  -webkit-mask-image: linear-gradient(transparent 9%, rgba(0, 0, 0, 1) 15%);
}
[fade="full"] {
  -webkit-mask-image: linear-gradient(transparent 9%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 95%, transparent 100%);
}

.main-topBar-background {
  background: none !important;
}

.main-topBar-overlay {
  background-color: transparent !important;
}

.nav-ylx .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
.main-trackList-trackListHeader.main-trackList-trackListHeaderStuck {
  background: none;
  position: static !important;
  box-shadow: unset;
}

.main-entityHeader-topbarTitle {
  cursor: pointer;
}

.I4p8r1UNjIGk9yv3H2Ms,
.IAyWaeDamLJLjxuPeVKw, 
.Button-md-24-buttonTertiary-condensedAll-useBrowserDefaultFocusStyle,
.main-topBar-buddyFeed,
.main-noConnection-isNotice,
.main-topBar-whatsNewFeed,
.main-userWidget-boxCondensed {
  border-radius: var(--button-border) !important;
  transition: 0.2s ease
}

.SFgYidQmrqrFEVh65Zrg > figure > div > img {
  border-radius: 6px !important
}

.Fxnb0xe6bL7I7W8V0p6C,
.main-topBar-buddyFeed,
.main-userWidget-boxCondensed,
.SFgYidQmrqrFEVh65Zrg, 
.SFgYidQmrqrFEVh65Zrg:hover,.main-userWidget-boxCondensed:focus-visible, 
.main-userWidget-boxCondensed:hover, .main-userWidget-boxCondensed[data-context-menu-open=true],
.main-topBar-whatsNewFeed {
  background-color: var(--backdrop) !important;
}

/*----------
PLAY BUTTONS
----------*/

.main-playButton-PlayButton, .main-playButton-PlayButton {
  transition: transform 0.2s ease;
  transform-origin: center;
}

.playlist-playlist-playlist span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set,
.Root__top-bar span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set {
  background: none !important;
  color: var(--spice-text) !important
}

.main-playButton-PlayButton > button > span {
  color: var(--spice-text) !important;
  background: transparent;
  border-radius: var(--button-border);
  right: 4px;
  transition: all 0.2s ease;
}

.main-playButton-PlayButton > button > span {
  background: none !important;
  transform: scale(1.1) !important;
}

.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-PlayButtonContainer .view-homeShortcutsGrid-playButton {
  -webkit-box-shadow: none !important;
  opacity: 0;
}

.main-card-PlayButtonContainer > div > button > span > span > svg,
.main-heroCard-PlayButtonContainer > div > button > span > span > svg {
  filter: drop-shadow(-1px 1px 6px rgba(0, 0, 0, 1)) !important
}

.main-playButton-PlayButton > button > span:hover {
  transform: scale(1.2) !important;
}

.main-playButton-PlayButton:focus, .main-playButton-PlayButton:hover {
  -webkit-transform: none !important;
  transform: none !important
}

.main-playButton-PlayButton {
  background: none !important;
}

.main-topBar-historyButtons .main-topBar-button {
  background-color: var(--backdrop);
  border-radius: 6px;
}

.search-searchCategory-carouselButton,
.search-searchCategory-carouselButton:hover {
  background-color: transparent;
  border-radius: var(--button-border)
}

/*--------
SEARCH BAR
--------*/

.main-heroCard-card {
  background: var(--backdrop) !important;
} 

.main-heroCard-card:hover {
  background: rgba(0,0,0,0.2) !important;
}

.x-searchInput-searchInputInput,
.x-searchInput-searchInputInput:hover {
  background-color: var(--backdrop) !important;
  border-radius: 4px;
  color: rgba(var(--spice-rgb-selected-row),.7);
  height: 32px;
  border-radius: 8px;
  transition: 0.2s ease
}

.search-searchCategory-SearchCategory {
  background: none;
  position: static;
}

.x-searchInput-searchInputInput:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

.x-searchInput-searchInputInput:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}

.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
  margin-top: 3px;
}

.search-searchCategory-categoryGridItem  > button > span {
  border-radius: var(--button-border);
  font-weight: 700 !important;
}

.search-searchCategory-categoryGridItem > button {
  height: 32px !important
}

.search-searchCategory-categoryGridItem > button {
  border-radius: var(--button-border);
  font-weight: 700 !important;
}

.search-searchCategory-categoryGridItem  > button[aria-checked="true"] {
  background-color: var(--backdrop);
}

.search-searchCategory-categoryGridItem  > button[aria-checked="true"]:hover {
  background-color: rgba(0,0,0,0.2);
}

.search-searchCategory-categoryGridItembutton[aria-checked="false"]  > button:hover {
  background-color: rgba(0,0,0,0.2) !important;
  color: var(--spicet-text)
}

.x-searchHistoryEntries-clearSingleSearchHistory {
  top: 20px;
  margin-right: 12px;
  opacity: 0;
  transition: all 0.2s ease;
  border-radius: var(--button-border) !important;
}

.x-searchHistoryEntries-searchHistoryEntry:hover > .x-searchHistoryEntries-clearSingleSearchHistory {
  opacity: 1;
}

.x-searchHistoryEntries-clearSingleSearchHistoryButton {
  border-radius: var(--button-border) !important;
  background-color: var(--backdrop);
  transition: all 0.2s ease;
}

.x-searchHistoryEntries-clearSingleSearchHistoryButton:focus, .x-searchHistoryEntries-clearSingleSearchHistoryButton:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/*-----------
MISCELLANEOUS
-----------*/

.main-actionBarBackground-background,
.main-nowPlayingBar-container {
  background: none !important;
}

.main-entityHeader-background.main-entityHeader-overlay,
.main-entityHeader-backgroundColor {
  display: none;
}

.queue-tabBar-active,
.lyrics-tabBar-active {
  background-color: var(--backdrop);
  height: 32px
}

.queue-tabBar-headerItemLink,
.lyrics-tabBar-active,
.lyrics-tabBar-headerItemLink{
  padding: 2px 16px;
  transition: background-color 0.3s ease;
  height: 32px
}

.queue-tabBar-headerItemLink:hover,
.lyrics-tabBar-headerItemLink:hover {
  padding: 2px 16px;
  background-color: rgba(0,0,0,0.2);
  height: 32px
}
.main-nowPlayingView-sectionHeaderSpacing .main-nowPlayingView-lyricsContent:hover {
  padding-right: 16px !important
}

.lyrics-config-button {
  background-color: var(--backdrop)
}

.IAyWaeDamLJLjxuPeVKw {
  background-color: var(--backdrop);
  color: rgba(var(--spice-rgb-selected-row),.7);
}

.SxHlW6byhoJSUJNugaE1 .Kujbn0F68QOf_o44cNxw {
  border: 1px solid var(--backdrop);
}

.Psc33HXPyazZYAAr1tgz, .I4p8r1UNjIGk9yv3H2Ms {
  background: var(--backdrop);
  border-radius: var(--button-border)
}

.main-shelf-shelfGrid.main-shelf-showAll {
  padding-top: 4px
}

.x-categoryCard-CategoryCard {
  transition: transform 0.2s ease;
  box-shadow: -3px -2px 15px rgb(0 0 0 / 20%);
}

.x-categoryCard-CategoryCard:hover {
  transform: translateY(-4px);
}

.Ft1cMGlqDsCbqmXQyeKN,
.xcTrtCsYOPtSElbX9inq {
  background: none
}

.main-buddyFeed-scrollBarContainer .os-viewport-native-scrollbars-invisible {
  -webkit-mask-image: linear-gradient(transparent 1%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 96%, transparent 100%);
}

.main-playlistEditDetailsModal-save > button > span,
.main-duplicateTrackModal-buttonContainer > button > span {
  margin-left: auto;
  position: relative;
  color: #fff;
  border-radius: var(--button-border);
  background-color: var(--spice-button);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  background-color: rgb(66 180 114);
  border: none;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  min-block-size: 30px !important;
  padding-block: 12px;
}

.main-playlistEditDetailsModal-save > button > span:hover,
.main-duplicateTrackModal-buttonContainer > button > span:hover {
  background-color: #23c483 !important;
  box-shadow:  0px 0px 15px 5px rgba(46, 229, 157, 0.4);
  transform: scale(1) !important;
}

.main-playlistEditDetailsModal-closeBtn {
  border-radius: var(--button-border)
}

.main-popper-container {
  background-color: rgba(0,0,0, 0.45);
  backdrop-filter: blur(25px) !important
}

.hcuLp8V4uEEfWZ4k6aLV {
  background: none;
  border-radius: 8px;
}

.main-devicePicker-controlButton[aria-expanded="true"] {
  fill: #fff;
  color: #fff;
}

.main-popper-arrow, .main-popper-arrow:before {
  display: none;
}

.LyricsScrollContainer {
  -webkit-mask-image: linear-gradient(transparent 5%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 85%, transparent 100%);
}

/*----------
TEXT SHADOWS
----------*/

.main-entityHeader-topbarTitle,
.main-shelf-title,
.main-entityHeader-titleButton,
.main-entityHeader-metaData,
.playlist-playlist-playlistDescription,
.main-entityHeader-detailsText,
.main-entityHeader-title,
.artist-artistVerifiedBadge-wrapper > span,
.main-buddyFeed-link,
.main-trackInfo-name,
.main-trackInfo-contentWrapper,
.main-trackInfo-contentWrapper,
.main-yourLibraryX-listRowSubtitle,
.ListRowTitle__LineClamp-sc-1xe2if1-0,
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper,
.main-yourLibraryX-navItem > a > span,
.playback-bar__progress-time-elapsed,
.cvTLPmjt6T7M85EKcB8w {
  text-shadow: -1px 3px 20px rgb(0 0 0 / 20%);
}

/*--------
ALBUM VIEW
--------*/

.x-album-releasesDropdown {
  background-color: var(--backdrop);
}

.nav-ylx .artist-artistDiscography-headerContainer,
.artist-artistDiscography-headerContainer{
  background: none;
}

.artist-artistDiscography-topBar {
  position: fixed
}

.nav-ylx .artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled,
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled{
  background: none;
  border-bottom: none;
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.artist-artistDiscography-button.artist-artistDiscography-active, .artist-artistDiscography-button:focus, .artist-artistDiscography-button:hover {
  border-radius: var(--button-border);
}

.ButtonInner-sm-iconOnly,
.Button-sm-buttonPrimary-useBrowserDefaultFocusStyle:hover .ButtonInner-sc-14ud5tc-0 {
  background: none ;
  color: var(--background-base,#ffffff);
  scale: 1.2
}

/*-------
HOME VIEW
-------*/

.main-home-homeHeader {
  background: none;
  background-color: var(--backdrops) !important
}

.view-homeShortcutsGrid-grid {
  --item-height: 56px;
  grid-template-columns: repeat(3,1fr);
}

.view-homeShortcutsGrid-shortcut {
  background-color: var(--backdrop);
  border-radius: 4px;
  transition: transform 0.2s ease;
  box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.1);
}

.view-homeShortcutsGrid-shortcut:focus-within, .view-homeShortcutsGrid-shortcut:hover, .view-homeShortcutsGrid-shortcut[data-context-menu-open=true] {
  background: var(--backdrop);
  transform: scale(1.02);
}

.main-card-card {
  background: none !important;
  background-color: var(--backdrop) !important;
  transition: transform 0.2s ease;
  border-radius: 6px;
  box-shadow: 4px 0px 15px rgb(0 0 0 / 20%);
}

.main-card-draggable {
  transition: transform 0.2s ease;
}

.main-card-card .main-cardImage-imageWrapper {
  transition: all 0.35s ease;
  transform-origin: 50% -40px;
  overflow: hidden;
}

.main-card-card:hover .main-cardImage-imageWrapper {
  transform: perspective(76em) rotateX(14deg) translateY(-1px);
  opacity: 0.8
}

.main-heroCard-PlayButtonContainer {
  -webkit-box-shadow: unest;
  box-shadow: unset;
}

.main-gridContainer-gridContainer {
  padding-bottom: 16px !important
}

.artist-artistDiscography-cardGrid {
  padding-top: 34px !important
}

.main-cardImage-imageWrapper {
  transition: opacity 0.25s ease;
}

.main-shelf-shelf {
  margin-bottom: unset !important;
}

.artist-artistOverview-artistShelfSpacer {
  margin-bottom: 16px !important;
}

.main-coverSlotCollapsed-expandButton {
  position: absolute;
  background: var(--backdrop);
  top: 0px;
  margin-right: -5px;
  transform: scale(0.8);
  border-radius: var(--button-border)
}

.main-coverSlotCollapsed-expandButton:focus, 
.main-coverSlotCollapsed-expandButton:hover {
  background: var(--backdrop);
  transform: scale(0.81);
}

.main-card-PlayButtonContainer {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*------
SETTINGS
------*/

.x-settings-equalizerSection {
  background-color: var(--backdrop);
  border-radius: 6px
}

.x-settings-button {
  border-radius: var(--button-border)
}

.main-dropDown-dropDown,
.x-settings-input {
  background-color: var(--backdrop);
  border-radius: var(--button-border)
}

.x-toggle-indicatorWrapper,
.x-toggle-indicatorWrapper:hover {
  background-color: var(--backdrop);
}

input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper {
  background-color: rgb(255 255 255 / 10%)
}

input:hover ~ .x-toggle-indicatorWrapper {
  background-color: var(--backdrop)
}
  
/*---------
ARTIST PAGE
---------*/

.main-entityHeader-title h1 {
  font-size: 50px !important;
  line-height: 50px !important;
}

.under-main-view div {
  opacity: 0.9;
  filter: grayscale(5%)  brightness(94%);
}

.main-entityHeader-background.main-entityHeader-gradient {
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, var(--artist-fade)) 58%, transparent 100%);
}

.artist-artistOverview-artistOverviewContent {
  background-color: transparent;
  margin-top: 10px !important;
}

.artist-artistAbout-container {
  background-color: var(--backdrop);
}

.artist-artistAbout-container:hover {
  -webkit-transform: scale(1);
  transform: scale(1);
  cursor: pointer
}

.main-trackCreditsModal-container,
.main-aboutRecsModal-container,
.main-playlistEditDetailsModal-container,
.profile-userEditDetails-container,
.artist-artistAbout-modal {
  background-color: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(5px);
  border-radius: 8px
}

.main-cardImage-circular,
.main-cardImage-imageWrapper {
  border-radius: var(--button-border) !important
}

.ChipInner__ChipInnerComponent-sc-1ly6j4j-0 {
  border-radius: 8px !important
}

.GenericModal {
  background: none
}

.uJjmxe0T11dUVeW6Biz8 {
  background: none
}

.SxHlW6byhoJSUJNugaE1 > figure > div > img {
  border-radius: 8px
}

.mYvNDps8FDVgHSCzpeqC,
.o6lOM3qmit24hWlOBbw0 > img {
  border-radius: 8px !important
}

.Kujbn0F68QOf_o44cNxw {
  bottom: -4px !important;
  right: -10px !important
}

/*----------
BLOOM LYRICS
----------*/

:root {
  --lyrics-text-direction: left;
}

.Root__lyrics-cinema {
  grid-area: main-view;
}

.lyrics-lyrics-background {
  visibility: hidden !important;
}

.lyrics-lyrics-container {
  --lyrics-color-active: rgb(255, 255, 255) !important;
  --lyrics-color-inactive: rgba(255, 255, 255, 0.35) !important;
  --lyrics-color-passed: rgba(255, 255, 255, 0.8) !important;
  --lyrics-color-messaging: rgba(255, 255, 255, 0.45) !important;
}

.lyrics-lyricsContent-lyric {
  margin: 0.3rem 0;
  transform: scale(1);
  text-shadow: -1px 3px 20px rgb(0 0 0 / 15%);
  transition: text-shadow 400ms ease, color 50ms ease;
}

.lyrics-lyricsContent-text {
  transform-origin: var(--lyrics-text-direction);
  transition: transform 400ms ease;
}

/* lyrics not available message */
.C3pBU1DsOUJJOAv89ZFT {
  color: var(--lyrics-color-passed) !important;
}

.lyrics-lyricsContent-lyric:hover {
  color: var(--lyrics-color-active) !important;
}

.lyrics-lyricsContent-isInteractive .lyrics-lyricsContent-text:active {
  transform: scale(0.9);
}

.lyrics-lyricsContent-active {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  max-width: var(--lyrics-active-max-width);
}

.lyrics-lyricsContent-active .lyrics-lyricsContent-text {
  transform: scale(1.1);
}

/* right sidebar lyrics */
.main-nowPlayingView-lyricsContent > .lyrics-lyricsContent-lyric {
  max-width: 90% !important;
}

/* New Lyrics Plus style */
.lyrics-lyricsContainer-LyricsBackground {
  visibility: hidden !important;
}

.lyrics-lyricsContainer-LyricsContainer {
  --lyrics-color-active: white !important;
  --lyrics-color-inactive: rgba(255, 255, 255, 0.5) !important;
}

.lyrics-lyricsContainer-LyricsLine {
  text-shadow: none;
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {
  transition-property: transform, color, opacity, text-shadow !important;
}

.lyrics-lyricsContainer-Karaoke-Word {
  transition: var(--word-duration) color ease, var(--word-duration) text-shadow ease !important;
  text-shadow: none;
}

.lyrics-lyricsContainer-Karaoke-WordActive,
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine-active {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

.lyrics-lyricsContainer-LyricsUnavailableMessage {
  color: rgba(255, 255, 255, 0.4) !important;
}

.lyrics-lyricsContainer-Provider {
  background: none !important;
}

.Root__lyrics-cinema .os-viewport-native-scrollbars-invisible {
  -webkit-mask-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, transparent 100%);
}

/* fix artist page being visible under lyrics cinema */
.Root__top-container:has(.main-lyricsCinema-lyricsCinemaVisible) .main-topBar-container,
.Root__top-container:has(.main-lyricsCinema-lyricsCinemaVisible) .under-main-view {
  display: none;
}

/*-------
SCROLLBAR
-------*/

.os-scrollbar-handle {
  border-radius: 50px;
}

.os-theme-spotify > .os-scrollbar-vertical {
  margin: 12px 2px 12px 0
}

.os-scrollbar-vertical {
  width: 6px !important;
  transition: width 150ms ease !important;
}

.os-scrollbar-vertical:hover,
.os-scrollbar-vertical:active {
  width: 9px !important;
}

.os-scrollbar-horizontal {
  display: none;
}

.main-nowPlayingView-lyricsContent::-webkit-scrollbar {
  width: 2px !important;
}

.main-nowPlayingView-lyricsContent::-webkit-scrollbar-thumb {
  border-radius: 50px !important;
  background-color: var(--spice-rgb-selected-row)
}

/*-------------------
EXPERIMENTAL FEATURES
-------------------*/

.GenericModal > .main-embedWidgetGenerator-container {
  background-color: var(--backdrop) !important;
  backdrop-filter: blur(15px);
  height: 680px;
}

.main-embedWidgetGenerator-container > .main-trackCreditsModal-mainSection::-webkit-scrollbar {
  width: 4px;
}

.main-embedWidgetGenerator-container > .main-trackCreditsModal-mainSection::-webkit-scrollbar-thumb {
  border-radius: 8px
}

.spicetify-exp-features button.switch {
  border-radius: var(--button-border) !important
}

.spicetify-exp-features input.search {
  border: none !important;
  background-color: rgba(var(--spice-rgb-selected-row),.1) !important;
  border-radius: var(--button-border);
  padding: 10px 36px;
  color: var(--spice-text);
  width: 100%;
}

.spicetify-exp-features button.reset {
  height: 38px;
  color: #ffffff;
  border-radius: var(--button-border) !important;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: none !important;
  transition: all 0.3s ease;
  background-color: #ea5d5d !important;
}

.spicetify-exp-features button.reset:hover {
  background-color: #ec6f6f;
  box-shadow: 0px 0px 15px 5px rgb(229 46 46 / 40%);
  transform: scale(1) !important
}

.spicetify-exp-features .setting-row .col.description {
  font-size: 0.95rem;
}

/*---------
MARKETPLACE
---------*/

.marketplace-tabBar-headerItemLink.marketplace-tabBar-active,
.Dropdown-control {
  background-color: var(--backdrop);
  border-radius: 4px;
  height: 32px;
}

.marketplace-tabBar-headerItemLink {
  padding: 4px 16px;
  transition: background-color 0.3s ease;
  height: 32px;
}

.Dropdown-control {
  background-color: var(--backdrop);
  border-radius: 6px !important;
  color: var(--spice-text);
  padding: 6px 36px 8px 16px;
  transition: all .3s ease;
  font-size: 0.875rem;
  font-weight: 700;
}

.marketplace-header {
  padding-bottom: 80px;
  position: relative;
  margin-top: -55px
}

.Dropdown-arrow {
  top: 15px;
}

.marketplace-tabBar-headerItemLink:hover {
  padding: 4px 16px;
  background-color: rgba(0,0,0,0.2);
}

.main-cardHeader-text {
  padding-top: 12px
}

.searchbar-bar {
  border-style: none;
  background-color: var(--backdrop) !important; 
  }

.marketplace-header-icon-button {
  background-color: var(--backdrop);
}

.marketplace-header-icon-button:hover {
  background-color: rgba(255,255,255,0.01);
}

.marketplace-header {
  padding-top: 10px;
  background: none
}

#marketplace-readme {
  background: var(--backdrop) !important;
  border-radius: 8px !important;
  padding: 20px !important;
}

.Dropdown-control:hover {
  background-color: rgba(0,0,0,0.2);
}

/*-----------------
CONTEXT MENUS
-----------------*/

div#context-menu:before,
.main-contextMenu-menu:before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px !important;
  backdrop-filter: blur(25px) ;
}

.main-contextMenu-menu {
  border-radius: 8px;
  padding: 6px
}

.main-contextMenu-menu::-webkit-scrollbar-thumb {
  border-radius: 50px;
}

.main-contextMenu-menu::-webkit-scrollbar {
  width: 4px !important;
  transition: width 0.2s ease;
}

.main-contextMenu-menuItemButton {
  border-radius: var(--button-border);
}

.main-contextMenu-menu,
.main-contextMenu-tippy,
.aCtCKL9BxAoHeVZS0uRs {
  background-color: rgba(var(--spice-rgb-card), 0.6) !important;
}

.x-filterBox-filterInput {
  height: 36px
}

.main-contextMenu-filterPlaylistSearchContainer {
  height: auto;
}

/* ----ANIMATIONS ----*/

.x-downloadButton-button,
.x-contributorButton-button,
.Button-sm-buttonSecondary-useBrowserDefaultFocusStyle,
.main-moreButton-button,
.Button-sc-y0gtbx-0.Button-sm-buttonSecondary-iconLeading-useBrowserDefaultFocusStyle.I3oc8sxg8Duq4kYUGnMo.LEZf9K5hG4hfCKfgr5Xo,
.Root__top-bar span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set,
.ButtonInner-sc-14ud5tc-0.ButtonInner-lg-iconOnly.encore-bright-accent-set,
.artist-followButton-button,
.IconWrapper__Wrapper-sc-1hf1hjl-0.Wrapper-lg-28-only {
  transition: transform 0.25s ease
}

.x-downloadButton-button:hover,
.x-contributorButton-button:hover,
.main-moreButton-button:hover,
.IconWrapper__Wrapper-sc-1hf1hjl-0.Wrapper-lg-28-only:hover {
  transform: scale(1.1)
}

.Root__top-bar span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set:hover
.playlist-playlist-playlist span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set:hover {
  transform: scale(1.05)
}

.Button-sm-buttonSecondary-useBrowserDefaultFocusStyle:hover,
.artist-followButton-button:hover {
  transform: scale(1.05);
  border-color: hsla(0,0%,100%,.5);
}

/*--------
HOME POPUP 
--------*/

#home-select {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}

div[aria-label="Hazy Settings"] .main-trackCreditsModal-mainSection {
  overflow-y: hidden;
  padding: 24px;
}

.main-trackCreditsModal-container {
  max-height: 100%;
}

.main-trackCreditsModal-originalCredits {
  padding-bottom: 0;
}

.main-userWidget-dropDownMenu li.main-contextMenu-menuItem > div {
  width: 225px;
}

.hazyOptionRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.hazyOptionToggle {
  display: flex;
  background-color: transparent;
  border: none;
}

span.toggleWrapper {
  width: 42px;
  height: 25px;
  background-color: rgb(131,131,131);
  border-radius: 12px;
  display: flex;
  align-items: center;
  cursor: pointer
}

span.toggle {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: white;
  margin-left: 2px;
  transition: 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95)
}

span.toggleWrapper:has(span.toggle.enabled) {
  background-color: var(--spice-button);
}

span.toggle.enabled {
  margin-left: 20px;
}

#src-input {
  margin-bottom: 15px;
}

.main-editImageButton-icon svg {
  fill: currentColor;
}

.main-playlistEditDetailsModal-imageDropDownButton svg {
  fill: currentColor;
}

#home-save {
  display: inline-block;
  margin-left: auto;
  position: relative;
  left: 230px;
  width: 80px;
  height: 38px;
  color: #fff;
  border-radius: var(--button-border);
  background-color: var(--spice-button);
  padding-bottom: 1px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: none;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

#value-reset {
  display: inline-block;
  position: relative;
  left: 210px;
  margin-top: 20px;
  width: 80px;
  height: 38px;
  color: #ffffff;
  border-radius: var(--button-border);
  padding-bottom: 1px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: none;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  background-color: #ea5d5d;
}

#home-save:hover {
  background-color: var(--spice-button);
  box-shadow:  0px 0px 15px 5px rgba(46, 229, 157, 0.4);
}

#value-reset:hover {
  background-color: #ec6f6f;
  box-shadow: 0px 0px 15px 5px rgb(229 46 46 / 40%);
}

/* report issue link */
.issue-button {
  display: block;
  padding-bottom: 10px;
  font-size: 0.8em;
  width: fit-content;
  opacity: 0.8
}

.issue-button:hover {
  opacity: 0.9
}

.blur-amount {
  width: 100%;
  padding-top: 10px;
}

.slider-container {
  display: flex;
  padding: 15px 0 0 0;
}

.hazyOptionDesc {
  text-align: right;
  margin-right: 10px;
  font-size: 0.875rem;
}

.slider-container > div {
  color: rgb(255 255 255 / 60%);
  font-size: 0.8rem;
  margin-top: 2px;
  padding-left: 0;
  width: 25px
}

.slider-container label {
  text-align: right;
  margin-right: 10px;
  font-size: 0.875rem;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80%; 
  height: 4px; 
  background: rgba(var(--spice-rgb-selected-row),.3);
  border-radius: 2px;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin-top: 10px;
  margin-right: 12px;
}

.slider-value {
  padding-left: 0;
  width: 45px;
  display: flex;
}

.slider-value::-webkit-scrollbar-thumb {
  height: 2px;
  width: 2px
}

.slider-value > div[id="unit"] {
  flex-shrink: 0;
}


.slider-value > div[id="unit"],
.slider-value > div[contenteditable="true"] {
  color: rgb(255 255 255 / 60%);
  font-size: 0.8rem;
  margin-top: 0px;
  transition: all 0.3s ease !important;
}


.slider-value > div[contenteditable="true"]:hover,
.slider-value > div[contenteditable="true"]:focus {
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 60%);
}

.slider-value > div[contenteditable="true"]:hover + div[id="unit"],
.slider-value > div[contenteditable="true"]:focus + div[id="unit"]{
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 60%);
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-color: var(--spice-text);
  border: 0;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow),.5);
  box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow),.5);
  height: 9px;
  width: 9px;
}

.slider::-webkit-slider-thumb:active {
  cursor: grab;
}

/*-------------------
POPUP MODAL
-------------------*/

#banner-select {
  grid-area: banner-image;
  width: auto;
}
.banner-input {
  display: none;
}
#src-select {
  grid-area: src-select;
}
.main-playlistEditDetailsModal-textElement:focus {
  background-color: rgba(var(--spice-rgb-selected-row), 0.1);
}
