.custom-slider-container {
	position: relative;
	width: 50px;
	height: 260px;
	background: linear-gradient(0deg, rgb(7 15 35 / 22%) 0%, rgb(22 28 36) 100%);
	border-radius: 6px;
	margin: 20px;
	user-select: none;
	box-shadow: inset rgb(0 0 0) 0px 1px 2px 0px, inset rgb(25 26 29 / 75%) 0px 6px 0px 1px;
}

.custom-scale {
	position: absolute;
	bottom: 0;
	left: 20px;
	width: 10px;
	background: #00aaff33;
	border-radius: 6px 6px 0 0;
	pointer-events: none;

}

.custom-thumb {
	position: absolute;
	left: 15px;
	width: 20px;
	height: 30px;
	background: linear-gradient(0deg, rgb(0 78 117) 0%, rgb(32 95 128) 40%, rgb(162 220 255) 60%, rgb(221 244 255) 100%);
	border-radius: 2px;
	cursor: pointer;
	z-index: 1;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.custom-value {
	text-align: center;
	font-size: 14px;
	color: #fff;
	margin-top: 10px;
	font-family: monospace;
}

.sliders-wrapper {
	display: inline-flex;
	text-align:center;
	gap: 10px;
	margin-left: 20px;
	margin-bottom: 20px;
	align-items: flex-end;
}

.slider-labels {
	position: absolute;
	left: -30px;
	top: -5;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 12px;
	color: #abe6d9;
	font-family: monospace;
	pointer-events: none;
}

.slider-wrapper {
	position: relative;
	display: inline-block;
}

input[type="range"].eq-input {
	display: none;
}
.playerc{
	display:grid;
	grid-template-rows:auto min-content;
	height:100%;
	opacity:0.3;
	transition:all 150ms ease;
}

.playerc:hover{
	opacity:1;
}

.pcontrol-test{
	display:none;
}
.pcontrol-test:hover{
	display:flex;
}


.timeline{
	height:auto;
}

.player_block{
	display:block;
}

.player_img{
	aspect-ratio: 1 / 1;
	border-radius:5px 5px 0px 0px;
}

.info1{
	display:none;
}

.playerc-buttons{
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	transition:all 500ms ease;
	cursor:pointer;
}

.playerc-buttons:hover{
	opacity:1;

}

.timeline-progress{
	height:100%;
	width:0%;
	background-color:#a0c6e7;
	border-radius:0px 2px 2px 0px;
}


.player-btn-play{
	position:relative;
	left:2px;
}

.player-btn-pause{
	position:relative;
	left:0px;
}

.start-btn-ctrl{
	display:flex;
	height:80px;
	width:80px;
	justify-content:center;
	align-items:center;
}

.start-btn-ctrl.disabled{
	color:#3d4c5b;
	cursor:default;
	pointer-events:none;
}

.start-btn-ctrl.active{
	color:#ffa700;
	cursor:pointer;
}

.start-btn-play{
	position:relative;
	left:2px;
}

.sdd.a{
	/*height:130px;*/
	height:116px;
}


.sdd.b{
	height:138px;
}


@media (min-width: 1px){


}

@media (min-width: 588px){

}







.pulse-click{
transition: transform 0.1s ease;
}
.pulse-click:active {
  transform: scale(0.96);
}

.fade-in {
	opacity: 0.2;
	transform: translateX(-4px);
	filter: blur(4px);
	animation: fadeIn 800ms ease-out forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0.2;
		transform: translateX(-4px);
		filter: blur(2px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
		filter: blur(0);
	}
}

.fade-in-2 {
	opacity: 0.2;
	filter: blur(4px);
	animation: fadeIn2 800ms ease-out forwards;
}

@keyframes fadeIn2 {
	from {
		opacity: 0.2;
		filter: blur(2px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

.hq-button-block{
	display:none;
	white-space:nowrap;
	box-sizing:border-box;
	padding-right:16px;
}

.hq-button-block-2{
	display:block;
	white-space:nowrap;
	box-sizing:border-box;
	margin-top:18px;
}

@media (min-width: 610px){


	.hq-button-block{
		display:block;
		white-space:nowrap;
		box-sizing:border-box;
		padding-right:16px;
	}

	.hq-button-block-2{
		display:none;
		white-space:nowrap;
		box-sizing:border-box;
		margin-top:18px;
	}


	.player_block{
		display:flex;
		width:100%;
	}

	.player_img{
		height:250px;
		width:250px;
		border-radius:5px 0px 0px 0px;
	}
	
	.info1{
		display:grid; grid-template-rows:min-content min-content auto min-content ;
	}
	
	.info2{
		height:0;
	}
	
	.timeline{
		height:0;
	}
}


@media (min-width: 997px){


}

@media (min-width: 1110px){

	
}

@media (min-width: 1372px){


	.sdd.a{
		height:62px;
	}

	.sdd.b{
		height:90px;
	}

	.player_img{
		border-radius:5px 0px 0px 5px;
	}
}

@media (min-width: 1654px){

}


@media (min-width: 1900px){

}

@media (min-width: 2180px){

}





.player-func-btn{
	cursor:pointer;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	border-radius:3px;
	background-color:transparent;
	margin-right:5px;
	margin-top:0px;
	color:#fff;
	transition:all 300ms ease;
}

.btn-skip.disabled{
	color:#798f9f;
	pointer-events:none;
}

.btn-start-skip.disabled{
	color:#798f9f;
	pointer-events:none;
}


.btn-skip.pending{
	color:#c3cacf;
	pointer-events:none;
}

.channel-favorite > i.pending, .favorite-block > i.pending{
	color:#c3cacf;
	pointer-events:none;
}


.process-animation{
	display:none;
}

.process-animation.show{
	display:block;
}

.skip-icon{
	display:block;
}

.skip-icon.hide{
	display:none;
}



.btn-like.active{
	color:#fba72c;
}

.btn-like.pending{
	color:#c3cacf;
	pointer-events:none;
}

.btn-like.disabled{
	color:#798f9f;
	pointer-events:none;
}



.btn-dislike.active{
	color:#fba72c;
}

.btn-dislike.pending{
	color:#c3cacf;
	pointer-events:none;
}

.btn-dislike.disabled{
	color:#798f9f;
	pointer-events:none;
}






.btn-download.disabled{
	color:#798f9f;
	pointer-events:none;
}

.btn-watch-on-yt.disabled{
	color:#798f9f;
	pointer-events:none;
}

.btn-fav.disabled{
	color:#798f9f;
	pointer-events:none;
}

.btn-share.disabled{
	color:#798f9f;
	pointer-events:none;
}

.btn-report.disabled{
	color:#798f9f;
	pointer-events:none;
}











.rating-indicator{
	display:flex;
	font-size:13px;
	color:#000;
	gap:4px;
	text-shadow: -1px 2px 3px #ff00c2;
}

.fa-star{
	font-size:12px;
}

.rating-indicator.disabled .fa-solid.fa-star{
	color:#798f9f;
}

.rating-indicator.disabled .fa-regular.fa-star{
	color:#798f9f;
}

.rating-indicator .fa-solid.fa-star{
	color:#dbae00;
}

.rating-indicator .fa-regular.fa-star{
	color:#dbae00;
}

.rating-indicator .fa-solid.fa-star-half-stroke{
	color:#dbae00;
	font-size:12.5px;
}


.player-func-btn-vb{
	color:#ffa700;
	transition: all 300ms ease;
}


.player-func-btn-vb.active{
	background-color:#ffa700;
	color:#141d2a;
	border-radius: 3px 0px 0px 3px ;
}




.modal-donate-{
	display:none;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:9000;
	background-color:#14181e96;
	transition:all 50ms ease;
}

.modal-donate-.show{
	display:flex;
}

.modal-donate-btn{
	background-color:#455469;
	box-sizing:border-box;
	padding:8px 15px;
	border-radius:3px;
	transition:background 150ms ease;
	cursor:pointer;
	width:100%;
	user-select:none;
}	

.modal-donate-btn:hover{
	background-color:#3a4d69;
}


.modal-report{
	display:none;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:9000;
	background-color:#14181e96;
	transition:all 50ms ease;
}

.modal-report.show{
	display:flex;
}

.modal-equalizer{
	display:none;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:9000;
	background-color:#14181e96;
	transition:all 50ms ease;
}

.modal-equalizer.show{
	display:flex;
}

.track-other-text{
	display:none;
	margin-top:15px;
	background-color:#1b242f;
	border-radius:3px;
	border:1px solid #39495d;
	resize: none;
	width:100%;
	padding:8px 10px;
	color:#fff;
	font-size:14px;
	height:150px;
}

.modal-report-btn{
	display:inline-block;
	background-color:#455469;
	box-sizing:border-box;
	padding:8px 15px;
	border-radius:3px;
	transition:background 150ms ease;
	cursor:pointer;
	margin-top:5px;
	user-select:none;
}	

.modal-report-btn:hover{
	background-color:#3a4d69;
}

.modal-form-btn{
	display:inline-block;
	background-color:#455469;
	box-sizing:border-box;
	padding:8px 15px;
	border-radius:3px;
	transition:background 150ms ease;
	cursor:pointer;
	margin-top:5px;
	user-select:none;
}	

.modal-form-btn:hover{
	background-color:#3a4d69;
}

input[name=report_radio]{
	display:none;
}

label.modal-option-btn{
	display:inline-block;
	background-color:#455469;
	box-sizing:border-box;
	padding:8px 15px;
	border-radius:3px;
	transition:background 150ms ease;
	cursor:pointer;
	width:100%;
	margin-top:5px;
	user-select:none;
}

label.modal-option-btn:hover{
	background-color:#3a4d69;
}

label.modal-option-btn.checked{
	background-color:#3a4daa;
}





.eq-switcher{
	display:flex;
	font-family: PTSans-Regular;
	border-radius: 5px;
	border: 1px solid #121314;
	width:60px;
	padding: 8px;
	font-size:12px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	background: #1c242e;
	cursor:pointer;
	transition: all 300ms ease;
}

.eq-switcher.on{
	color: #54e900;
	background:#294104;
}

.eq-switcher.on .fa-power-off{
	text-shadow: 0px 0px 9px rgb(200 231 56 / 87%);
}

.eq-switcher.off{
	color: red;
	background:#492805;

}

.eq-switcher.off .fa-power-off{
	text-shadow: 0px 0px 9px #e311b9eb;
}

.eq-presets option{
	border: 1px solid #121314;
}

.eq-btn{
	display:flex;
	font-family: PTSans-Regular;
	border-radius: 5px;
	border: 1px solid #121314;
	min-width:60px;
	padding: 4px 16px;
	font-size:14px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	cursor:pointer;
	background:#27323f;
	color:#fff;
	white-space:nowrap;
	transition: all 300ms ease;
}


.eq-preset-reset{
}

.eq-preset-reset-all{
}

.eq-select{
	min-width: 200px;
	max-width:300px;
	font-family: PTSans-Regular;
	border: none;
	border-radius: 5px;
	font-size: 14px;
	outline: none;
	background:#27323f;
	color:#fff;
	padding: 5px 15px;
	border: 1px solid #121314;
	transition: all 300ms ease;
}

.eq-select:hover, .eq-btn:hover{
	background:#334152;
}
























.page-start{
	padding:0px;
	padding-top:0px;
	min-height:100vh;
}

.page-player{
	display:none;
}

.container-previous{
	display:none;
}


.fade-in-player {
	opacity: 0.4;
	filter: blur(4px);
	animation: fadeInPlayer 400ms ease-out forwards;
}

@keyframes fadeInPlayer {
	from {
		opacity: 0.2;
		filter: blur(4px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}


.fade-in-previous {
	opacity: 0.4;
	filter: blur(4px);
	animation: fadeInPrev 400ms ease-out forwards;
}

@keyframes fadeInPrev {
	from {
		opacity: 0.2;
		filter: blur(4px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}