@charset "UTF-8";

   
/* ----------------------------
	CHARTS FILTER
------------------------------ */
	/* background layer */
	#filter_layer_background {
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 9001;
		background: rgba(var(--sc_primary_background), 0.5);
		backdrop-filter: blur(0.5px);
		-webkit-backdrop-filter: blur(0.5px);
		display: none;
	}
	#filter_layer_background.filter_layer_darker {
		background: rgba(var(--sc_primary_background), 0.6);
	}
	#filter_layer_active {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		display: flex;
		align-items: center; justify-content: center;
		color: rgb(var(--sc_primary_text));
		font-size: 19px;
		opacity: 0;
		transition: 0.3s;
	}
	
	/* ----------------------------
		FILTER STRUCTURE
	------------------------------ */
	#filter_wrapper {
		position: sticky;
		top: 40px;
		z-index: 9002;
		margin: 0 0 30px 0;
    	padding: 10px 0;
		text-align: center;
		background: rgba(var(--sc_primary_background), 0.7);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}	
	
	/* ----------------------------
		FILTER HEADER STRUCTURE
	------------------------------ */
	#music_filterHeader {
		display: inline-grid;
		grid-template-columns: 1fr 120px;
	}
	.music_filterSelectBox {
		padding: 15px 20px;
		display: inline-flex;
		flex-wrap: nowrap;
    	white-space: nowrap;
		justify-content: center;
		gap: 10px 10px;
		background: rgb(var(--sc_background_40));
		border-radius: 5px 0 0 5px;
	}
	#music_filterView_box {
		position: relative;
		padding: 15px 0;
		display: inline-flex;
		justify-content: center;
		align-content: flex-start;
		background: rgba(var(--sc_blue_intense),0.4);
		background: rgba(0,35,50);
		color: rgba(255,255,255,0.8);
		border-radius: 0 5px 5px 0;
	}
	#music_filterView_box .music_filterItem_level2 {
		top: 62px;
		right: 0;
		color: rgba(var(--sc_primary_text),0.8);
	}
	
	
	/* ----------------------------
		MOBILE
	------------------------------ */
	#filter_mobile_button_wrapper {
		display: flex;
		display: none;
		justify-content: center; align-items: center;
		gap: 30px;
		z-index: 9001;
		position: sticky;
		top: 40px;
		margin: 0 0 25px 0;
    	padding: 12px 0;
		text-align: center;
		background: rgba(var(--sc_primary_background), 0.75);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
	.music_filterItem_box.filter_mobile_button {
		height: 32px;
		padding: 0 15px;
		display: flex;
		justify-content: center; align-items: center;
		background: rgb(var(--sc_background_40));
	}
	#filter_mobile_button_filter.music_filterItem_box {
		color: rgb(var(--sc_primary_text));
	}
	#filter_mobile_button_reset {
		display: none;
	}
	
	@media (max-width: 920px) {
		#filter_mobile_button_wrapper { display: flex; }
		#filter_layer_background { background: rgba(var(--sc_primary_background), 0.6); }
		#filter_layer_active { top: auto; bottom: 120px; }
		#filter_wrapper { width: 100vw; grid-template-columns: 0 1fr 1fr; position: fixed; top: -100vH; padding: 0; transition: 0.4s ease-in-out; }
		#filter_wrapper #music_filterHeader { grid-template-columns: 1fr; }
		#filter_wrapper .music_filterSelectBox { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 10px 20px; }
		#filter_wrapper .music_filterItem_level2 { left: 0; }
		#filter_wrapper #music_filter_tags_level2 { top: 155px; max-width: 100vw; }
		#music_filterView_box { justify-content: flex-start; padding: 10px 20px; }
    }
	

	/* ----------------------------
		FILTER MAIN BUTTONS (LEVEL 1)
	------------------------------ */
	.music_filterItem_box {
		position: relative;
		height: 30px;
		padding: 0 10px;
		display: flex;
		border-radius: 5px;
		border: solid 2px rgba(0,0,0,0);
	}
	.music_filterItem_box:hover {
		background: rgba(var(--sc_primary_text),0.06);
	}
	.music_filterItem_box.filterActive {
		border: solid 2px rgba(var(--sc_blue_intense),0.6);
	}
	.music_filterItem_level1 {
		padding: 5px;
		display: flex;
		align-items: baseline;
		font-size: 17px;
		cursor: pointer;
	}
	.music_filterItem_level1 span {
		padding-right: 10px;
	}
	.music_filterItem_level1 i {
		transition: 0.2s;
	}
	
	
	/* ----------------------------
		FILTER DROP-DOWN OPTIONS (LEVEL 2)
	------------------------------ */
	.music_filterItem_level2 {
		position: absolute;
		top: 40px;
		padding: 15px 0;
		max-height: 300px; max-width: 95vw;
		overflow-y: auto;
		display: flex; display: none;
		flex-direction: column;
		background: rgb(var(--sc_background_30));
		border: solid 1px rgba(var(--sc_primary_text),0.08);
		border-radius: 5px;
		z-index: 2;
	}
	/* each row with option */
	.music_filterItem_level2 div {
		text-align: left;
		white-space: nowrap;
		font-size: 17px;
	}
	.music_filterItem_option {
		padding: 5px 15px;
		display: grid;
		grid-template-columns: 25px 1fr;
		cursor: default;
	}
	.music_filterItem_oneLiner {
		padding: 5px 15px;
		display: grid;
	}
	.music_filterItem_twoColumns {
		padding: 5px 15px;
		display: grid;
		grid-template-columns: 90px 1fr;
		align-items: baseline;
	}
	.music_filterItem_level2 .music_filter_entryError {
		text-align: center;
		font-size: 14px;
		color: rgb(var(--sc_red_background));
		padding-bottom: 10px;
		display: none;
	}
	.music_filterItem_input_range_box {
		display: flex;
		align-items: baseline;
		gap: 15px;
	}
	.music_filterItem_divider {
		padding: 0;
		margin: 12px 10px;
		height: 1px;
		border-bottom: solid 1px rgba(var(--sc_primary_text),0.08)
	}
	.music_filterItem_divider_bottom {
		padding-bottom: 20px;
		margin-bottom: 5px;
		border-bottom: solid 1px rgba(var(--sc_primary_text),0.08)
	}
	.music_filterItem_input_range_box input {
		width: 60px;
	}
	.music_filterItem_input_range_box span {
		opacity: 0.5;
		font-size: 15px;
	}
	.music_filter_selectable {
		cursor: pointer;
	}
	.music_filter_selectable:hover {
		background: rgb(var(--sc_background_40));
	}
	
	/* character sliders */
	.music_filterItem_characterGrid {
		padding: 5px 10px;
		display: grid;
		grid-template-columns: 100px 1fr 25px;
	}
	#music_filter_character_level2 .music_filter_character_label {
		font-size: 16px;
		padding-top: 4px;
	}
	/* reset buttons */
	.music_filterItem_characterGrid .music_filter_character_reset {
		font-size: 16px;
		padding-top: 5px;
		text-align: right;
		color: rgba(var(--sc_primary_text));
		opacity: 0.6;
		cursor: pointer;
	}
	.music_filterItem_characterGrid .music_filter_character_reset i {
		display: none;
	}
	.music_filterItem_characterGrid:hover .music_filter_character_reset {
		opacity: 0.8;
	}
	.music_filterItem_characterGrid .music_filter_character_reset:hover {
		opacity: 1;
	}
	/* sliders */
	#music_filter_character_level2 input {
		width: 200px;
	}
	#music_filter_character_level2 .sclk_sliderBox div.sliderLabels div {
		opacity: 0.5;
	}
	/* no results output */
	#music_filter_noResults {
		padding: 30px 20px 100px 20px;
		font-size: 18px;
		text-align: center;
		opacity: 0.8;
	}
	#music_filter_noResults span {
		color: rgb(var(--sc_primary_text));
		border-bottom: solid 2px rgb(90,90,90);
		padding: 3px;
	}
	
	
	/* TAGS - LEVEL 2 */
	#music_filter_tags_level2 {
		top: 67px;
	}
	#filter_tagsBox_wrapper {
		box-sizing: border-box;
		width: 420px;
		max-width: 100%; max-height: 100%;
		padding: 25px 15px 0 15px;
		overflow-y: auto;
	}
	#sclkArtist #filter_tagsBox_wrapper {
		width: 600px;
	}
	/* search box */
	#filter_tagsBox_search {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	#filter_tagsBox_search input {
		width: 95%;
		box-sizing: border-box;
		border-radius: 5px;
		font-size: 17px;
		padding: 6px 4px;
	}
	/* other */
	#filter_selected_tags_wrapper {
		padding: 0 0 20px 0;
	}
	#filter_selected_tags {
		margin-bottom: 5px;
	}
	#filter_tagsBox_require_all {
		display: grid;
		grid-template-columns: 25px 1fr;
		align-items: center;
		padding: 10px 0 0 0;
	}
	#filter_tagsBox_require_all div {
		font-size: 14px;
	}
	#filter_tags_clickToSelect {
		padding: 10px 0 0 0px;
		font-size: 13px;
		opacity: 0.5;
	}
	/* Tags: listed tags */
	.filter_tagsBox {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 15px;
	}
	.filter_tagsBox .tagItem {
        padding: 3px 6px;
        border-radius: 4px;
        background: rgba(var(--sc_primary_text), 0.05);
        border: solid 1px rgba(var(--sc_primary_text),0.06);
        color: rgba(var(--sc_primary_text),0.8);
        cursor: pointer;
		font-size: 16.5px;
    }
    .filter_tagsBox .tagItem:hover {
        background: rgba(var(--sc_primary_text), 0.15);
        color: rgba(var(--sc_primary_text),1);
    }
    .filter_tagsBox .tagItem.selected {
        background: rgb(var(--sc_blue_intense));
        color: rgb(255,255,255);
    }
	.filter_tagsBox .tagItem.selected i {
        margin-left: 3px;
        font-size: 13px;
    }

/* ----------------------------
	FILTERS ACTIVE
------------------------------ */
	#filter_active_wrapper {
		max-width: 760px;
		margin: -25px auto 25px auto;
		display: flex; justify-content: flex-start; 
		flex-wrap: wrap;
		gap: 10px;
	}
	.filter_active_item {
		display: flex;
		padding: 6px 8px;
        border-radius: 5px;
        background: rgba(var(--sc_primary_text), 0.13);
        border: solid 1px rgba(var(--sc_primary_text), 0.12);
        color: rgba(var(--sc_primary_text), 0.7);
		font-size: 13px;
		white-space: nowrap;
        cursor: pointer;
	}
	.filter_active_item:hover {
		background: rgba(var(--sc_primary_text), 0.1);
		border: solid 1px rgba(var(--sc_primary_text), 0.2);
	}
	.filter_active_item .filter_active_item_label {
		opacity: 0.5; 
		padding-right: 6px;
	}
    .filter_active_item i {
        margin-left: 10px;
        font-size: 16px;
    }
	.filter_active_item:hover i {
        color: rgba(var(--sc_red_background),0.9);
	}
	
	@media (max-width: 920px) {
		#filter_active_wrapper { margin: -20px auto 25px auto; justify-content: center;  }
    }