/* *********************************
	Charts
***********************************/
    #chartsUpdate_inProgress {
        text-align: center;
        padding: 40px 0;
        font-size: 21px;
        line-height: 25px;
    }

    #chartsWrapper {
        width: 100%;
		padding-bottom: 100px;
    }
    #chartsWrapper:after {
        content: "";
        display: table;
        clear: both;
    }
    #charts {
        max-width: 1500px;
        margin: 0 auto; 
    }
    #charts_loadTopOfCharts {
        padding: 30px;
        font-size: 20px;
        text-align: center;
        background: rgba(25,25,25,1.00); color: rgb(255,255,255);
    }
    #charts_loadTopOfCharts:hover {
        background: rgba(30,30,30,1.00);
    }
    #charts_loadTopOfCharts i {
        padding-right: 20px;
    }
    
    /* media */    
    @media (max-width:600px) {
        #chartsUpdate_inProgress { padding: 10px; font-size: 17px; line-height: 22px;}
    }


/* ----------------------------
	PAGE HEAD (most already in major.css)
------------------------------ */
    #sclk_pageHead.sclk_pageHead_charts {
        min-height: 240px;
        max-height: 480px;
		height: 27vw;
    }
    #sclk_pageHead.sclk_pageHead_charts #sclk_pageTitle {
        padding-bottom: 40px;
    }
	#sclk_pageHead.sclk_pageHead_charts #sclk_pageTitle span {
		overflow: hidden; 
        white-space: nowrap; 
        text-overflow: ellipsis;
	}
    #sclk_pageSubtitle {
        position: absolute;
        bottom: 20px; right: 0;
        font-size: 20px; font-weight: normal; text-align: right;
        color: rgba(180,180,180,0.85);
    }
	#sclk_pageTitle #sclk_pageToptitle {
		position: absolute;
		bottom: 20px;
		padding: 1px;
		font-size: 1.8rem;
		background: rgba(0,0,0,0.7);
	}
	/* media */    
	@media (max-width:600px) {
		#sclk_pageTitle #sclk_pageToptitle { bottom: 50px;}
	}
	@media (max-width: 1400px) {
		#sclk_pageHead.sclk_pageHead_charts #sclk_pageTitle { font-weight: 500; }
		#sclk_pageSubtitle { font-size: 17.5px; } 
	}
    @media (max-width: 1200px) {
        #sclk_pageSubtitle { font-size: 17.5px; } 
    }
    @media (max-width: 900px) {
		#sclk_pageHead.sclk_pageHead_charts #sclk_pageTitle { height: 100px; padding: 0 5px; align-items: center; }
        #sclk_pageSubtitle { font-size: 15.4px; bottom: 10px; } 
    }
    @media (max-width: 600px) {
		#sclk_pageHead.sclk_pageHead_charts #sclk_pageTitle { height: 55px; }
        #sclk_pageSubtitle { display: none; } 
    }
    
    /* for pages with advertisement */
    #sclk_pageHead.sclk_pageHead_charts.sclk_pageHead_chartsADS {
        min-height: 110px;
        max-height: 240px;
        background-image: none !important;
    }
	@media (max-width: 1400px) {
        #sclk_pageHead.sclk_pageHead_charts.sclk_pageHead_chartsADS { max-height: 150px; } 
    }
    @media (max-width: 900px) {
        #sclk_pageHead.sclk_pageHead_charts.sclk_pageHead_chartsADS { max-height: 140px; } 
    }
    @media (max-width: 600px) {
		#sclk_pageHead.sclk_pageHead_charts.sclk_pageHead_chartsADS { min-height: 100px; max-height: 100px; } 
        #sclk_pageHead.sclk_pageHead_charts.sclk_pageHead_chartsADS #sclk_pageTitle { height: 70px; } 
    }
    
  
/* ----------------------------
	CHARTS HEADER (w/ play button and genre filter)
------------------------------ */
    #chartsHeader_wrapper {
        width: 100%;
        margin: auto; 
        overflow: auto;
        position: -webkit-sticky; position: sticky; top: 40px; /* -webkit-sticky is currently needed for Chromes and Safari on iOS (remove when supported) */
        z-index: 1000;
        transition: 0.2s ease-in-out;
        background: black;
    }
    #chartsHeader_wrapper.header-up { /* sc_scrollEvents.js */
        top: 0;
    }
    #chartsHeader_container {
        height: 35px; 
        padding: 10px 0; 
        margin: 5px auto;
        max-width: 600px; 
        display: grid;
        grid-template-columns: 1fr 44px;
    }
    #chartsHeader_container select, #chartsHeader_container option.selected {
        padding: 4px 2px; 
        font-size: 17px; 
        width: 92%;  
        overflow: hidden; 
        white-space: nowrap; 
        text-overflow: ellipsis;
    }
    #chartsHeader_genreBox {
        white-space: nowrap;
        width: 100%; 
        padding: 0 0 10px 4px; 
        text-align: center; 
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .chartsHeader_filters {
        margin-right: 30px;
        display: flex; align-items: center;
        cursor: pointer;
    }
    .chartsHeader_filters:hover {
        color: rgb(245,245,245);
    }
    .chartsHeader_filters i {
        margin: 4px 0 0 7px;
    }
    /* play button */
    #chartsHeader_play #play {
        width: 37px; height: 36px;
    }
    #chartsHeader_play i {
        font-size: 36px; 
        --fa-primary-color: rgb(255,255,255); 
        --fa-secondary-color: rgb(var(--sc_blue)); 
        --fa-secondary-opacity: 0.9;
    }
    
    /* media */    
	@media (max-width:900px) {
		#chartsHeader_play #play { width: 37px; height: 30px; }
        #chartsHeader_play i { font-size: 30px; padding-left: 10px; } 
    }
    @media (max-width:600px) {
        #chartsHeader_container { padding: 4px; margin: 9px auto;}
		#chartsHeader_play #play { width: 37px; height: 25px; }
		#chartsHeader_play i { font-size: 25px;  } 
    }
      
    
    #search_playBox {
        white-space: nowrap;
        margin: auto;
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 60px;
    }
    
 
 

/* ----------------------------
	SONG BOX NEW
------------------------------ */
    .charts2_songBox {
        box-sizing: border-box;
        margin: 3px 5px; padding: 6px 5px;
        display: flex;
		border-radius: 5px;
		position: relative;
    }
    
    /* colors  */
    .charts2_songBox, .charts2_songBox a {
        color: rgba(var(--sc_primary_text), 0.55);
        transition: 0.15s;
    }
    .charts2_songBox:hover a {
        color: rgba(var(--sc_primary_text), 0.75);
    }
    .charts2_songBox a:hover {
        color: rgba(var(--sc_primary_text), 1);
    }
	
	/* add free button mobile */
	.charts2_button.addFree {
		display: none;
	}
	 
    /* box hover */
    .charts2_songBox:hover { background: rgb(var(--sc_secondary_background)); }
	
	@media (max-width: 900px) { 
		.charts2_songBox:hover { background: none; }
		.charts2_button.addFree {display: block; position: absolute; width: 105px; height: 26px; bottom: 20px; right: -7px; padding-top: 4px;}
	}
	
	
	/* ----------------------------
		PROMO AS SONGS
	------------------------------ */
	.charts2_songBox.charts2_promoAsSong {
		padding-top: 13px; padding-bottom: 13px;
		border-top: solid 1px rgba(var(--sc_blue), 0.1);
		border-bottom: solid 1px rgba(var(--sc_blue), 0.1);
		background: rgba(var(--sc_blue), 0.2);
	}
	.charts2_songBox.charts2_promoAsSong:hover {
		background: rgba(var(--sc_blue), 0.24);
	}
	.charts2_songBox.charts2_promoAsSong:hover .charts2_position_number {
		color: rgba(var(--sc_primary_text), 0.9);
	}
	
	@media (max-width: 900px) { 
		.charts2_songBox.charts2_promoAsSong { background: rgba(var(--sc_blue), 0.3); }
		.charts2_songBox.charts2_promoAsSong:hover .charts2_position_number { color: rgba(var(--sc_primary_text), 0.9); }
	}
    
	/* sticky in charts */
	.charts2_songBox.charts2_promoAsSong.charts2_promoSticky {
		padding-top: 5px; padding-bottom: 5px;
		margin: 3px 0;
		background: rgb(30 30 40);
		position: sticky;
		top: 120px;
		z-index: 2;
	}
	.charts2_songBox.charts2_promoAsSong.charts2_promoSticky:hover { background: rgb(35 35 45); }
	
	@media (max-width: 900px) { 
		.charts2_songBox.charts2_promoAsSong.charts2_promoSticky { top: 100px; }
	}
	
	/* ----------------------------
		SECTION: POSITION NUMBER
	------------------------------ */
    .charts2_section_position {
        width: 40px;
		display: flex; align-items: center; justify-content: center;
    }
    /* toggle position/play button */
    .charts2_posPlayToggle {
		display: flex; align-items: center; justify-content: center;
    }
	.charts2_position {
		display: grid; align-items: center; justify-content: center;
		grid-row-gap: 3px;
		text-align: center;
		font-size: 14px;
	}
	.charts2_position .charts2_position_number {
		font-size: 13px;
	}
	.charts2_position i {
		font-size: 12px;
		opacity: 0.7;
	}
	.charts2_position i.trend_newEntry { font-size: 10px; color: white; }
	.charts2_position i.trend_up { color: limegreen;  }
	.charts2_position i.trend_down { color: red }
	
    .charts2_playBtn {
		font-size: 25px;
		--fa-primary-color: rgb(255,255,255);
		--fa-secondary-color: rgb(var(--sc_blue));
		--fa-secondary-opacity: 0.9;
        display: none;
    }    
    
    /* hover */
    .charts2_songBox:hover .charts2_playBtn { display: flex;}
    .charts2_songBox:hover .charts2_position { display: none;}
	
	@media (max-width: 800px) {
        .charts2_songBox:hover .charts2_playBtn { display: none;}
        .charts2_songBox:hover .charts2_position { display: grid;}
    }
	@media (max-width: 600px) {
		.charts2_position div { font-size: 12px; }
    }
    
	/* ----------------------------
		SECTION: PICTURE
	------------------------------ */
    .charts2_section_picture {
        background: center center no-repeat; background-size: cover;
        height: 70px; width: 70px; margin: 0 5px;
		border-radius: 4px;
        cursor: pointer;
        filter: brightness(1.1) saturate(1.3);
    }
    
	/* ----------------------------
		SECTION: SONG TITLE & ARTIST
	------------------------------ */
    .charts2_section_titleBox {
        width: 25%; margin: 0 20px;
        display: flex; flex-wrap: wrap; flex-grow: 1;
    }
    .charts2_songname {
        width: 100%; height: 33.33%;
        font-size: 17.5px;
		color: rgba(var(--sc_primary_text), 1);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		cursor: pointer;
    }
    .charts2_artist {
        width: 100%; height: 33.33%;
		display: flex; align-items: center;
    }
	.charts2_artist span {
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.charts2_description {
        width: 100%; height: 33.33%;
		display: flex; align-items: center;
    }
	.charts2_description span {
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		font-size: 14px;
	}
	.charts2_description span i {
		padding-right: 4px;
	}
	/* badge */
	.charts2_badge {
		margin: 0 6px;
	}
	.charts2_badge i {
		margin: 0 1px;
	}
	.charts2_songBox:hover .charts2_badge i {
		--fa-primary-color: rgba(255,255,255,1);
		--fa-secondary-opacity: 1;
	}
	.charts2_badge .badge_patron {
		--fa-primary-color: rgba(255,255,255,0.9);
		--fa-secondary-color: rgb(var(--sc_blue_bright));
		--fa-secondary-opacity: 0.8;
	}
	.charts2_badge .badge_seller {
		--fa-primary-color: rgba(255,255,255,0.8);
		--fa-secondary-color: rgb(var(--sc_red_background));
		--fa-secondary-opacity: 0.7;
		opacity: 0.94;
	}
	
	/* extra info */
	.charts2_extra_infos {	
		width: 100%; height: 33.33%;
    	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		display: flex; align-items: center;
	}
	.charts2_extra_infos span {
		font-size: 13px;
		padding-right: 14px;
	}
	.charts2_extra_infos span .subdued {
		font-size: 11px; 
		opacity: 0.6;
		padding-left: 2px;
	}
	
	/* mobile: license price */
	.charts2_extra_infos span.charts2_price_mobile { 
		color: rgb(var(--sc_blue_bright)); 
		font-weight: 500; 
		display: none;
	}  
    
	@media (max-width: 600px) {
		.charts2_songname span { font-size: 17px; }
		.charts2_artist a, .charts2_artist .price { font-size: 15.4px; }
		.charts2_badge { margin: 0 3px;}
		.charts2_badge div { font-size: 15px;}
		.charts2_extra_infos span  { padding-right: 10px; }
		.charts2_extra_infos span.charts2_price_mobile { display: inline-block; }
    }

	/* ----------------------------
		SECTION: TAGS
	------------------------------ */
	.charts2_section_tags {	
		width: 30%; margin: 0 20px;
        display: flex; align-items: center;
	}
	.charts2_section_tags span {															/* keep as child of flex, so that ellipsis works */
        min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
	.charts2_section_tags .charts2_tagItem {
		display: inline-flex;
        padding: 4px 6px;
		margin-right: 10px;
        border-radius: 4px;
        background: rgba(var(--sc_primary_text), 0.1);
		min-width: 0;
		white-space: nowrap; overflow: hidden; text-overflow: clip;
	}
    .charts2_section_tags .charts2_tagItem:hover {
        background: rgba(var(--sc_primary_text), 0.12);
        color: rgba(var(--sc_primary_text),1);
		text-decoration: none;
    }
	
    
    /* description instead of tags on artist page if opted so; Elipsis overflow after 3 lines */
    .charts2_section_tags .artistPage_description {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 16px;
        font-size: 14.9px;
    }
    
	/* ----------------------------
		SECTION: DISTRIBUTION
	------------------------------ */
    .charts2_section_distribution {
		box-sizing: border-box;
        width: 230px;
  		margin: 0 20px 0 0;
        display: flex; align-items: center; justify-content: flex-end;
		gap: 10px;
    }
	.charts2_button, a.charts2_button, a.charts2_button:link {
		height: 28px;
		min-width: 28px;
		box-sizing: border-box;
		padding: 0 6px;
		font-size: 13px;
		color: rgba(255,255,255,0.8);
		background: rgba(var(--sc_blue), 0.8);
		border-radius: 5px;
		display: flex; align-items: center; justify-content: center; gap: 7px;
		cursor: pointer;
	}
	.charts2_button:hover, a.charts2_button:hover {
		color: rgba(255,255,255,1);
		background: rgba(var(--sc_blue), 1);
		text-decoration: none;
	}
	/* gray */
	.charts2_button_gray, .charts2_songBox a.charts2_button_gray {
		background: rgba(var(--sc_primary_text), 0.1);
		color: rgba(var(--sc_primary_text), 0.6);
		background: none;
	}
	.charts2_songBox:hover .charts2_button_gray, .charts2_songBox:hover a.charts2_button_gray  {
		color: rgba(var(--sc_primary_text), 0.8);
		background: rgba(var(--sc_primary_text), 0.08);
		text-decoration: none;
	}
	.charts2_songBox:hover .charts2_button_gray:hover, .charts2_songBox:hover a.charts2_button_gray:hover  {
		background: rgba(var(--sc_primary_text), 0.12);
		color: rgba(var(--sc_primary_text), 1);
	}
	@media (max-width: 900px) {
		.charts2_button_gray { background: none; color: rgba(var(--sc_primary_text), 1); }
    }
	
	
	/* overwrite discount style */
	 .charts2_section_distribution .discount {
	 	font-size: 12px;
    	margin-right: 0;
	 }
	
	/* ----------------------------
		SECTION: MORE INFO
	------------------------------ */
	.charts2_section_moreInfoBtn {
		width: 30px;
		display: flex; align-items: center; justify-content: center;
	}


	/* ----------------------------
		SONG BOXES: FLUID
	------------------------------ */
    @media (max-width: 1200px) {
        .charts2_section_tags { width: 20%; margin: 0 10px; }
        .charts2_section_titleBox { width: 30%; margin: 0 10px; }
		.charts2_section_moreInfoBtn { opacity: 0.9; }
    }
    @media (max-width: 900px) {
		.charts2_songBox { padding: 6px 0; }
        .charts2_section_tags { display: none; }
        .charts2_section_titleBox { width: 40%; }
		.charts2_section_moreInfoBtn { width: 45px; }
    }
    @media (max-width: 600px) {
        .charts2_section_position { width: 30px; }
		.charts2_section_picture { width: 60px; height: 65px; }
		.charts2_section_titleBox { margin: 0 0 0 10px; }
		.charts2_section_distribution { display: none; }
		.charts2_section_moreInfoBtn { width: 40px; }
    }
	@media (max-width: 400px) {
		.charts2_songBox { margin: 3px 3px 3px 0; }
        .charts2_section_picture { width: 50px; height: 65px; }
		.charts2_section_moreInfoBtn { width: 30px; }
    }