/* *********************************
	Member pages
**********************************/
    #sclkMember {
    }
    
/* *********************************
	PAGE HEAD
***********************************/  
    #sclkArtist_topNavWrapper.sclkMember_topNavWrapper {
        top: 40px;
    }
    #sclkArtist_topNavWrapper.sclkMember_topNavWrapper.header-up { /* sc_scrollEvents.js */
        top: 0;
    }
    #sclkArtist_topNavWrapper.sclkMember_topNavWrapper #sclkArtist_topNavContainer {
        max-width: 1100px;
    }
    
 
 /* *********************************
	CONTENT
***********************************/  
    
    #sclkMember_contentWrapper {
        background: linear-gradient(to bottom, rgba(30,30,30,1) 0%, rgba(20,20,20,1) 100%);
    }
    #sclkMember_content {
        max-width: 1100px;
        margin: 0 auto 100px auto;
        padding: 20px 20px;
    }
    .sclkMember_header {
        width: 130px;
        font-size: 18px; font-weight: 500;
        white-space: nowrap;
        padding: 10px 30px 10px 0;
    }
    .sclkMember_contentBlocks {
        border-radius: 5px;
        background: rgba(20,20,20,0.9);
    }
    
    /* media */
    @media (max-width:800px) {
        #sclkMember_content { padding: 0; max-width: 800px; overflow: hidden;}
        .sclkMember_header { padding: 10px 0 5px 10px; }
        .sclkMember_contentBlocks { padding: 0 15px 30px 15px; margin: 0 0 20px 0; }
    }
 
 
  /* *********************************
	PRIVACY PROTECTED
***********************************/ 
    #sclkMember_privacyProtected_wrapper {
        padding: 30px 0 100px 0;
        display: flex; align-items: center; justify-content: center;
    }
    #sclkMember_privacyProtected_wrapper div {
        display: grid; grid-row-gap: 20px;
        text-align: center;
    }
    #sclkMember_privacyProtected_wrapper div i {
        font-size: 80px;
        opacity: 0.6;
    }

  
 /* *********************************
	OVERVIEW
***********************************/ 

/* ABOUT ME */
    #sclkMember_aboutTop {
        padding: 15px;
        margin: 20px 0 60px 0;
        display: flex; flex-wrap: wrap; justify-content: center;
    }
    /* picture */
    #sclkMember_aboutMemberPicture {
        width: 240px; height: 240px; 
        border-radius: 120px;
        margin: 0 50px 10px 10px;
        background-position: center center; background-size: cover;
    }
    #sclkMember_aboutNoPicture {
        width: 50px; height: 50px;
        margin: auto; padding: 7px; 
    }
    #sclkMember_aboutNoPicture i {
        font-size: 50px;
    }
    /* right block */
    #sclkMember_aboutRightBlock {
        max-width: 770px;
    }
    #sclkMember_NameAndFollow {
        display: flex; align-items: baseline;
        padding: 0 0 10px 0;
    }
    #sclkMember_aboutUsername {
        font-size: 22px;
        white-space: nowrap;
    }
    #sclkMembers_aboutFollows {
        padding-left: 30px;
    }
    #sclkMembers_aboutFollows div {
        display: inline-block; padding: 0 10px;
    }
    #sclkMembers_aboutFollows div:hover span {
        text-decoration: underline;
    }
    #sclkMembers_aboutFollows div strong {
        color: rgba(97,164,201,0.8);
        font-weight: 500; font-size: 20px;
        padding-right: 5px;
    }
    #sclkMember_aboutMetadata {
        padding: 0 0 15px 0;
    }
    #sclkMember_aboutMetadata div {
        padding-bottom: 10px;
    }
    #sclkMember_aboutMetadata span {
        padding-right: 20px; line-height: 25px;
        white-space: nowrap;
    }
    #sclkMember_aboutMetadata span i {
        padding-right: 5px;
        opacity: 0.6;
    }
    #sclkMember_aboutTagline {
        opacity: 0.6;
        font-style: italic;
    }
    #sclkMember_aboutMe {
        padding: 20px 0 0 0;
    }
    #sclkMember_aboutMe span {
        font-size: 16.5px;
        line-height: 22px;
        white-space: pre-line;
    }
    
    /* media */
    @media (max-width:600px) {
        #sclkMember_aboutTop { margin: 0 0 20px 0; }
        #sclkMember_aboutMemberPicture {
            width: 180px; height: 180px; 
            border-radius: 90px;
            margin: 0 0 10px 0; 
        }
        #sclkMember_aboutMe { font-size: 15.4px; }
    }

/* SPOTLIGHT SONG */
    #sclkMember_spotlightSong {
        margin: 10px 0 60px 0;
        display: flex; flex-wrap: wrap;
    }
    #memberSpotlight_container {
        display: flex; flex-wrap: wrap;
        padding: 0 20px 10px 20px;
    }
    #memberSpotlight_picture {
        height: 100px; width: 100px;
        margin: 10px 30px 0 0;
        background-position: center center; background-size: cover;
        cursor: pointer;
    }
    #memberSpotlight_text {
        max-width: 770px;
    }
    #memberSpotlight_songtitle {
        font-size: 17.5px; font-weight: 500;
        margin: 10px 0 0 0;
        cursor: pointer;
    }
    #memberSpotlight_artist {
        font-weight: 500;
    }
    #memberSpotlight_description {
        opacity: 0.7;
        padding: 8px 0;
    }
    #memberSpotlight_freetext {
        margin: 0; padding: 10px 0;
        white-space: pre-line; 
    }
    
    /* media */
    @media (max-width:800px) {
        #sclkMember_spotlightSong { margin: 20px 0 0 0; }
    }
    
    
/* ARTISTS */
    .sclkMember_overview_artistContainer {
        margin: 0 10px 60px 10px;
        padding: 10px 10px 15px 10px;
    }
    .sclkMember_overview_artist {
        width: 180px;
        margin-right: 25px;
    }
    .sclkMember_overview_artistPicture {
        height: 180px; width: 180px;
        margin: 0 0 10px 0;
        background-position: center center; background-size: cover;
        background-repeat: no-repeat; background-color: rgb(0,0,0);
        opacity: 0.9;
        transition: 0.2s;
        position: relative;
    }
    .sclkMember_overview_artist_seeAll {
       height: 180px; width: 180px;
       display: flex; align-items: center; justify-content: center;
       font-weight: 500;
       background: rgba(90,90,90,0.2);
       transition: 0.1s;
    }
    .sclkMember_overview_artistName {
        text-align: center;
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        padding-bottom: 7px;
    }
    .sclkMember_overview_artistName a {
        font-weight: 500;
        color: rgba(255,255,255,0.8);
    }
    .sclkMember_overview_artist_seeAll:hover {
       color: rgb(255,255,255);
       text-decoration: underline;
    }
    
    /* hover */
    .sclkMember_overview_artist:hover .sclkMember_overview_artistPicture {
        opacity: 1;
    }
    .sclkMember_overview_artist:hover .sclkMember_overview_artistName a {
        color: rgba(255,255,255,1);
    }
    
    /* media */
    @media (max-width:800px) {
        .sclkMember_overview_artistContainer { margin: 0 10px 30px 10px; }
        .sclkMember_overview_artist { width: 120px; margin-right: 15px; }
        .sclkMember_overview_artistPicture { height: 120px; width: 120px; }
        .sclkMember_overview_artist_seeAll { height: 120px; width: 120px; }
        .sclkMember_overview_artistName { font-size: 13.5px; }
    }
    
    
    /* BLOGS */
    #sclkMember_overview_blogSection_wrapper {
        padding: 20px 0;
    }
    #sclkMember_overview_blogSection_wrapper .sclkMember_blog_box {
        margin: 20px 0 0 20px;
        background: rgb(30,30,30);
        border-radius: 5px;
    }
    

 /* *********************************
	FOLLOWS
***********************************/ 
    #sclkMember_followHeader {
        padding: 10px 0 0 0;
        font-size: 22px; font-weight: 500;
    }
    #followContainer {
        margin: 10px 0 50px 0;
        display: flex; justify-content: flex-start; flex-wrap: wrap;
    }
    .sclkMember_own_follow_separator {
        display:flex; align-items: center; justify-content: center; 
        background: rgb(10,10,10); color: rgba(255,255,255,0.8);
        font-weight: 500; font-size: 17px;
    }
    .sclkMember_own_follow_separator i {
        padding-left: 10px;
    }
    .sclkMember_followsList {
        width: 350px; height: 100px;
        margin: 30px 15px 0 0;
        overflow: hidden;
        cursor: pointer;
    }
    .sclkMember_follows_picture {
        float: left;
        width: 100px; height: 100px; border-radius: 50px;
        background-position: center center; background-size: cover;
    }
    .sclkMember_follows_text {
        float: left;
        width: 230px; padding: 0 10px;
    }
    .sclkMember_follows_name {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: 17.5px; font-weight: 500;
        padding-bottom: 1px;
    }
    .sclkMember_follows_name i {
        padding-left: 10px;
        font-size: 17px;
    }
    .sclkMember_follows_handle {
        font-size: 14.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        opacity: 0.6;
        padding-bottom: 8px;
    }
    .sclkMember_follows_tagline {
        font-size: 15px; font-style: italic;
        opacity: 0.8;
    }
    
    /* media */
    @media (max-width:800px) {
        #sclkMember_followHeader { padding: 5px 0 15px 0; text-align: center; }
        .sclkMember_followsList { margin: 15px 0 0 0; }
        .sclkMember_follows_picture { width: 80px; height: 80px; border-radius: 40px; }
    }
    
 /* *********************************
	ARTISTS
    (mostly borrowing from overview and followers)
***********************************/ 
    .sclkMember_overview_artist.sclkMember_artistPage {
        margin: 30px 30px 15px 0;
    }
    
    /* media */
    @media (max-width:800px) {
        .sclkMember_overview_artist.sclkMember_artistPage { width: 100px; margin: 10px 10px 20px 10px; }
        .sclkMember_artistPage .sclkMember_overview_artistPicture { height: 100px; width: 100px; }
    }
    

 /* *********************************
	PLAYLISTS
    (mostly borrowing from overview and from search, charts)
***********************************/ 
    
    /* header */
    #sclkMemberPlaylist_pageHeadContent {
        display: grid; grid-row-gap: 10px;
        justify-items: center;
        z-index: 2;
    }
    #sclk_pageHeadPlaylist_fader {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 1;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
    }
    #sclkMemberPlaylist_headPageTitle {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: 60px; font-weight: 500;
        color: rgb(255,255,255);
        filter: drop-shadow(3px 3px 8px rgb(35,35,35));
    }
    #sclkMemberPlaylist_headPageDescription {
        opacity: 0.6;
    }
    .sclkMemberPlaylist_headPageSubTitle {
        filter: drop-shadow(2px 2px 5px rgb(35,35,35));
    }
    .sclkMemberPlaylist_headPageSubTitle span {
        padding: 8px;
    }
    
    /* sticky head button wrapper */
    #sclkMemberPlaylist_headButtonsWrapper {
        position: -webkit-sticky; position: sticky;  /* -webkit-sticky is currently needed for Chromes and Safari on iOS (remove when supported) */
        top: 40px;
        z-index: 1000;
        transition: 0.2s ease-in-out;
    }
    #sclkMemberPlaylist_headButtonsWrapper.header-up { /* sc_scrollEvents.js */
        top: 0;
    }
    #sclkMemberPlaylist_headButtons {
        max-width: 1500px;
        height: 30px;
        padding: 12px 0;
        margin: auto;
        display: flex; align-items: center; justify-content: center;
        background: rgb(0,0,0);
        position: relative;
    }
    #sclkMemberPlaylist_headShareBtn {
        position: absolute; right: 5px;
        display: flex; align-items: center;
        opacity: 0.75 !important;
    }
    #sclkMemberPlaylist_headShareBtn i {
        font-size: 17.5px;
    }
    
    /* hover */
    #sclkMemberPlaylist_headShareBtn:hover {
        opacity: 0.9 !important;
    }
    
    /* media */
    @media (max-width:900px) {
        #sclkMemberPlaylist_headPageTitle { font-size: 45px; } 
    }
    @media (max-width:600px) {
        #sclkMemberPlaylist_headPageTitle { font-size: 35px; }
        #sclkMemberPlaylist_headShareBtn { right: 20px; }
    }

    /* playlist lists have subtitles */
    .sclkMember_playlists_subtitles {
        text-align: center;
        font-size: 14px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        opacity: 0.7;
    }
    
    /* hover */
    .sclkMember_overview_artist:hover .sclkMember_playlists_subtitles {
        opacity: 1;
    }
    
    /* playlist container */
    #sclkMemberPlaylist {
        max-width: 1500px;
        overflow: hidden;
        margin: 0 auto; 
    }
    #playlistContainer {
        margin: 0 0 150px 0;
        background: rgb(0,0,0);
    }
    
    /* playlist followers */
    #playlistFollowersContainer {
        margin: 50px 10px 150px 10px;
        display: flex; justify-content: center; 
        flex-wrap: wrap;
    }
    

 /* *********************************
	PLAYLIST EDITS
***********************************/ 
    /* header */
    #sclkMemberPlaylist_pageHeadContent.sclkMemberPlaylist_editHead {
        padding-top: 30px;
        grid-row-gap: 15px;
    }
    .sclkMemberPlaylist_editHead input[type=text] {
        width: 320px;
        padding: 5px;
    }
    #sclkMemberPlaylist_editHead_title input {
        font-size: 24px;
    }
    .sclkMemberPlaylist_editHead .toggleBox {
        display: flex; align-items: center;
    }
    .sclkMemberPlaylist_editHead .toggleBox .labelBox {
        margin: 0 10px;
    }
    #sclkMemberPlaylist_headDeleteLink {
        position: absolute;
        left: 10px;
        font-size: 14px !important; letter-spacing: 0.2px !important;
    }
    
    /* song list */
    .playlistEditBtn_div {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0.8;
    }
    .playlistEditBtn_div:hover {
        opacity: 1;
    } 



 /* *********************************
	BLOGS 
***********************************/ 
    #sclkMember_blogs_wrapper {
        max-width: 950px;
        padding: 35px 0 100px 0;
    }
    .sclkMember_blog_box {
        margin-bottom: 60px;
        padding: 10px;
        background: rgba(20,20,20,0.9);
        border-radius: 10px
    }
    .sclkMember_blog_title {
        font-size: 24px;
        font-weight: 500;
    }
    .sclkMember_blog_title span {
        font-size: 13px; 
        opacity: 0.5;
        padding-left: 30px;
    }
    .sclkMember_blog_entry {
        padding: 20px 0;
    }
    .sclkMember_blog_entry .blog_text {
        font-size: 17.5px;
        word-break: break-word;
        white-space: pre-wrap;
    }
    .sclkMember_blog_entry img {
        margin: 5px 20px 10px 5px;
        float: left;
    }
    .sclkMember_blog_entry .blogPlay {
        display: block;
        margin: 10px 0;
        padding: 10px;
        border-radius: 10px;
        background: rgb(32,79,107);
        background: rgb(var(--sc_blue));
        max-width: 400px;
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        cursor: pointer;
        transition: 0.1s;
    }
    .sclkMember_blog_entry .blogPlay:hover {
        background: rgba(41,93,123,1.00);
        background: rgb(var(--sc_blue_bright));
    }
    .sclkMember_blog_entry .blogPlay i {
        padding-right: 10px;
    }
    
    /* media */
    @media (max-width:600px) {
        #sclkMember_blogs_wrapper { padding: 20px 10px 100px 10px; }
        .sclkMember_blog_box { margin-bottom: 30px; }
        .sclkMember_blog_title span { display: block; padding: 2px 0 0 0;}
        .sclkMember_blog_entry img { max-width: 180px; }
    }
    
    /* bottom links */
    .sclkMember_blog_bottomLinks {
        display: flex; align-items: center;
    }
    .sclkMember_blog_bottomLinks div {
        padding: 5px;
        border-radius: 5px;
        margin-right: 20px;
        opacity: 0.9;
        cursor: pointer;
    }
    .sclkMember_blog_bottomLinks div i {
        padding-right: 10px;
    }
    .sclkMember_blog_bottomLinks div:hover {
        background: rgb(50,50,50);
        opacity: 1;
    }
    



 /* *********************************
	PHOTOS
***********************************/ 
    #sclkMember_photos {
        margin: 30px auto 80px auto;
    }