/*
 * css/spotify-black.css
 *
 * Custom stylesheet that emulates the appearance of the Spotify black redesign.
 *
 * Created by Anthony Barone.
 *
 * Subject to terms and conditions in LICENSE.md.
 *
 */

body.material,
#material-app-bar,
#music-content.material .material-cover
{
    background-color: #121314;
    color: #bbb;
}

#material-app-bar {
    color: white;
}

.material .cluster-text-protection,
.material .cluster-text-protection::before {
    background-color: #121314;
}

#loading-progress {
    background: #222326;
}

#loading-progress-content {
    top: 40%;
}

#loading-progress-message {
    color: #444;
    text-align: center;
}

#loading-progress-bar {
    height: 3px;
    background-color: black;
    border: 0;
}

#current-loading-progress {
    height: 3px;
}

a, .simple-dialog a {
    color: #999;
}

.card-group {
	height: 520px !important;
}

.material-card,
.material-card .details,
.settings-card {
    background-color: rgba(34, 35, 38, 0.8) !important;
}

.material-card .title {
    color: #ddd;
}

.material-card .sub-title {
    color: #999;
}

.material-card .reason {
	border-top-color: transparent;
}

.material-card.entity-card, .material-card.entity-card .details {
    background-color: transparent !important;
}

.cluster.material-cluster .header h2.title,
.settings-cluster.material-cluster .header h2.title,
.section-header,
.material .section-header,
.material .recommended-header {
    color: #ddd;
}

#music-content .material-banner.banner.ws-search-banner,
#music-content .material-banner.banner.new-user-quiz-card,
#music-content .material-banner.banner.ws-subscriber-card {
    background-color: rgba(34, 35, 38, 0.8);
}

#music-content .material-banner.banner.ws-search-banner .title,
#music-content .material-banner.banner.new-user-quiz-card .title,
#music-content .material-banner.banner.ws-subscriber-card .title {
    color: #ccc;
}

.material-container,
.material-playlist-container,
.songlist-container,
.material-detail-view .top-tracks,
.station-container-content-wrapper .material-album-container,
#queue-overlay {
    background-color: rgba(18, 19, 20, 0.98);
    box-shadow: none;
}

.station-container-content-wrapper .material-container-details {
    background-color: transparent;
}

#queue-overlay::after {
    border-color: transparent transparent rgba(18, 19, 20, 0.98) rgba(18, 19, 20, 0.98);
}

.material-detail-view .artist-details {
    background-color: rgba(18, 19, 20, 0.9);
    color: white;
}

.material-detail-view .artist-details .bio-wrapper .bio {
    color: #ddd;
}

.material-detail-view .material-container-details .info .description {
    color: #a1a1a1;
}

.material .song-table {
    padding: 0;
}

.material .song-table .header-row th {
    background: transparent !important;
    border-bottom: 1px solid #222326;
    height: 26px;
    text-transform: none;
    color: #888;
    border-left: 0px solid #555;
}

.material .song-row .song-indicator {
    -webkit-filter: invert(100%);
    background-color: transparent !important;
}

.material .song-row.hover .song-indicator,
.material .song-row.selected-song-row .song-indicator {
	/*background-color: #222326 !important;
    -webkit-filter: none;*/
}

.material .song-row td {
    border: none;
    color: white;
    font-weight: 300;
    cursor: default;
    background-color: transparent !important;
    border-bottom: 1px solid #222326;
}

.material .song-table [data-col="title"],
.material .song-table.mini [data-col="song-details"] .song-title {
    color: white;
}

.material .song-table .currently-playing [data-col="title"] img,
.material .song-table.mini .currently-playing [data-col="song-details"] img {
    visibility: hidden;
}

.material .song-table [data-col="duration"],
.material .song-table [data-col="play-count"] {
    color: #707070;
}

.material .song-row.hover td {
    background-color: #222326 !important;
}

.material .song-row.selected-song-row td,
.material-detail-view .song-table .song-row.selected-song-row td,
.material-detail-view .song-table .song-row.selected-song-row .column-content {
    color: white !important;
    background-color: #222326 !important;
}

.material .song-row.currently-playing td {
    color: #ff8200 !important;
}

.material .song-table [data-col="index"] .content,
.material .song-table [data-col="track"] .content {
    color: inherit;
}

.material .song-row.currently-playing td[data-col="track"] span,
.material .song-row.currently-playing td[data-col="index"] span {
    visibility: collapse;
}

.material .song-row.currently-playing td[data-col="track"] span > div,
.material .song-row.currently-playing td[data-col="index"] span > div {
    visibility: visible;
}

.material .song-row.hover [data-col="index"] .content,
.material .song-row.hover [data-col="track"] .content {
    color: transparent !important;
}

.material .song-row .song-indicator,
.material .song-row .title-right-items,
.material .song-row .content,
.material .song-row .song-indicator[data-playback-status="paused"],
.material .song-row .song-indicator[data-playback-status="loading"],
.material .song-row [data-col="index"] .hover-button[data-id="play"],
.material .song-row [data-col="track"] .hover-button[data-id="play"],
.material .song-row.selected-song-row .song-indicator,
.material .song-row.selected-song-row .title-right-items,
.material .song-row.selected-song-row .content,
.material .song-row.selected-song-row .song-indicator[data-playback-status="paused"],
.material .song-row.selected-song-row .song-indicator[data-playback-status="loading"],
.material .song-row.selected-song-row [data-col="index"] .hover-button[data-id="play"],
.material .song-row.selected-song-row [data-col="track"] .hover-button[data-id="play"],
.material .song-row.hover .song-indicator,
.material .song-row.hover .title-right-items,
.material .song-row.hover .content,
.material .song-row.hover .song-indicator[data-playback-status="paused"],
.material .song-row.hover .song-indicator[data-playback-status="loading"],
.material .song-row.hover [data-col="index"] .hover-button[data-id="play"],
.material .song-row.hover [data-col="track"] .hover-button[data-id="play"]
{
    background-color: transparent !important;
}

.music-banner {
    display: none;
}

.subcategories-list .subcategory:hover,
.subcategories-list .subcategory:focus {
    background-color: #222;
}

.subcategories-list .subcategory:not(:last-child) {
    border-color: #333;
}

#nav, #nav-container, .material .nav-toolbar {
    background-color: #222326 !important;
    border-right: 1px solid #292929;
}

#nav-container #dropShadow {
    display: none;
}

.material #nav_collections .nav-item-container,
.material .nav-item-container {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #949599 !important;
    padding: 5px 0 5px 32px;
    border-left: 3px solid transparent;
}

.material #nav_collections .nav-item-container.selected,
.material .nav-item-container.selected,
.material .nav-item-container.selected:focus,
.material .nav-item-container.selected:hover {
    background: #2E2F33 !important;
    color: #F7F9FF !important;
    border-left: 3px solid #FF7D00;
}

.material #nav_collections .nav-item-container:hover,
.material .nav-item-container:hover {
    background: #2E2F33 !important;
    color: #F7F9FF !important;
}

#nav_collections .nav-item-container:focus,
.nav-item-container:focus, .nav-item-container:hover {
    background-color: transparent;
}

.material .nav-section-header {
    padding-left: 16px;
    font-weight: 300;
    color: #777;
    text-shadow: 0px -1px 0px #222;
    text-transform: uppercase;
    height: 34px;
    line-height: 34px;
}

.nav-section-divider {
    display: none;
}

.nav-item-container .playlistDropDown, .nav-item-container.selected .playlistDropDown {
    margin-top: 3px !important;
}

.nav-bar .header-tab-title.selected {
    border-bottom: 3px solid #ff7d00 !important;
    background-color: transparent;
    color: #fff;
}

.nav-bar .header-tab-title.selected:hover {
    color: #fff;
}

.nav-bar .header-tab-title {
    height: 42px;
    line-height: 45px;
    color: #aaa;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 3px solid transparent;
    transition: all 0.4s ease;
}

.nav-bar .header-tab-title:hover {
    color: #fff;
}

.nav-bar .header-tab-spacer {
    display: none;
}

.nav-bar #breadcrumbs {
    background: none;
}

.nav-bar {
    background-color: #121314;
}

#headerBar {
    background-color: #121314;
    border-bottom: 1px solid #222326;
}

.read-more-button-wrapper.fade-out {
    background: #121314;
}

.fade-out:after {
    background: none !important;
}

#player, .player-middle {
    background: #222326;
    color: white;
}

.player-middle {
    padding: 3px 0 0 0;
    margin: 0;
}

#playerSongInfo {
    overflow: hidden;
}

#playerSongInfo .text-wrapper #playerSongTitle {
    margin-right: 110px;
}

#player .flat-button, #player .flat-button:hover, #player .flat-button:active {
    background-color: transparent !important;
}

.now-playing-menu-wrapper {
    background: none;
}

#player:not(.material) [data-id="now-playing-menu"] {
    border: none;
}

#player.material .player-rating-container {
    background-color: transparent;
}

#player.material .now-playing-actions paper-icon-button {
    color: white;
}

#playerSongTitle {
    color: #ddd;
}

#player-artist, .player-album, .player-dash {
    color: #aaa;
}

#player.active:hover .playing-progress-background {
    background: #555;
}

#top_divider_line, .playing-progress-background {
    background: #333;
}

#time_container_duration {
    color: #ccc;
    background-color: #555;
}

#volume:hover, #volume.simulated-hover {
    background: none !important;
}

#volume #vslider, #volume #volume_low, #volume #volume_high {
    opacity: 1 !important;
}

.suggested-query {
    color: #666;
}

.more-songs-container {
    border-top-color: transparent;
}

.material a, .material .simple-dialog a {
    color: #aaa;;
}

div.simple-dialog-bg {
    opacity: 0.01 !important;
    background-color: transparent;
}

.simple-dialog {
    -webkit-animation-duration: 0.8s;
    -webkit-animation-name: slidedown;
    -webkit-animation-timing-function: ease-out;
    overflow: hidden;
    top: 60px !important;
    border-radius: 0 0 5px 5px;
    border-top-width: 0;
    background-color: rgba(240,240,240,0.98);
}

@-webkit-keyframes slidedown {
   from {
      max-height: 0%;
   }

   to {
      max-height: 100%;
   }
}

.simple-dialog-title, .simple-dialog-content {
    background-color: transparent;
}

.simple-dialog-title {
    color: #444 !important;
}

.butter-bar-container {
    top: 0;
}

#loadingOverlay {
    -webkit-filter: invert(80%);
    opacity: .8 !important;
}

.sort-icon {
    -webkit-filter: brightness(-20%);
}

.now-playing-menu .goog-menuitem,
.now-playing-menu .goog-submenu,
.now-playing-menu .goog-submenu .goog-submenu-arrow,
.goog-menuitem,
.goog-menu {
    background: #2e2f33;;
}

.material .goog-menu .goog-menuitem:hover {
    background: #3e3e40;
}

.material .goog-menu .goog-menuitem .goog-menuitem-content {
    color: #888 !important;
}

.material .goog-menuheader {
    color: #aaa !important;
}

.material .goog-menu .goog-menuitem:hover .goog-menuitem-content {
    color: #fafafa !important;
}

.material .goog-menu .goog-menuseparator {
    background-color: #2a2a2a !important;
}

.material .goog-menu .goog-menuitem .rating-container paper-icon-button {
    color: white;
}

[data-account-type="all-access"] .actions sj-paper-button[data-id="radio"] .icon,
.header-row [data-col="duration"] .icon,
.header-row [data-col="play-count"] .icon,
.material .song-row .rating-container.thumbs [data-rating],
.material .song-row .rating-container.thumbs [data-rating],
.material .song-row [data-col="index"] .hover-button[data-id=play],
.material .song-row [data-col="track"] .hover-button[data-id=play]
{
    background-image: url(https://radiant-player-mac/sprites-inverted.png) !important;
}

.material .song-row .column-content {
  background-color: transparent !important;
}

.material .song-row:hover,
.material .song-row:hover td,
.material .song-row:hover .column-content {
    background-color: #27282b !important;
}
.material-card .details .menu-anchor {
    color: #fff;
}

.material-card[data-size="small"][data-type="imfl"] .title {
    color: #FFF;
}