/* ==========================================================================
   WordPress Block Theme Header Protection
   Prevents Bootstrap from breaking the WordPress block header/navigation
   ========================================================================== */

/* Protect WordPress navigation from Bootstrap list resets */
.wp-block-navigation ul,
.wp-block-navigation ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wp-block-navigation li {
	list-style: none;
	display: inline-block;
}

.wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.wp-block-navigation-item {
	display: flex;
	align-items: center;
}

.wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	text-decoration: none;
}

/* Constrain site title/logo size in header */
.wp-block-site-title {
	font-size: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
}

.wp-block-site-logo img {
	max-width: 200px;
	height: auto;
}

/* Ensure header groups have proper layout */
header .wp-block-group,
.wp-block-template-part .wp-block-group {
	box-sizing: border-box;
}

/* Fix alignfull width in header */
header .alignfull,
.wp-block-template-part .alignfull {
	max-width: 100%;
	width: 100%;
}

/* ==========================================================================
   End WordPress Block Theme Header Protection
   ========================================================================== */

/* Header - sticky at top */
/* Target the alignfull group containing the site logo (header wrapper) */
.wp-block-group.alignfull:has(.wp-block-site-logo) {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #fff;
}

.wp-block-site-title {
	font-size: clamp(0.9rem, 1.5vw, 1.25rem);
	margin: 0;
}

.wp-block-navigation-item__content {
	padding: 0.25rem 0.75rem;
}

/* Removes Post Activy on Post page. Might be better to comment out html in /buddypress/activity/post-form.php */
#bp-nouveau-activity-form {
	display: none;
}

/* same as height of header */
.sticky-top, .sticky-top.melodee-player {
	top: 80px;
	z-index: 800;
	background-color: #fff;
}


/* Music Search */
#submit-music-description {
	display: none;
}

#melodee-search-button-container {
	display: none;
}

#melodee-drop-review-title {
	display: none;
	transition: all 0.3s;
	padding-top: 10px;
}

#melodee-drop-review-form {
	display: none;
	transition: all 0.3s;
}

#music-search {
	float: left;
	width: 100%;
}

#submit-music-search {
	/* float: left; */
	display: inline-flex;
	align-items: center;
	height: 38px;
	opacity: 1;
	transition: all 200ms ease-in-out;
	pointer-events: auto;
}

.compact #submit-music-search {
	opacity: 0;
	display: none;
	pointer-events: none;
}

#melodee-search-input-container,
#melodee-search-button-container {
	display: flex;
	align-items: center;
}

.cover_art,
.cover-art {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 16px;
}

.cover_art img,
.cover-art img {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	object-fit: cover;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.cover_art .album-info,
.cover-art .album-info {
	flex: 1;
	min-width: 0;
}

.search-album.cover-art {
	padding-left: 5px;
}

/* Minimized search view */
.search-minimized .cover_art img,
.search-minimized .cover-art img {
	width: 60px;
	height: 60px;
}

.search-minimized .album-name {
	font-size: 1em;
}

.search-minimized .artist-info,
.search-minimized .search-artist {
	font-size: 0.9em;
}

.search-minimized .album-release-date {
	display: none;
}



/* Sticky top card for Drop Search */
#drop-search-header {
	position: sticky;
	top: 80px;
	z-index: 800;
	width: 100%;
	transition: all 0.2s ease-in-out;
	background-color: #ffffff;
}

/* Minimized state */
#drop-search-header.minimized {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* #drop-search-header.minimized #search-title h2 {
	font-size: 1.0em;
	margin-bottom: 0;
} */

/* #drop-search-header.minimized #music-search {
	padding: 4px 8px;
	font-size: 0.9em;
} */

/* Results area */
#drop-search-results {
	width: 100%;
	position: relative;
}

/* Search result card spacing */
.search-result-card {
	margin: 20px 0;
}

#melodee-left-side-bar {
	/* position: relative; */
}

.scrollable-search-container {
	max-height: none;
	height: auto;
	overflow: visible;
}

#search-content {
	max-height: none;
	overflow: visible;
}

#search-results {
	max-height: none;
	overflow: visible;
}

/* Music Search - Search and Nav*/
#search-nav {
	
}

.search-nav-span {
	padding: 2px 6px;
	cursor: pointer;
	margin-bottom: 8px;
	display: inline-block;
}

.search-nav-search-term {
	padding-left: 5px;
	font-style: italic;
	text-decoration: underline;
}

.search-nav-search-term::before {
	content: '"';
}

.search-nav-search-term::after {
	content: '"';
}

.search-nav-album-name,
.search-nav-search-term {
	white-space: nowrap;
}

.search-nav-separator {

}

.search-nav-album-name {

}

/* Search history - image and name as single unit */
.search-result-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.search-result-item img {
	flex-shrink: 0;
}

/* Music Search - albums and tracks */
.search-artist,
.artist-info {
	color: #4a4747;
	font-size: 1.1em;
	font-weight: 700;
	cursor: pointer;
}

.album-name {
	font-size: 1.4em;
	color: #1d437e;
	text-shadow: 2px 2px 2px rgba(0, 5, 80, 0.05);
	/* cursor: pointer; */
}

.album-name:hover {
	text-decoration: underline;
	cursor: pointer;
}

.album-release-date {
	float: right;
	font-size: 0.9em;
    font-weight: 400;
}

.pagination-page {
	cursor: pointer;
	color: #4a4747;
    font-size: 1.1em;
    font-weight: 400;
    padding: 0px 3px;
}

.pagination-curent-page {
	color: #4a4747;
    font-size: 1.2em;
    font-weight: 700;
}

.pagination-end-page {
	float: right;
}

.pagination-start-page {
	
}

.pagination-viewing {
	color: #4a4747;
    font-size: 1.1em;
    font-weight: 400;
	
}

/* Music Search - Tracks */
.track-number {
	font-size: 0.7em;
	font-weight: 100;
	padding-right: 15px;
	
}

.track-name {
	font-size: 1em;
    color: #1d437e;
    text-shadow: 2px 2px 2px rgba(0, 5, 80, 0.05);
}

.track-length {
	float: right;	
}

.track-like {
	float: right;
	padding-left: 12px;
	padding-right: 5px;
	transition: all 300ms ease-in-out;
}

.track-like:hover {
	transform: scale(1.1);
}

/* .heart-shadow {
	text-shadow: 2px 2px 2px rgb(0 5 80 / 10%);
} */

/* Player */
.scrollable-track-container {
/* 	position: absolute; */
	/* overflow: hidden;
	max-height: 20vh; */
	height: auto;
}

.scrollable-tracks {
	/* overflow-y: scroll;
	height: auto;
	max-height: 60vh; */
}

.track-in-library {
	color: #14b414;
}

/* Melodee Skinning */
.track-like-active {
	color: #0e4bf2 !important;
}

.alert_spacing {
/* 	margin: 15px 0px 25px 15px; */
	margin: 0px 0px 25px 15px;
}


/*
#melodee-container, #melodee-left-side-bar {

    -webkit-transition: width 1.0s ease, margin 1.0s ease;
    -moz-transition: width 1.0s ease, margin 1.0s ease;
    -o-transition: width 1.0s ease, margin 1.0s ease;
    transition: width 1.0s ease, margin 1.0s ease;
}

#melodee-left-side-bar {

    -webkit-transition: width 1.0s ease, margin 1.0s ease;
    -moz-transition: width 1.0s ease, margin 1.0s ease;
    -o-transition: width 1.0s ease, margin 1.0s ease;
    transition: width 1.0s ease;
}
*/

[class*='col-sm'] {
  transition: all 0.3s;
}

/* MeLoDEE PLAYER */

#melodee-player-album-art {
	padding-left: 0.5rem;
}

#melodee-player-controls {
	color: #468ffd;
	text-shadow: 2px 2px 2px rgba(0, 5, 80, 0.2);
}

#melodee-player-song-name {
	font-size: 1.4em;
	color: #1d437e;
	text-shadow: 2px 2px 2px rgba(0, 5, 80, 0.05);
	
}

#melodee-player-album-name{
	font-size: 1.1em;
	font-weight: 700;
}

#melodee-player-artist-name{
	font-size: 1.0em;
}

#melodee-player-time-stamp{
	font-size: 0.9em;
	color: white;
	font-weight: 700;
	text-shadow: 1px 1px 1px #393939;
	padding-left: 5px;
}

#melodee-player-devices-button {
	font-size: 0.8em;
	float: right;
	color: #468ffd;
	text-shadow: 2px 2px 2px rgba(0, 5, 80, 0.2);
}

#melodee-player-song-bar {
	width: 111%;
	background-color: #46eafd17;
	margin-left: -2.2em;

}

#melodee-player-song-progress {
	width: 1%;
	height: 30px;
	background-color: #5946FD;
	transition: width 1s;
}

.melodee-player-tracklist-track {
	padding: 0px 8px;
}

.melodee-player-tracklist-track.active, .melodee-feed-track.active {
	background-color: rgba(89,  71,  253, 0.36);
}

.player-spotify-add-to-library {
	float: right;
	/* padding-right: 10px; */
	cursor: pointer;
}

.melodee-tracklist-track-name {
	overflow-x: hidden;
	white-space: nowrap;
}

.melodee-tracklist-track-duration {
/* 	padding-left: 10px !important; */
}




/*
.melodee-player-tracklist-track.active {
	background-color: rgba(89,  71,  253, 0.36);
}
*/

/* Melodee Feed */

/* Feed Descriptor Styling */
#melodee-feed-neat::before, #drop-search-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -15px;			
	height: 14px;		
	background: inherit;
	z-index: -1;		 
	pointer-events: none;
}

#melodee-feed-neat h2 {
	font-weight: 600;
	letter-spacing: 0.02em;
}

#melodee-feed-neat p {
	color: #5a5a5a;
	font-size: 0.95em;
	font-style: italic;
	line-height: 1.5;
	opacity: 0.85;
}

.melodee-card {
	border: 1px solid #0000ff24 !important;
	box-shadow: 6px 14px 14px #283259 !important;
	border-radius: 5px;
}

li.melodee-card {
	list-style: none;
	margin: 25px 0px;
	position: relative;
	z-index: 1;
}

/* Feed card layout */
li.melodee-card .avatar-link {
	display: flex;
	align-items: flex-end;
	gap: 6px;
}

li.melodee-card .col-sm-2:first-child {
	max-width: 80px;
	padding-right: 8px;
}

li.melodee-card img.avatar {
	width: 55px;
	height: auto;
}



.play-feed-button {
	font-size: 56px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #468ffd;
/* 	text-shadow: 8px 8px 2px rgba(0, 5, 80, 0.2); */
	text-shadow: 8px 8px 2px rgb(0 5 80 / 51%);
	cursor: pointer;
	
	
}

/* Play button animation - uses transition for smooth hover and ease-out on leave */
.play-feed-button {
	font-size: 56px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #468ffd;
	text-shadow: 8px 8px 2px rgb(0 5 80 / 51%);
	cursor: pointer;
	transition: font-size 0.3s ease-out, text-shadow 0.3s ease-out;
}

.play-feed-button:hover {
	font-size: 62px;
	text-shadow: 4px 4px 1px rgb(0 5 80 / 51%);
}

.mldee-image-icon {
	position: relative;
	display: inline-block;
}

.melodee-feed-play-button {
	cursor: pointer;
	font-size: 1.0em;
	color: #468ffd;
	text-shadow: 2px 2px 2px rgb(0 5 80 / 10%);
	transition: font-size 0.3s ease-out, text-shadow 0.3s ease-out;
}

.melodee-feed-play-button:hover {
	font-size: 1.15em;
	text-shadow: 4px 4px 3px rgb(0 5 80 / 15%);
}

.mldee-feed-image {
	width: 100%;
}

#melodee-player-album-art img {
	width: 100%;
}

/* BuddyPress BP Override */
.activity-list.bp-list {
	padding: 0px;
	border: none;
}

.sticky-pad {
	top: 80px;
	flex-direction: row;
	margin-top: 0;
	padding-top: 0.5rem;
}

#melodee-feed-neat.sticky-pad {
	z-index: 900;
	background-color: #fff;
}

/* Minimized feed descriptor */
#melodee-feed-neat.minimized {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* Play button centering in minimized state */
#melodee-feed-neat.minimized .mldee-image-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#melodee-feed-neat.minimized .play-feed-button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#melodee-feed-neat.minimized .mldee-feed-image {
	max-width: 60px;
	max-height: 60px;
}

/* img.avatar  {
  width: fit-content;
} */

.mldee-feed-image {
	
}

.mldee-image-icon {
	transition: 0.2s;
}

.feed-spotify-add-to-library {
	float: right;
	cursor: pointer;
}

.album-in-library {
	color: #14b414;
}

.feed-drop-description {
	
}

.feed-track-container {
	border-top: 1px solid rgba(0, 10, 64, 0.57);
	padding-top: 10px;
}

.melodee-feed-track:not(:last-child) {
	border-bottom: 1px dotted rgba(166, 166, 166, 0.35);
}

.feed-album-art {
	width: 100%;
	max-width: 180px;
	/* margin-left: 0; */
	margin: 16px 0px 0px 0px;
}

.feed-user-name {
	order: -1;
	font-size: 0.9em;
	margin-top: 4px;
	font-weight: 600;
	line-height: 1.2;
	text-shadow: 1px 1px 2px rgb(236 52 188);
	text-align: right;
	margin-right: -60px;
	z-index: 3;
}

.feed-album-name {
	font-size: 1.4em;
	color: #1d437e;
	text-shadow: 2px 2px 2px rgba(0, 5, 80, 0.05);
}

.feed-artist-name {
	font-size: 1.1em;
	font-weight: 500;
}

/* Album release year (to be added under artist name) */
.feed-album-release-year {
	font-size: 0.85em;
	color: #6a6a6a;
	font-weight: 400;
}

/* Drop date positioning under user info */
.feed-drop-date-time {
	font-size: 0.75em;
	font-weight: 300;
	color: #888;
	display: block;
	margin-top: 4px;
	text-align: right;
}



.feed-drop-description {
	font-size: 1.1em;
	font-weight: 400;
}

.submit {
	margin-bottom: 100px;
}

input[name='signup_submit'] {
	border-radius: .25rem !important;
	padding: .375rem .75rem !important;
	line-height: 1.5 !important;
	background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

input[name='signup_submit']:hover {
	
    color: #1b1b1b !important;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


/* Profile */

#melodee-profile-playlist-name {
	padding-bottom: 10px;
	margin: 0px;
}

/* Profile page album styling */
.profile-album-title {
	font-size: 1.2em;
	color: #1d437e;
	font-weight: 600;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.profile-album-container {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.profile-album-container img {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
}

.profile-album-info {
	flex: 1;
	min-width: 0;
}


/* Directory */

.melodee-user {
	margin-bottom: 25px;
}

.directory-profile-image {
	margin-top: 10px;
	display: inline-block;
	clear: both;
}

.directory-profile-name {
	margin-bottom: 5px;
	display: inline-block;
	font-weight: 600;
	font-size: 0.9em;
	text-shadow: 1px 1px 2px rgb(236 52 188);
}

/* Directory Drop Stats */
.directory-drop-stats {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.drop-stat {
	font-size: 0.85em;
	color: #444;
}

.drop-stat-album {
	color: #1d437e;
	font-weight: 600;
}

.drop-stat-artist {
	font-weight: 500;
	color: #555;
}

/* Directory Follow/Unfollow Button - match Update Playlist style */
.melodee-user .follow-button {
	margin-bottom: 4px;
	list-style: none;
}

.melodee-user .follow-button a {
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.85em;
	font-weight: 400;
	color: #0d6efd;
	background-color: transparent;
	border: 1px solid #0d6efd;
	border-radius: 0.25rem;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.melodee-user .follow-button a:hover {
	color: #fff;
	background-color: #0d6efd;
}

.melodee-user .follow-button a.loading {
	opacity: 0.65;
	pointer-events: none;
}



/* Media Queries */

/* // Extra small devices (portrait phones, less than 576px) */
/* // No media query for `xs` since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 



	
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* Stylized Date Component - Layered year/month-day design */
.stylized-date {
	position: relative;
	display: inline-block;
	min-width: 85px;
	/* height: 38px;
	margin-left: 8px; */
}

#search-content .stylized-date {
	height: 40px;
	padding-top: 10px;
}

#search-content .album-info .stylized-date {
	height: 40px;
	margin-top: 24px;
}

#melodee-left-side-bar.col-sm-2 .cover-art img {
	width: 60px;
	height: 60px;
}

#melodee-left-side-bar.col-sm-2 {
	
}

#melodee-left-side-bar.col-sm-2 .date-year {
	
	transform: scaleY( 1.1 );
}

.stylized-date .date-year {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 2.2em;
	font-weight: 800;
	color: #3a3a3a;
	line-height: 1;
	z-index: 1;
	letter-spacing: -2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	transform: scaleY( 1.6 ); 
	transform-origin: bottom left;
}

.stylized-date .date-month-day {
	position: absolute;
	top: 12px;
	/* bottom: 2px; */
	left: 8px;
	font-size: 1.1em;
	font-weight: 700;
	color: #6B9BD2;
	z-index: 2;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0px 0px 12px #ffffff;
	/* -webkit-text-stroke: 1px #000;
	text-stroke: 1px #000; */
	
	text-shadow:
	
	 1px 1px 15px #FFFFFF,
	 0px 0px 3px #000;
}

/* Compact variant for search results */
.stylized-date.compact {
	min-width: 65px;
	height: 30px;
}

.stylized-date.compact .date-year {
	font-size: 1.6em;
	letter-spacing: -1px;
}

.stylized-date.compact .date-month-day {
	top: 8px;
	left: 6px;
	font-size: 0.85em;
}

/* Feed card release date */
.feed-release-date {
	margin-top: 4px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.feed-release-date .stylized-date {
	margin: 20px 0px 0px 0px;
	height: 30px;
}

/* Pagination Improvements */
.search-pagination {
	padding: 12px 0;
}

.search-pagination .pagination-info {
	font-size: 0.9em;
	color: #6a6a6a;
	margin-bottom: 8px;
}

.search-pagination .pagination-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.search-pagination .pagination-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 4px 8px;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.2s, color 0.2s;
}

.search-pagination .pagination-page:hover {
	background-color: #e8f0fe;
}

.search-pagination .pagination-curent-page {
	font-weight: 700;
	background-color: #1d437e;
	color: #fff;
}

.search-pagination .pagination-curent-page:hover {
	background-color: #1d437e;
}

.search-pagination .pagination-prev,
.search-pagination .pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	cursor: pointer;
	border-radius: 4px;
	font-weight: 700;
	color: #1d437e;
}

.search-pagination .pagination-prev:hover,
.search-pagination .pagination-next:hover {
	background-color: #e8f0fe;
}

.search-pagination .pagination-prev.disabled,
.search-pagination .pagination-next.disabled {
	color: #ccc;
	cursor: default;
}

/* Artist name clickable styling */
.search-artist:hover,
.artist-info:hover {
	text-decoration: underline;
}

/* Feed Playlist Actions */
.feed-playlist-actions {
	margin-top: 8px;
}

.playlist-last-saved {
	margin-left: 10px;
	font-size: 0.75em;
	color: #999;
}

#save-feed-playlist {
	font-size: 0.85em;
}

#save-feed-playlist .fab {
	margin-right: 4px;
}

/* Library Toggle (Heart +/-) */
.library-toggle {
	position: relative;
	display: inline-block;
	cursor: pointer;
	color: #999;
	transition: color 0.2s, transform 0.2s;
}

.library-toggle .fa-heart {
	font-size: 1.1em;
}

.melodee-feed-like-button::before {
	text-shadow: 2px 2px 2px rgb(0 5 80 / 20%);
	transition: all 300ms ease-in-out;
	cursor: pointer;
}

.melodee-feed-like-button::before:hover {
	
	text-shadow: 4px 4px 3px rgb(0 5 80 / 25%);
}


.library-toggle .library-indicator {
	position: absolute;
	bottom: 5px;
	right: 5px;
	font-size: 0.7em;
	font-weight: 700;
	color: #666;
	text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}

/* Not in library - depressed */
.library-toggle[data-in-library="false"] {
	color: #d9534f;
}

.library-toggle[data-in-library="false"]:hover {
	color: #14b414;
	transform: scale(1.1);
}

/* In library - raised */
.library-toggle[data-in-library="true"] {
	color: #14b414;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}

.library-toggle[data-in-library="true"]:hover {
	color: #d9534f;
	transform: scale(1.1);
}

.library-toggle[data-in-library="true"] .library-indicator {
	color: #d9534f;
}

.library-toggle[data-in-library="false"] .library-indicator {
	color: #14b414;
}



/* Progress Bar Scrubbing */
#melodee-player-song-bar {
	cursor: pointer;
}

#melodee-player-song-bar:hover {
	opacity: 0.9;
}

/* Device Selector */
.device-selector-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	float: right;
	position: relative;
}

#melodee-player-devices-button,
#melodee-player-refresh-devices {
	cursor: pointer;
	color: #468ffd;
	transition: color 0.2s, transform 0.2s;
}

#melodee-player-devices-button:hover,
#melodee-player-refresh-devices:hover {
	color: #1d437e;
	transform: scale(1.1);
}

#melodee-player-refresh-devices {
	font-size: 0.85em;
}

#melodee-player-refresh-devices.spinning {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

#melodee-player-devices-display-box {
	position: absolute;
	right: 0;
	top: 100%;
	width: 220px;
	max-width: 220px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 100;
}

#melodee-player-devices-display-box .list-group {
	margin: 0;
	padding: 0;
}

#melodee-player-devices-display-box .list-group-item {
	padding: 8px 12px;
	font-size: 0.9em;
	border: none;
	border-bottom: 1px solid #eee;
}

#melodee-player-devices-display-box .list-group-item:last-child {
	border-bottom: none;
}

#melodee-player-devices-display-box .list-group-item:hover {
	background-color: #f5f5f5;
}

#melodee-player-devices-display-box .spotify-device-active {
	background-color: #e8f5e9;
	font-weight: 600;
}

/* Drop Search - searching indicator animation */
#search-title.searching h2::after {
	content: '';
	animation: ellipsis 1.6s steps(4, end) infinite;
}

@keyframes ellipsis {
	0%   { content: ''; }
	25%  { content: '.'; }
	50%  { content: '..'; }
	75%  { content: '...'; }
}

/* Pulse highlight for Save Playlist button when play is pressed without a playlist */
.pulse-highlight {
	animation: pulse-border 0.5s ease-in-out 3;
}

@keyframes pulse-border {
	0%, 100% { box-shadow: none; }
	50% { box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.6); }
}