/* ==UserStyle==
@name           Last.fm Catppuccin
@namespace      github.com/catppuccin/userstyles/styles/lastfm
@homepageURL 	https://github.com/catppuccin/userstyles/tree/main/styles/lastfm
@version        1.1.1
@description    Soothing pastel theme for Last.fm
@author         Catppuccin
@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.css
@license 		MIT

@preprocessor   less
@var select flavor "Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ]
@var checkbox removepromos "Remove Advertisements" 1
==/UserStyle== */
@-moz-document domain("last.fm") {

    #catppuccin(@flavor, @accentColor);

    @catppuccin: {
        @latte: {
            @rosewater: #dc8a78;
            @flamingo: #dd7878;
            @pink: #ea76cb;
            @mauve: #8839ef;
            @red: #d20f39;
            @maroon: #e64553;
            @peach: #fe640b;
            @yellow: #df8e1d;
            @green: #40a02b;
            @teal: #179299;
            @sky: #04a5e5;
            @sapphire: #209fb5;
            @blue: #1e66f5;
            @lavender: #7287fd;
            @text: #4c4f69;
            @subtext1: #5c5f77;
            @subtext0: #6c6f85;
            @overlay2: #7c7f93;
            @overlay1: #8c8fa1;
            @overlay0: #9ca0b0;
            @surface2: #acb0be;
            @surface1: #bcc0cc;
            @surface0: #ccd0da;
            @base: #eff1f5;
            @mantle: #e6e9ef;
            @crust: #dce0e8;
        }
        @frappe: {
            @rosewater: #f2d5cf;
            @flamingo: #eebebe;
            @pink: #f4b8e4;
            @mauve: #ca9ee6;
            @red: #e78284;
            @maroon: #ea999c;
            @peach: #ef9f76;
            @yellow: #e5c890;
            @green: #a6d189;
            @teal: #81c8be;
            @sky: #99d1db;
            @sapphire: #85c1dc;
            @blue: #8caaee;
            @lavender: #babbf1;
            @text: #c6d0f5;
            @subtext1: #b5bfe2;
            @subtext0: #a5adce;
            @overlay2: #949cbb;
            @overlay1: #838ba7;
            @overlay0: #737994;
            @surface2: #626880;
            @surface1: #51576d;
            @surface0: #414559;
            @base: #303446;
            @mantle: #292c3c;
            @crust: #232634;
        }
        @macchiato: {
            @rosewater: #f4dbd6;
            @flamingo: #f0c6c6;
            @pink: #f5bde6;
            @mauve: #c6a0f6;
            @red: #ed8796;
            @maroon: #ee99a0;
            @peach: #f5a97f;
            @yellow: #eed49f;
            @green: #a6da95;
            @teal: #8bd5ca;
            @sky: #91d7e3;
            @sapphire: #7dc4e4;
            @blue: #8aadf4;
            @lavender: #b7bdf8;
            @text: #cad3f5;
            @subtext1: #b8c0e0;
            @subtext0: #a5adcb;
            @overlay2: #939ab7;
            @overlay1: #8087a2;
            @overlay0: #6e738d;
            @surface2: #5b6078;
            @surface1: #494d64;
            @surface0: #363a4f;
            @base: #24273a;
            @mantle: #1e2030;
            @crust: #181926;
        }
        @mocha: {
            @rosewater: #f5e0dc;
            @flamingo: #f2cdcd;
            @pink: #f5c2e7;
            @mauve: #cba6f7;
            @red: #f38ba8;
            @maroon: #eba0ac;
            @peach: #fab387;
            @yellow: #f9e2af;
            @green: #a6e3a1;
            @teal: #94e2d5;
            @sky: #89dceb;
            @sapphire: #74c7ec;
            @blue: #89b4fa;
            @lavender: #b4befe;
            @text: #cdd6f4;
            @subtext1: #bac2de;
            @subtext0: #a6adc8;
            @overlay2: #9399b2;
            @overlay1: #7f849c;
            @overlay0: #6c7086;
            @surface2: #585b70;
            @surface1: #45475a;
            @surface0: #313244;
            @base: #1e1e2e;
            @mantle: #181825;
            @crust: #11111b;
        }
    }

    @rgb-raw: #fff;
    #rgbify(@color) {
        @rgb-raw: red(@color) green(@color) blue(@color);
    }

    #catppuccin(@lookup, @accent) {
        @rosewater: @catppuccin[@@lookup][@rosewater];
        @flamingo: @catppuccin[@@lookup][@flamingo];
        @pink: @catppuccin[@@lookup][@pink];
        @mauve: @catppuccin[@@lookup][@mauve];
        @red: @catppuccin[@@lookup][@red];
        @maroon: @catppuccin[@@lookup][@maroon];
        @peach: @catppuccin[@@lookup][@peach];
        @yellow: @catppuccin[@@lookup][@yellow];
        @green: @catppuccin[@@lookup][@green];
        @teal: @catppuccin[@@lookup][@teal];
        @sky: @catppuccin[@@lookup][@sky];
        @sapphire: @catppuccin[@@lookup][@sapphire];
        @blue: @catppuccin[@@lookup][@blue];
        @lavender: @catppuccin[@@lookup][@lavender];
        @text: @catppuccin[@@lookup][@text];
        @subtext1: @catppuccin[@@lookup][@subtext1];
        @subtext0: @catppuccin[@@lookup][@subtext0];
        @overlay2: @catppuccin[@@lookup][@overlay2];
        @overlay1: @catppuccin[@@lookup][@overlay1];
        @overlay0: @catppuccin[@@lookup][@overlay0];
        @surface2: @catppuccin[@@lookup][@surface2];
        @surface1: @catppuccin[@@lookup][@surface1];
        @surface0: @catppuccin[@@lookup][@surface0];
        @base: @catppuccin[@@lookup][@base];
        @mantle: @catppuccin[@@lookup][@mantle];
        @crust: @catppuccin[@@lookup][@crust];
        @accent: @catppuccin[@@lookup][@@accentColor];

        @accent-dim: fadeout(@accent, 0.5);

        & not when (@lookup = latte) {
            color-scheme: dark;
            .layout-image {
                background: @base;
                .layout-image-image {
                    &[src="https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.jpg"],
                    &[src="https://lastfm.freetls.fastly.net/i/u/237x178/2a96cbd8b46e442fc41c2b86b821562f.jpg"],
                    &[src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] {
                        mix-blend-mode: screen;
                        filter: invert(1);
                    }
                }
            }
            [src="https://lastfm.freetls.fastly.net/i/u/avatar70s/2a96cbd8b46e442fc41c2b86b821562f.jpg"],
            [src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg"],
            [src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] {
                mix-blend-mode: screen;
                filter: invert(1);
            }
            .cover-art {
                background: @base;
            }
            .avatar:after, .cover-art:after, .image-list-item:after, .video-thumbnail:after {
                box-shadow: inset 0 0 0 1px rgb(@subtext0, 7%);
            }
        }

        /*------UNIVERSAL STYLES INCASE SOME GET MISSED------*/
        body {
            color: @text;
        }
        h1 {
            color: @accent;
        }
        .mimic-link {
            color: @sapphire;
        }
        /*-----------CHECKBOXES AND RADIOS----------*/
        .lfm-form-radio input[type=radio]:checked + label:before {
            border: 1px solid @accent;
            box-shadow: inset 0 0 0 4px @accent;
            background-color: @base;
        }
        .lfm-form-radio input[type=radio] + label:before {
            background-color: @crust;
            border: 2px solid @surface1;
        }
        /*-----------REMOVE PRO SUBSCRIPTION REMINDERS------*/
        if removepromos {
            .your-progress .buffer-2,
            .secondary-nav-item--month,
            .secondary-nav-item--year,
            .auth-dropdown-pro-text {
                display: none !important;
            }
            .listening-report-promo--month,
            .listening-report-promo--year {
                display: none !important;
            }
        }

        /* HOME PAGE */
        .main-content,
        .container,
        .content-top-has-nav .content-top,
        .two-column-layout .content-top {
            background-color: @base;
        }

        .content-top-has-nav .content-top::after,
        .two-column-layout .content-top::after {
            border-top: 1px solid @accent-dim;
        }

        .homefeed .content-top .secondary-nav-item-link--active,
        .home-welcome-header {
            color: @text;
        }
        .secondary-nav-item-link {
            color: @subtext0;
        }

        .secondary-nav-item-link:focus,
        .secondary-nav-item-link:hover,
        .homefeed .content-top .secondary-nav-item-link--active,
        .homefeed .content-top .secondary-nav-item-link--active:focus,
        .homefeed .content-top .secondary-nav-item-link--active:hover {
            color: @text;
        }

        .homefeed .content-top .secondary-nav-item--artists .secondary-nav-item-link:hover::after,
        .homefeed .content-top .secondary-nav-item--albums .secondary-nav-item-link:hover::after,
        .homefeed .content-top .secondary-nav-item--tracks .secondary-nav-item-link:hover::after,
        .homefeed .content-top .secondary-nav-item--events .secondary-nav-item-link:hover::after,
        .homefeed--artists .content-top .secondary-nav-item-link--active::after,
        .homefeed--albums .content-top .secondary-nav-item-link--active::after,
        .homefeed--tracks .content-top .secondary-nav-item-link--active::after,
        .homefeed--events .content-top .secondary-nav-item-link--active::after {
            background-color: @accent-dim;
        }
        .recs-feed .recs-feed-cover-image-wrap:after {
            background-image: linear-gradient(180deg, transparent 0, rgba(@mantle, 0.4) 50%, rgba(@mantle, 0.7) 50%, rgba(@mantle, 0.7) 100%);
        }

        .recs-feed .context {
            background: @mantle;
            box-shadow: inset 1px 0 darken(@mantle, 3%), inset -1px -1px @crust;
            color: @text;
        }
        .recs-feed .recs-feed-item {
            background: transparent;
            box-shadow: none;
        }
        a {
            color: @accent;
        }
        .stationlink-list .stationlink {
            color: @subtext0;
        }

        .stationlink-list .stationlink:focus,
        .stationlink-list .stationlink:hover {
            color: @text;
        }

        .stationlink-list .stationlink::after {
            border-bottom: 1px solid @accent-dim;
        }

        .stationlink-list .stationlink::before {
            background-color: @accent;
            -webkit-filter: invert(0%);
            filter: invert(0%);
        }



        .stationlink-list .stationlink:focus::before,
        .stationlink-list .stationlink:hover::before {
            background-color: @subtext0;
        }

        .subscribe-cta,
        .mpu-subscription-upsell,
        .mpu-subscription-upsell--mpu {
            display: none;
        }
        .join-cta {
            background-color: transparent;
        }
        .join-cta h3 {
            color: @accent;
        }


        .lazy-features-footer {
            display: none;
        }





        /* LIVE */
        /* MUSIC */
        .content-top-header {
            color: @accent;
        }

        .minimal-navigation-item-link,
        .minimal-navigation-item-link:focus,
        .minimal-navigation-item-link:hover {
            color: @subtext0;
        }

        .minimal-navigation-item-link--active,
        .minimal-navigation-item-link--active:focus,
        .minimal-navigation-item-link--active:hover {
            color: @text;
        }

        .music-section-heading {
            color: @text;
        }

        .music-more-artists-item-name a,
        .music-more-artists-item-name a:focus,
        .music-more-artists-item-name a:hover,
        .music-releases-item-name a,
        .music-releases-item-name a:focus,
        .music-releases-item-name a:hover {
            color: @text;
        }

        .music-releases-item-artist,
        .column-tracks-item-name,
        .column-tracks-item-artist,
        .music-gallery-artist {
            color: @text;
        }

        .music-section-rediscover-subscribe-banner-cta {
            background-color: @base;
        }

        /* PROFILE */
        /* BANNER */
        .header--overview .header-background {
            opacity: 0.4;
        }



        /* SEARCH */
        .artist-result-heading {
            color: @text;
        }

        .album-result-heading {
            color: @text;
        }



        /* RECOMMENDATIONS */
        .recs-feed-title a {
            color: @text !important;
        }
        if (theme=="Latte") {
            .recs-feed-title a {
                color: @crust !important;
            }
        }
        .recs-feed .context {
            background: @mantle;
            box-shadow: none;
            color: @subtext1;
        }
        .recs-feed-item--artist .context:after,
        .recs-feed .recs-feed-item--artist .recs-feed-avatar:after {
            background-color: fadeout(@yellow, 1) !important;
        }
        .recs-feed-item--album .context:after,
        .recs-feed .recs-feed-item--album .recs-feed-avatar:after {
            background-color: fadeout(@green, 1) !important;
        }
        .recs-feed-item--track .context:after,
        .recs-feed .recs-feed-item--track .recs-feed-avatar:after {
            background-color: fadeout(@blue, 1) !important;
        }
        .secondary-nav {
            box-shadow: inset 0 -1px @accent;
        }
        .music-recommended-artists-artist-name,
        .music-recommended-artists-context,
        .pagination-page,
        .pagination-next {
            color: @text;
        }

        .music-recommended-albums-item-name,
        .music-recommended-albums-album-artist,
        .music-recommended-albums-album-context {
            color: @text;
        }

        .recommended-tracks-item-name,
        .recommended-tracks-item-artist {
            color: @text;
        }

        .big-tags-item-context {
            color: @text;
        }

        p {
            color: @subtext0;
        }




        /* CHARTS */
        .adaptive-skin-wrapper,
        .row {
            background-color: @base;
        }

        .two-column-layout .container {
            background-size: 0;
            background-position: 0 0;
            background-color: @base;
        }

        ._buffer-reset,
        .sidebar-heading {
            color: @accent;
        }

        .sidebar-group-heading {
            color: @text;
        }

        .resource-list--sidebar-item-name {
            color: @text;
        }
        .js-link-block.globalchart-item {
            background-color: @crust;
            box-shadow: 0 1px @base, inset 0 -1px @base;
        }
        .globalchart a,
        .globalchart a:focus,
        .globalchart a:hover {
            color: @text;
        }

        .footer-top-row {
            background-color: @mantle;
        }
        .two-column-layout .container {
            background-color: #00000000;
        }

        /* EVENTS */
        .events-filter,
        .events-filter-recommended,
        .dropdown-menu-clickable-button:focus,
        .dropdown-menu-clickable-button:hover {
            color: @text;
        }

        .events-filters {
            border-bottom: 1px solid @accent;
        }

        .events-list-item-venue--address,
        .events-list-item-event--lineup {
            color: @subtext0;
        }
        .events-list-anhv1 a,
        .events-list-anhv1 a:focus,
        .events-list-anhv1 a:hover,
        .events-list-item-event--title,
        .events-list-item-venue--title {
            color: @text;
        }




        /* FEATURES */
        .features-header .features-teaser-body,
        .features-teaser-wrap--promoted .features-teaser-body {
            background: @base;
        }

        .features-teaser-title a,
        .features-teaser-title a:focus,
        .features-teaser-title a:hover {
            color: @text;
        }




        /* FEATURES POST */
        .features-post-header-body {
            background-color: @base;
        }

        .features-post-header-title {
            color: @accent;
        }

        .features-post-artist {
            color: @text;
        }

        .features-post-byline-item.features-post-author {
            color: @text
        }




        /* PROFILE */
        .header-avatar-add,
        .header-avatar-add:not(.cta--inactive):focus,
        .header-avatar-add:not(.cta--inactive):hover {
            background-color: @accent-dim;
        }
        .dropdown-menu-clickable,
        #share-library-artist,
        .dropdown-menu-clickable-item:active,
        body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:focus,
        body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:hover {
            background-color: @base;
        }
        .header--overview {
            background-color: @mantle;
        }
        .header-metadata .header-metadata-title,
        .header-scrobble-since,
        .header-title-display-name {
            color: @subtext1;
        }
        .chartlist-play-button::before {
            background-color: @accent;
            -webkit-filter: invert(0%);
            filter: invert(0%);
        }

        .chartlist-play-button:focus:focus::before,
        .chartlist-play-button:focus:hover::before,
        .chartlist-play-button:hover:focus::before,
        .chartlist-play-button:hover:hover::before {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
            background-color: @subtext0;
        }

        .text-Color-link,
        h2,
        .dropdown-menu-clickable-item--selected,
        .dropdown-menu-clickable-item--selected:focus,
        .dropdown-menu-clickable-item--selected:hover,
        .dropdown-menu-clickable-button,
        .dropdown-menu-clickable-button:hover,
        .dropdown-menu-clickable-button:active,
        .dropdown-menu-clickable-button.disclose-active {
            color: @accent;
        }
        .dropdown-menu-clickable-item,
        .dropdown-menu-clickable-item:active,
        body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:focus,
        body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:hover {
            color: @text;
        }
        .btn-secondary {
            background-color: @accent-dim;
            color: @crust;
        }

        body:not(.js-focus-visible) body:not([data-whatinput="touch"]) .btn-secondary:focus,
        body:not([data-whatinput="touch"]) .btn-secondary .focus-visible,
        body:not([data-whatinput="touch"]) .btn-secondary:hover {
            background-color: @accent;
            color: @crust;
        }
        input[type=password] {
            background-color: @crust !important;
            border-color: @crust !important;
        }


        @-webkit-keyframes AnimationName {
            0% {
                background-position: 0% 50%
            }
            50% {
                background-position: 100% 51%
            }
            100% {
                background-position: 0% 50%
            }
        }
        @-moz-keyframes AnimationName {
            0% {
                background-position: 0% 50%
            }
            50% {
                background-position: 100% 51%
            }
            100% {
                background-position: 0% 50%
            }
        }
        @keyframes AnimationName {
            0% {
                background-position: 0% 50%
            }
            50% {
                background-position: 100% 51%
            }
            100% {
                background-position: 0% 50%
            }
        }

        .chartlist-row--highlight,
        .chartlist-row--now-scrobbling {
            /*background-color: #5a1717;*/
            background: linear-gradient(270deg, @base 60%, rgba(@accent, 0.2));
            background-size: 200% 200%;
            -webkit-animation: AnimationName 10s ease infinite;
            -moz-animation: AnimationName 10s ease infinite;
            animation: AnimationName 10s ease infinite;
        }

        .chartlist-name,
        .chartlist-artist {
            color: @subtext0;
        }

        .chartlist-break::after,
        .chartlist-row::after {
            border-bottom: 1px solid @surface0;
        }

        .chartlist-row:hover {
            background-color: @crust;
        }
        .chartlist-count-bar-slug {
            background-color: transparent !important;
        }

        .chartlist-count-bar-slug {
            background-image: linear-gradient(to right, @accent, @accent);
            color: @crust;
        }
        .chartlist-count-bar-value {
            color: @crust;
        }
        a:focus .chartlist-count-bar-slug,
        a:hover .chartlist-count-bar-slug {
            background-color: @accent-dim;
        }

        .chartlist-count-bar-link,
        .chartlist-count-bar-link:focus,
        .chartlist-count-bar-link:hover {
            color: @text;
        }

        .listening-report-promo {
            background-color: @mantle;
        }
        .listening-report-promo:focus,
        .listening-report-promo:hover {
            background-color: @crust;
        }
        .listening-report-promo-title {
            color: @subtext0;
        }
        .listening-report-promo-date {
            color: @accent-dim;
        }

        .shout-form textarea {
            background-color: @crust;
        }

        .chartlist-index {
            color: @text;
        }

        .chartlist tr:nth-child(1) td.chartlist-index {
            font-weight: bold;
            color: @accent;
        }





        /* LISTENING REPORT */
        .user-dashboard-module {
            background-color: @base !important;
        }
        .highcharts-background {
            fill: @base !important;
        }
        .header-metadata-display,
        .scrobble-stats-info {
            color: @text;
        }
        .user-dashboard-legend-item:before {
            background: transparent !important;
        }
        .user-dashboard-legend-item--current::before {
            background-image: linear-gradient(159deg, @accent, @accent) !important;
        }
        .user-dashboard-legend-item--comparison::before {
            background-image: linear-gradient(159deg, @accent-dim, @accent-dim) !important;
        }
        .header-metadata-title,
        .user-dashboard-scrobble-stats-meta-description,
        .user-dashboard-scrobble-stats-previous {
            color: var(--subtext1);
        }
        .user-dashboard-heading {
            color: @accent;
        }

        .listening-report-top .secondary-nav {
            border-bottom: 1px solid @overlay0;
        }
        .listening-report-brick {
            border: 1px solid @overlay0;
            &:focus,
            &:hover {
                border: 1px solid @overlay0;
                box-shadow: none;
            }
        }
        .listening-report-library-link {
            &,
            &:hover {
                color: @crust !important;
                background-color: @accent !important;
            }
        }
        .user-dashboard-history-subscribe-banner-cta {
            display: none;
        }

        .duration-data,
        .duration-data-value > .js-ticker,
        .user-dashboard-small-data-point-value > .js-ticker,
        .user-dashboard-small-data-point-value > .js-ticker {
            color: @text;
        }

        .highcharts-series.highcharts-series-1.highcharts-column-series.highcharts-color-undefined.highcharts-tracker > a > rect {
            fill: @accent;
        }

        .user-dashboard-module {
            background: @crust;
            border-color: @accent-dim;
        }

        .user-dashboard-loved-tracks .user-dashboard-big-datapoint-value a {
            color: @crust;
        }

        .user-dashboard-catalogue-item-total a {
            text-shadow: -1px -1px 0 @crust, 1px -1px 0 @crust, -1px 1px 0 @crust, 1px 1px 0 @crust;
        }

        .user-dashboard-module .user-dashboard-module-share:hover,
        body:not([data-whatinput="mouse"]) .user-dashboard-module .user-dashboard-module-share:focus,
        .user-dashboard-module:hover .user-dashboard-module-share,
        body:not([data-whatinput="mouse"]) .user-dashboard-module:focus .user-dashboard-module-share {
            opacity: 0.1;
        }

        .highcharts-text-outline {
            fill: @crust;
            stroke: @crust;
        }

        tspan {
            color: @text;
            fill: @text;
        }

        .user-dashboard-catalogue-item-name.user-dashboard-catalogue-item-link.link-block-target {
            color: @text;
        }


        .user-dashboard-catalogue-item-artist-name.user-dashboard-catalogue-item-link {
            color: @subtext0;
        }



        .highcharts-background {
            fill: @crust;
        }

        .user-dashboard-module-title.js-user-dashboard-module-title {
            color: @accent;
        }

        .discovery-stat-top-item-name a,
        .discovery-stat-top-item-name a:focus,
        .discovery-stat-top-item-name a:hover {
            color: @text;
        }
        .discovery-stat-top-item-artist:focus,
        .discovery-stat-top-item-artist:hover,
        .discovery-stat-top-item-artist a,
        .discovery-stat-top-item-artist a:focus,
        .discovery-stat-top-item-artist a:hover {
            color: @subtext0;
        }

        .link-block-target.user-dashboard-leaderboard-profile-link {
            color: @text;
        }

        .user-dashboard-leaderboard-item--highlight .user-dashboard-leaderboard-stat {
            color: @subtext0;
        }



        /* Listening Clock*/
        #SvgjsG1144 {
            stroke: @crust;
        }
        #SvgjsCircle1169 {
            fill: @crust;
        }
        #SvgjsText1199,
        #SvgjsText1200,
        #SvgjsText1201,
        #SvgjsText1202 {
            fill: @subtext0;
        }
        #SvgjsSvg1203 #Layer_1 g path {
            fill: @accent;
        }
        #SvgjsG1023 g circle {
            fill: @accent;
        }





        /* LIBRARY */
        .col-sidebar._buffer-sidebar > figure > div > div > svg > .highcharts-background {
            fill: @base;
        }

        .highcharts-point {
            fill: @accent-dim;
        }

        .highcharts-axis-labels > text {
            fill: @text !important;
        }






        /* FOLLOWING */
        .user-list-name {
            color: @text;
        }
        .user-follow,
        .user-follow:after {
            color: @accent;
            background-color: @surface0;
        }

        /* FOLLOW BUTTON*/
        [data-toggle-button-current-state=unfollowed] .header-follower-btn:before {
            background-color: @red;
            color: @text;
        }
        [data-toggle-button-current-state=followed] .header-follower-btn:before {
            background-color: @green;
            color: @text;
        }
        [data-toggle-button-current-state=followed] .header-follower-btn:hover:before {
            background-color: @red;
            color: @text;
        }

        .header-follower-btn {
            color: @accent;
        }




        /* BOOKMARKS */
        .music-bookmarks-artists-item-name {
            color: @text;
        }

        /* TASTE-O-METER COLORS */
        .tasteometer-donut-base {
            fill: @surface1;
        }
        .tasteometer-avatar img {
            border: 2px solid @surface1;
        }
        .tasteometer-compat-very_low .tasteometer-compat-Color {
            color: @subtext0;
            fill: @subtext0;
        }
        .tasteometer-compat-low .tasteometer-compat-Color {
            color: @mauve;
            fill: @mauve;
        }
        .tasteometer-compat-medium .tasteometer-compat-Color {
            color: @green;
            fill: @green;
        }
        .tasteometer-compat-very_high .tasteometer-compat-Color {
            color: @peach;
            fill: @peach;
        }
        .tasteometer-compat-super .tasteometer-compat-Color {
            color: @red;
            fill: @red;
        }




        /* ARTIST */
        .section-with-separator::after {
            background-color: @base;
        }
        .header-new-bookmark-button,
        .header-new-download-button,
        .header-new-love-button,
        .header-new-more-button,
        body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-bookmark-button:focus,
        body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-download-button:focus,
        body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-love-button:focus,
        body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-more-button:focus,
        body:not([data-whatinput=touch]) .header-new-bookmark-button .focus-visible,
        body:not([data-whatinput=touch]) .header-new-bookmark-button:hover,
        body:not([data-whatinput=touch]) .header-new-download-button .focus-visible,
        body:not([data-whatinput=touch]) .header-new-download-button:hover,
        body:not([data-whatinput=touch]) .header-new-love-button .focus-visible,
        body:not([data-whatinput=touch]) .header-new-love-button:hover,
        body:not([data-whatinput=touch]) .header-new-more-button .focus-visible,
        body:not([data-whatinput=touch]) .header-new-more-button:hover {
            color: @base;
            background-color: @accent;
        }
        .wiki-block-inner,
        .catalogue-metadata-heading,
        .catalogue-metadata-description,
        .header-metadata-tnew-title {
            color: @subtext0;
        }

        .similar-albums-item-name a,
        .similar-albums-item-name a:focus,
        .similar-albums-item-name a:hover {
            color: @text;
        }

        .text-18 {
            color: @accent;
        }

        .artist-similar-artists-sidebar-item-name a,
        .artist-similar-artists-sidebar-item-name a:focus,
        .artist-similar-artists-sidebar-item-name a:hover {
            color: @text;
        }

        .events-list-item-event-name.link-block-target > span {
            color: @text;
        }

        .events-list-item-venue > span {
            color: @subtext0;
        }

        .artist-top-albums-item-name a,
        .artist-top-albums-item-name a:focus,
        .artist-top-albums-item-name a:hover {
            color: @text;
        }

        .listeners-section-item-name a,
        .listeners-section-item-name a:focus,
        .listeners-section-item-name a:hover {
            color: @text;
        }

        .catalogue-overview-similar-artists-full-width-item-name a,
        .catalogue-overview-similar-artists-full-width-item-name a:focus,
        .catalogue-overview-similar-artists-full-width-item-name a:hover {
            color: @text;
        }

        .resource-external-link,
        .resource-external-link:hover {
            color: @text;
        }
        .shout {
            border-bottom: 1px solid @surface0;
        }
        .shout-container--active {
            background-color: fadeout(@surface1, 0.3);
        }
        .shout-user a {
            color: @text;
        }
        .shout-form {
            border: none;
        }
        .js-playlink-station.desktop-playlink.inline-section-control.stationlink {
            color: @text;
        }
        .section-with-settings .section-control:before {
            border-right: 1px solid @subtext0;
        }

        .header-metadata .header-metadata-display a {
            color: @accent;
        }

        .big-artist-list-title a {
            color: var(--subtext1);
        }
        .big-artist-list-title a:hover {
            color: @text;
        }



        /* SIMILAR ARTISTS */
        .similar-artists-item-name {
            color: @text;
        }

        .similar-artists-item-wiki-inner-2 {
            color: @subtext0;
        }

        .section-playlink::before {
            background-color: @accent;
            -webkit-filter: invert(0%);
            filter: invert(0%);
        }

        .section-playlink:hover::before {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
            background-color: @subtext0;
        }

        .section-playlink.js-playlink-station {
            color: @text;
        }






        /* TRACK */
        .source-album-artist a,
        .source-album-artist a:focus,
        .source-album-artist a:hover,
        .source-album-name a,
        .source-album-name a:focus,
        .source-album-name a:hover {
            color: @text;
        }

        .track-similar-tracks-item-name a,
        .track-similar-tracks-item-name a:focus,
        .track-similar-tracks-item-name a:hover {
            color: @text;
        }

        .about-artist-name a,
        .about-artist-name a:focus,
        .about-artist-name a:hover {
            color: @text;
        }

        .catalogue-overview-similar-artists-item-name a,
        .catalogue-overview-similar-artists-item-name a:focus,
        .catalogue-overview-similar-artists-item-name a:hover {
            color: @text;
        }

        .stationlink::before {
            background-color: @accent;
            -webkit-filter: invert(0%);
            filter: invert(0%);
        }

        .stationlink:focus::before,
        .stationlink:hover::before {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
            background-color: @subtext0;
        }

        .video-preview-upload-cta {
            background-color: @crust;
            box-shadow: 0 0 0 2px @accent-dim;
        }

        .video-preview-upload-cta:not(.cta--inactive):focus,
        .video-preview-upload-cta:not(.cta--inactive):hover {
            background-color: @base;
        }

        .highcharts-plot-bands-0 > path {
            fill: @overlay0;
        }

        .listener-trend .highcharts-area {
            fill: fadeout(@red, 0.1);
        }

        .listener-trend .highcharts-graph {
            stroke: @red;
        }

        .Colored-cta {
            background-color: fadeout(@surface2, 0.3);
        }
        .Colored-cta:not(.cta--inactive):focus,
        .Colored-cta:not(.cta--inactive):hover {
            background-color: fadeout(@surface2, 0.7);
        }
        .similar-items-sidebar-item-name {
            color: @text;
        }
        .resource-list--release-list-item-name {
            color: @text;
        }
        .shout--deleted,
        .shout--reported {
            background: @base;
        }
        .play-this-track-playlinks {
            color: @text;
        }





        /* WIKI */
        .factbox-item,
        #factbox-more-members {
            color: @subtext0;
        }


        .factbox-item > h4 {
            color: @accent;
        }

        .alert-warning {
            color: @peach;
            background-color: @crust;
        }

        .content-form .form-control,
        .content-form input[type=date],
        .content-form input[type=email],
        .content-form input[type=number],
        .content-form input[type=password],
        .content-form input[type=text],
        .content-form input[type=url],
        .content-form select,
        .content-form textarea {
            background-color: @crust;
            border: 1px solid @crust;
            color: @subtext0;
        }

        .content-form .form-control:focus,
        .content-form input[type=date]:focus,
        .content-form input[type=email]:focus,
        .content-form input[type=number]:focus,
        .content-form input[type=password]:focus,
        .content-form input[type=text]:focus,
        .content-form input[type=url]:focus,
        .content-form select:focus,
        .content-form textarea:focus {
            box-shadow: none;
            border: 1px solid @crust;
        }
        .content-form .form-control:hover:not([disabled]),
        .content-form input[type=date]:hover:not([disabled]),
        .content-form input[type=email]:hover:not([disabled]),
        .content-form input[type=number]:hover:not([disabled]),
        .content-form input[type=password]:hover:not([disabled]),
        .content-form input[type=text]:hover:not([disabled]),
        .content-form input[type=url]:hover:not([disabled]),
        .content-form select:hover:not([disabled]),
        .content-form textarea:hover:not([disabled]),
        .content-form .inplace-field,
        .inplace-field {
            border: 1px solid @crust;
            color: @text
        }
        .control-label {
            color: @accent;
        }
        .join-form .form-row-help-text {
            color: @text;
            background-color: @surface1;
        }
        #stylerules {
            background-color: @overlay0;
            color: @subtext0;
        }
        .secondary-nav-item-link--active:after,
        a.secondary-nav-item-link:focus:after,
        a.secondary-nav-item-link:hover:after {
            background-color: @accent;
        }



        /* OBSESSIONS */
        .obsession-history-play-all::before {
            background-color: @accent;
            -webkit-filter: invert(0%);
            filter: invert(0%);
            color: @text;
        }

        .obsession-history-play-all.js-playlink-station.inline-section-control {
            color: @text;
        }


        .obsession-history-play-all:hover::before {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
            background-color: @subtext0;
        }

        .obsession-search-result-header {
            color: @accent;
        }

        .obsession-candidate-heading {
            color: @text;
        }

        .modal-dialog.popup_content,
        .modal-content {
            background-color: @mantle;
            box-shadow: none;
        }

        .modal-body {
            background-color: @base;
            box-shadow: none;
        }

        .content-form textarea:focus {
            box-shadow: none;
        }

        .content-form textarea:hover:not([disabled]) {
            border-color: @accent;
        }





        /* MESSAGES */
        .inbox-notifications .inbox-notifications__item {
            color: @subtext0;
        }

        .inbox-notifications .inbox-notifications__item--highlight {
            background-color: @overlay0;
        }
        .inbox-notifications .inbox-notifications__item--hover {
            box-shadow: none;
        }
        .inbox-notifications__item--highlight-hover:hover {
            background-color: @crust;
        }

        .inbox-message-subject {
            color: @accent;
        }

        .inbox-message-message {
            color: @text;
        }

        .inbox-message-view .inbox-message-message blockquote {
            background: @crust;
            border: 1px solid @accent;
        }

        body:not([data-whatinput="touch"]) .inbox-notifications .inbox-notifications__item--hover:hover {
            background-color: @crust;
        }

        .inbox .inbox-message {
            background-color: @crust;
        }

        .inbox .inbox-message--unviewed {
            background-color: @overlay0;
        }

        .inbox .inbox-message--unviewed .inbox-message-status::after {
            background-color: @accent;
        }

        /* ADS */
        .lastfm-ad {
            display: none;
        }
        .full-bleed-ad-container,
        .sidebar-ad-container {
            background-color: @base;
        }

        /* RECOMMENDATIONS ON PROFILE */
        .profile-card-content {
            background: @surface0 !important;
        }
        /* UPGRADE TO PRO */
        .btn-subscribe,
        .btn-subscribe:hover,
        .btn-subscribe:active {
            background-color: @accent !important;
        }
        .listening-report-brick--upsell {
            display: none;
        }
        .your-progress {
            color: @text;
        }
        /*----Profile Cards Hide-------*/
        .profile-cards-container {
            display: none !important;
        }
        /*    HEADER     */
        .header--overview,
        .header--sub-page {
            color: @text;
        }
        /*-----Primary Button------*/
        .btn-primary,
        .btn-primary:hover,
        .btn-primary:active,
        .no-data-message-button,
        .no-data-message-button:hover,
        .no-data-message-button:active,
        .api-session-connect,
        .api-session-disconnect:hover,
        .api-session-disconnect:active,
        .clipboard-button,
        body:not(.js-focus-visible) body:not([data-whatinput=touch]) .clipboard-button:focus,
        body:not([data-whatinput=touch]) .clipboard-button .focus-visible,
        body:not([data-whatinput=touch]) .clipboard-button:hover {
            background-color: @accent !important;
            color: @base !important;
        }
        .api-session-disconnect {
            background-color: @accent-dim !important;
            color: @base !important;
        }
        /*-----Shortcut Button------*/
        .btn-shortcut,
        .btn-shortcut:hover,
        .btn-shortcut:active {
            background-color: @accent-dim !important;
            color: @text !important;
        }
        /*------FOOTER-----*/
        .footer .footer-heading {
            color: @subtext1;
        }
        .footer {
            background-color: @mantle;
            color: @text;
        }
        .footer .footer-bottom {
            border-top: none;
        }
        .footer .footer-bottom .row {
            background-color: @mantle;
        }
        .footer .footer-language--active,
        .footer-timezone strong,
        .footer .footer-language--active strong {
            color: @text;
        }
        .footer .footer-language,
        .footer-timezone,
        .footer .footer-legal {
            color: @overlay0;
        }
        /*--------TOP BAR----------*/
        .top-bar,
        .player-bar,
        .main-content:before,
        .masthead-nav {
            background: @mantle;
            color: @text !important;
        }
        .masthead-nav-control,
        .site-auth-control,
        .site-auth--anon:before,
        .masthead-nav .navlist-more {
            color: @text !important;
        }
        .auth-dropdown-menu {
            background-color: @base !important;
        }
        .auth-dropdown-menu-item {
            color: @text !important;
        }
        .auth-dropdown-menu-item:hover,
        .auth-dropdown-menu-item:active {
            background-color: @overlay0 !important;
            color: @text !important;
        }
        .masthead-nav .masthead-nav-control:focus,
        .masthead-nav .masthead-nav-control:hover,
        .masthead-nav .navlist-more:focus,
        .masthead-nav .navlist-more:hover,
        .site-auth-control:focus,
        .site-auth-control:hover {
            background-color: transparent;
            color: @accent !important;
        }
        .site-auth-control.btn-secondary {
            color: @base !important;
        }
        .masthead-search-form {
            background-color: @mantle;
        }
        .masthead-search-submit {
            background-color: @accent;
            color: @base;
        }
        body:not(.js-focus-visible) body:not([data-whatinput=touch]) .masthead-search-submit:focus,
        body:not([data-whatinput=touch]) .masthead-search-submit .focus-visible,
        body:not([data-whatinput=touch]) .masthead-search-submit:hover {
            background-color: @accent;
            color: @base;
        }
        .masthead-search-field {
            color: @text;
        }
        /*-------PLAYLISTS---------*/
        .chartlist-timestamp {
            color: @subtext0;
        }
        /*-----GENRES TODAY-----*/
        .genretodaybar,
        .rolling_no {
            background: @mantle !important;
        }
        /*-----NAV ITEMS-----*/
        .library-controls .secondary-nav .secondary-nav-item-link--active,
        .date-range-picker-button-inner,
        .library-controls .secondary-nav .secondary-nav-item-link--active:focus,
        .library-controls .secondary-nav .secondary-nav-item-link--active:hover,
        body:not([data-whatinput=touch]) .catalogue-tags .tag a:hover {
            color: @accent !important;
        }
        /*------ARTIST TAGS-----*/
        .catalogue-tags .tag a,
        .catalogue-tags .tags-add,
        .catalogue-tags .tags-add-cta,
        body:not([data-whatinput=touch]) .catalogue-tags .tag a:hover {
            color: @accent;
            box-shadow: inset 0 0 0 1px @accent-dim;
        }
        /*-----HIDE PLAY BUTTON ON TOP TRACK------*/
        .image-overlay-playlink-link:before {
            display: none;
        }
        /*---------CHARTS FIX---------*/
        .globalchart .globalchart-item:first-child {
            background-color: fadeout(@mantle, 0.8);
        }
        .globalchart-item:first-child .globalchart-rank {
            color: @accent !important;
        }
        .globalchart-item .globalchart-rank {
            color: @text;
        }
        /*-------LOG IN PAGE-------*/
        .auth-container > .auth-container-animation {
            background-color: transparent;
        }
        #join-animation-container {
            display: none !important;
        }
        h1.text-24 {
            color: @accent;
        }
        .checkbox {
            color: @text;
        }

        /*----ICONS----*/
        .lazy-buylinks-toggle::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/download_sprite_16.2d7999c89e09.png");
            -webkit-mask-image: url("/static/images/icons/download_sprite_16.2d7999c89e09.png");
            background-color: @text;
        }

        .chartlist-more-button::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/more_sprite_16.bceb4a93c77a.png");
            -webkit-mask-image: url("/static/images/icons/more_sprite_16.bceb4a93c77a.png");
            background-color: @text;
        }

        .lazy-buylinks-toggle:hover:before,
        .lazy-buylinks-toggle:focus:before,
        .chartlist-more-button:hover:before,
        .chartlist-more-button:focus:before {
            background-color: @subtext0;
        }

        .chartlist-love-button::before,
        .header-new-love-button::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png");
            -webkit-mask-image: url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png");
            background-color: @text;
            mask-position: 0 0;
            -webkit-mask-position: 0 0;
        }

        .chartlist-love-button:focus:before,
        .chartlist-love-button:hover:before,
        .header-new-love-button:focus::before,
        .header-new-love-button:hover::before {
            mask-position: -24px 0;
            background-color: @red;
        }

        [data-toggle-button-current-state=loved] .chartlist-love-button:before,
        [data-toggle-button-current-state=loved] .header-new-love-button:before {
            mask-position: -552px 0;
            transition: mask-position .7s steps(23) !important;
            -webkit-transition: -webkit-mask-position .7s steps(23) !important;
            background-color: @red;
        }

        [data-toggle-button-current-state=loved] .chartlist-love-button:focus:before,
        [data-toggle-button-current-state=loved] .chartlist-love-button:hover:before,
        [data-toggle-button-current-state=loved] .header-new-love-button:focus::before,
        [data-toggle-button-current-state=loved] .header-new-love-button:hover::before {
            transition: mask-position .7s steps(22) !important;
            -webkit-transition: -webkit-mask-position .7s steps(22) !important;
        }

        .section-settings-toggle::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/settings_222_16.f63779d3cbad.png");
            -webkit-mask-image: url("/static/images/icons/settings_222_16.f63779d3cbad.png");
            background-color: @text;
        }

        .share-button-profile::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/share_222_16.9aba752fb1e9.png");
            -webkit-mask-image: url("/static/images/icons/share_222_16.9aba752fb1e9.png");
            background-color: @text;
        }

        .section-settings-toggle:hover:before,
        .section-settings-toggle:focus:before,
        .share-button-profile:hover:before,
        .share-button-profile:focus:before {
            background-color: @subtext0;
        }

        .cta-link::before,
        .lyrics-snippet-more-link ::before,
        .trending-tracks-more-link ::before,
        .more-link-fullwidth-right ::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png");
            -webkit-mask-image: url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png");
            background-color: @accent;
        }

        .play-this-track-playlink--itunes::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png");
            -webkit-mask-image: url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png");
            background-color: @text;
        }

        .resource-external-link--homepage::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/external_links_16.3d45e81fa3fc.png");
            -webkit-mask-image: url("/static/images/icons/external_links_16.3d45e81fa3fc.png");
            background-color: @text;
        }

        .alert-warning::before {
            background-image: none;
            mask-image: url("/static/images/icons/alert/warning_16.93f2fe437139.png");
            -webkit-mask-image: url("/static/images/icons/alert/warning_16.93f2fe437139.png");
            background-color: @peach;
        }

        .masthead-search-toggle::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/search_16.bde37072495a.png");
            -webkit-mask-image: url("/static/images/icons/search_16.bde37072495a.png");
            background-color: @text;
        }

        .masthead-search-toggle:hover:before,
        .masthead-search-toggle:focus:before {
            background-color: @subtext0;
        }

        .masthead-search-toggle.disclose-active::before {
            background-image: none !important;
            mask-image: url("/static/images/icons/delete_999_24.78e2a3de3ab8.png");
            -webkit-mask-image: url("/static/images/icons/delete_999_24.78e2a3de3ab8.png");
            background-color: @text;
        }

        .masthead-search-toggle.disclose-active:hover:before,
        .masthead-search-toggle.disclose-active:focus:before {
            background-color: @subtext0;
        }

        .masthead-logo {
            background-image: none !important;
            mask-image: url("/static/images/logo_static.adb61955725c.png");
            -webkit-mask-image: url("/static/images/logo_static.adb61955725c.png");
            mask-position: 50% 50%;
            -webkit-mask-position: 50% 50%;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            background-color: @red;
        }

        .catalogue-tags .tags-add::before {
            background-image: none;
            mask-image: url("/static/images/icons/add_link_16.637996ed0e2f.png");
            -webkit-mask-image: url("/static/images/icons/add_link_16.637996ed0e2f.png");
            background-color: @accent;
        }

        .masthead-logo-loading {
            -webkit-mask-image: url("/static/images/logo_animate@2x.e93e5b7db3de.gif");
            mask-image: url("/static/images/logo_animate@2x.e93e5b7db3de.gif");
            -webkit-mask-size: contain;
            mask-position: 50% 50%;
            -webkit-mask-position: 50% 50%;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            background: @accent !important;
        }

        .layout-image {
            background: @crust;
            .layout-image-image {
                mix-blend-mode: screen;
            }
        }
    }
}