@import url('root.css');

body {
	min-height: 100%;
	margin: 0;
	background: var(--body-bg-color);
}

.btn {
	border-radius: 7px;
	background: url();
}

.rounded-smooth {
	border-radius: 12px;
}

.btn.btn-primary {
	border-color: var(--btn-primary) !important;
	background-color: var(--btn-primary) !important;
}

.input-group-text.transparent,
.form-control.transparent {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.25) !important;
	background-color: rgba(255, 255, 255, 0.25) !important;
}

.form-control.transparent:focus {
	border-color: #fff !important;
}

.form-control.transparent::placeholder {
	color: #fff !important;
	opacity: .3;
}

input:focus,
textarea:focus,
select:focus,
.btn:focus {
	box-shadow: none !important;
}

@media (min-width: 1200px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1024px;
	}
}

.hide {
	display: none !important;
}

.cursor-pointer {
	cursor: pointer !important;
}

.sub-heading {
	display: block;
	font-size: 16px;
	color: var(--heading-color);
}

.loading-btn {
	display: inline-flex;
	align-items: center;
}

.loading-btn i {
	font-size: 14px;
}

.donate-doku {
	max-height: 45px;
	display: flex;
	gap: 5px;
	color: #fff !important;
	background: #f50022;
}

.donate-doku img {
	width: 32px;
}

.donate-paypal {
	max-height: 45px;
	display: flex;
	border-radius: 7px;
	overflow: hidden;
}

/*---------------------------------------------*/
/*                    Top Nav                  */
/*---------------------------------------------*/

.top-nav .menu::after {
	content: "|";
	margin: 0 7px;
	display: inline-block;
	color: #fff;
}

.top-nav .menu:not(:has(~ .search-form)):not(:has(+ .menu)):after {
	display: none;
}

.btn.mobile-open {
	width: 50px;
	height: 28px;
	padding: 0 0 0 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-color: #262626 !important;
	background-image: var(--general-bg-image);
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.search-box{
    padding: inherit;
}

@media screen and (min-width: 768px) {
    .search-box{
        padding: 0.1rem 0.5rem;
    }
}

/*---------------------------------------------*/
/*                   Main Nav                  */
/*---------------------------------------------*/

.bg-navbar {
	background-color: var(--body-bg-color);
}

.desktop-bg {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: -100%;
	left: 0px;
	right: 0px;
	transition: transform 0.3s ease-in-out;
	overflow: hidden;
	background-color: transparent;
}

.bg-filter {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	inset: 0;
	-webkit-backdrop-filter: brightness(60%) blur(16px);
	backdrop-filter: brightness(60%) blur(16px);
}

.logo {
	width: 112px;
	height: auto;
}

@media screen and (min-width: 768px) {
	.logo {
		width: 160px;
		height: auto;
	}

	.bg-navbar {
		background-color: transparent;
	}
}

.main-content {
	margin-top: 96px;
}

@media screen and (min-width: 768px) {
	.main-content {
		margin-top: 112px;
	}
}

/*---------------------------------------------*/
/*                    Player                   */
/*---------------------------------------------*/

.wrapper {
	height: 380px;
	border-radius: 20px;
	border: 1px solid var(--general-bg-color);
	background: var(--general-bg-color);
}

.main-nav .navbar>.col:first-child,
.wrapper .player {
	flex: 0 0 73%;
}

.wrapper .player:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
}

.player .big-play-pause,
.player .pop-up {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
}

.player .big-play-pause {
	border: none;
	outline: none;
	background: rgba(0, 0, 0, 0);
	cursor: pointer;
	z-index: 90;
}

.player .big-play-pause i {
	margin-bottom: 45px;
	display: none;
	font-size: 85px;
	color: var(--base-color);
	opacity: 0;
}

.player .big-play-pause svg {
	width: 80px;
	margin-bottom: 45px;
	display: none;
	fill: var(--base-color);
	animation: spin 2s linear infinite;
}

.player .big-play-pause.loading {
	cursor: none;
	pointer-events: none;
	background: rgb(0, 0, 0);
}

.player .big-play-pause.loading svg,
.player .big-play-pause.play i.far.fa-play-circle,
.player .big-play-pause.pause i.far.fa-pause-circle {
	display: block;
}

.player .big-play-pause.animate {
	animation: bigPlayBtn 0.8s ease-in-out;
}

.player .big-play-pause.animate i {
	animation: bigPlayIcon 0.4s ease-in-out;
}

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

	to {
		transform: rotate(360deg);
	}
}

@keyframes bigPlayBtn {
	0% {
		background: rgba(0, 0, 0, 0);
	}

	50% {
		background: rgba(0, 0, 0, 0.25);
	}

	100% {
		background: rgba(0, 0, 0, 0);
	}
}

@keyframes bigPlayIcon {
	0% {
		font-size: 85px;
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		font-size: 130px;
		opacity: 0;
	}
}

.player .pop-up {
	background: rgba(0, 0, 0, 0.5);
	z-index: 90;
}

.player .pop-up .box {
	width: 280px;
	height: 220px;
	margin-top: -40px;
	font-size: 15px;
	border-radius: 26px;
	background: var(--base-opacity-color);
}

.player .control {
	padding: 10px 10px 5px;
	display: block !important;
	bottom: 0;
	opacity: 1;
	visibility: visible;
	border-bottom-left-radius: 20px;
	background: rgba(0, 0, 0, 0.75);
	transition: all 0.3s ease-in-out;
	z-index: 99;
}

.player.hide-control:-webkit-full-screen,
.player.hide-control:-webkit-full-screen .big-play-pause {
	cursor: none;
}

.player.hide-control .control {
	opacity: 0;
	visibility: hidden;
}

.player .control .progress-bar {
	height: 3px;
	margin-bottom: 5px;
	background-color: var(--base-color);
}

.player .control .box {
	padding: 0 5px;
}

.player .control .box button.btn {
	height: 45px;
	padding: 0;
	line-height: 1;
}

.player .control .box button.btn i {
	height: 100%;
	padding: .375rem .75rem;
	display: flex;
	align-items: center;
}

.player .control[data-pause="false"] .box .play-pause-btn .pause,
.player .control[data-pause="true"] .box .play-pause-btn .play,
.player .control[data-mute="false"] .box .mute-unmute-btn .mute,
.player .control[data-mute="true"] .box .mute-unmute-btn .unmute,
.player .control[data-fullscreen="false"] .box .compress-screen-btn,
.player .control[data-fullscreen="true"] .box .picinpic-btn,
.player .control[data-fullscreen="true"] .box .casting-btn,
.player .control[data-fullscreen="true"] .box .full-screen-btn {
	display: none;
}

.player .control[data-casting="true"] .box .casting-btn,
.player .control[data-picinpic="true"] .box .picinpic-btn {
	color: var(--base-color) !important;
}

.player .control .box .play-pause-btn {
	font-size: 16px;
}

.player .control .box .mute-unmute-btn,
.player .control .box .compress-screen-btn,
.player .control .box .full-screen-btn,
.player .control .box .picinpic-btn {
	font-size: 19px;
}

.player .control .box .casting-btn {
	font-size: 20px;
}

.player-control-tooltip {
	margin-bottom: 16px !important;
}

.player-control-tooltip .tooltip-arrow {
	display: none;
}

.player-control-tooltip .tooltip-inner {
	font-weight: 600;
	background: rgba(0, 0, 0, 0.75);
}

/*---------------------------------------------*/
/*                     Live                    */
/*---------------------------------------------*/

.player .control .box .live {
	font-size: 14px;
}

.player .control .box .live .fa-circle {
	font-size: 8px;
}

/*---------------------------------------------*/
/*                    Marquee                  */
/*---------------------------------------------*/

.js-marquee-wrapper {
	animation-duration: 15s !important;
}

.marquee-wrapper {
	height: 45px;
	line-height: 45px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--general-bg-color);
	transition: all 0.1s ease-in-out;
}

.marquee-wrapper .marquee-highlight {
	padding: 0 15px;
	font-size: 14px;
	border-radius: 4px 0 0 4px;
	box-shadow: 1px 0px 0px 0px var(--marquee-highlight-color);
	background-color: var(--marquee-highlight-color);
	z-index: 1;
}

.marquee-wrapper .marquee-highlight:after {
	content: "";
	width: 0;
	height: 0;
	margin-top: -6px;
	position: absolute;
	top: 50%;
	right: -5px;
	border-bottom: 6px solid transparent;
	border-left: 6px solid var(--marquee-highlight-color);
	border-top: 6px solid transparent;
	filter: drop-shadow(2px 0px 0px var(--marquee-highlight-color));
}

.marquee-wrapper .marquee-highlight .icon {
	display: none;
	font-size: 16px;
}

.marquee-wrapper .marquee-highlight .text {
	display: inline-block;
	white-space: nowrap;
}

.marquee-wrapper .marquee-highlight .fa-circle {
	font-size: 8px;
}

.marquee-wrapper .marquee-content>.marquee-text {
	display: none;
}

.marquee-wrapper .marquee-text {
	font-size: 14px;
	transition: background-color 0.25s ease;
}

.player .control .js-marquee-wrapper {
	animation-duration: 10s !important;
}

.player .control .marquee-wrapper {
	height: 30px;
	margin: 0 15px -1px 0;
	line-height: 30px;
	border-radius: 6px;
}

.player .control .marquee-wrapper .marquee-highlight {
	padding: 0 10px;
	font-size: 13px;
}

.player .control .marquee-wrapper .marquee-highlight .icon {
	font-size: 14px;
}

.player .control .marquee-wrapper .marquee-highlight:after {
	right: -4px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-width: 5px;
}

.player .control .marquee-wrapper .marquee-text {
	font-size: 13px;
}

.radio-static-image {
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 500px) {
	.radio-static-image {
		width: 100%;
		height: auto !important;
		top: 50% !important;
		transform: translate(-50%, -50%);
	}
}

/*---------------------------------------------*/
/*              Custom Scrolllbar              */
/*---------------------------------------------*/
.scroll-3 {
	max-height: calc(74px + 0.5rem);
	overflow-y: auto;
}

.scroll-bar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: hsla(0, 0%, 100%, 0.1);
	border-radius: 8px;
}

.scroll-bar::-webkit-scrollbar {
	width: 6px;
	background-color: transparent;
}

.scroll-bar::-webkit-scrollbar-thumb {
	background-color: hsla(0, 0%, 100%, 0.2);
	border-radius: 8px;
}

/*---------------------------------------------*/
/*                     Banner                  */
/*---------------------------------------------*/

.wrapper .banner img {
	object-fit: cover;
	object-position: center;
}

/*---------------------------------------------*/
/*                 Content Panel               */
/*---------------------------------------------*/

.panel {
	font-size: 14px;
	border-radius: 20px;
	background: var(--general-bg-color) none repeat scroll 0% 0%;
}

.panel .heading {
	min-height: 44px;
	border-radius: 20px 20px 0 0;
	background-image: var(--general-bg-image);
}

.panel .body {
	padding: 20px 20px 22px;
}

.panel .body label {
	font-size: 16px;
}

/*---------------------------------------------*/
/*                    Contact                  */
/*---------------------------------------------*/

.contact iframe {
	margin-bottom: -4px;
	border-radius: 12px;
}

.social-media {
	gap: 12px;
}

.social-media a {
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	line-height: 35px;
	border-radius: 100px;
	transition: all 0.1s ease-in-out;
}

.social-media a:hover {
	transform: scale(1.2);
}

.social-media a.facebook {
	background: #3b5998;
}

.social-media a.twitter {
	background: #55acee;
}

.social-media a.youtube {
	background: #cc181e;
}

.social-media a.instagram {
	background: #ff4c7c;
}

/*---------------------------------------------*/
/*              Card (Guide/News)              */
/*---------------------------------------------*/

.news-card {
	text-decoration: none;
	background: hsla(var(--color-black), .5);
	background-blend-mode: soft-light;
	box-shadow: 0 0 20px 0 hsla(var(--color-black), .5);
	border-radius: 16px;
	overflow: hidden;
}

.news-card img {
	border-radius: 8px;
	margin-block: -12px;
	box-shadow: -4px 0 20px 0 rgba(0, 0, 0, .5);
	transition: transform .3s ease-in-out;
}

@media screen and (min-width: 768px) {
	.news-card img {
		margin-block: 0;
		border-radius: 12px 12px 0 0;
		box-shadow: none;
		-webkit-mask-image: linear-gradient(to bottom, hsla(var(--color-black), 1) 0, hsla(var(--color-black), 1) 90%, hsla(var(--color-black), 0) 100%);
		mask-image: linear-gradient(to bottom, hsla(var(--color-black), 1) 0, hsla(var(--color-black), 1) 90%, hsla(var(--color-black), 0) 100%);
	}
}

.news-card:hover .GenericCard_link__0MPr5 {
	color: hsl(var(--color-black));
	background-color: hsl(var(--color-white));
}

.news-card:hover img {
	transform: scale(1.05);
}

/*---------------------------------------------*/
/*                  Pagination                 */
/*---------------------------------------------*/

.pagination {
	margin-top: 20px;
	padding-top: 20px;
	border-top: solid 1px #4c4c4c;
}

.pagination .page-link {
	width: 36px;
	height: 36px;
	background-color: transparent;
	border: 2px solid #fff;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50% !important;
	transition: all 0.2s ease-in-out;
	color: #fff;
}

.active>.page-link,
.page-link.active {
	background-color: #fff;
	border-color: #fff;
	color: #000;
}

.pagination .page-link .fa-chevron-left {
	margin-right: 3px;
}

.pagination .page-link .fa-chevron-right {
	margin-left: 3px;
}

.pagination .page-item:not(.active) .page-link:hover {
	transform: scale(1.1);
}

.pagination .page-link:focus {
	box-shadow: none;
}

@media (min-width: 576px) {
	.pagination .page-link {
		width: 40px;
		height: 40px;
		font-size: 1.25rem;
	}
}

/*---------------------------------------------*/
/*                   Modal                     */
/*---------------------------------------------*/

.modal.fade {
	opacity: 1;
}

.modal.fade.custom-animation {
	transform: scale(0.9);
	opacity: 0;
	transition: all .2s linear;
}

.modal.fade.custom-animation.show {
	opacity: 1;
	transform: scale(1);
}

.modal.fade.custom-animation.show .modal-dialog {
	-webkit-transform: translate(0);
	-moz-transform: translate(0);
	transform: translate(0);
}

.modal.fade.custom-animation .modal-dialog {
	-webkit-transform: translate(0);
	-moz-transform: translate(0);
	transform: translate(0);
}

.modal .modal-content {
	border-radius: 12px;
}

#donate-modal .modal-content {
	border-color: var(--general-bg-color);
	background: var(--general-bg-color);
}

#donate-modal .modal-header {
	border-color: #464646;
}

#donate-modal .btn-close {
	opacity: 1;
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(319deg) brightness(103%) contrast(101%);
}

#donate-modal form.disable label,
#donate-modal form.disable input {
	pointer-events: none;
	cursor: auto;
}

#donate-modal form.disable .form-group>.form-control,
#donate-modal form.disable .form-check,
#donate-modal form.disable .input-group {
	opacity: .7;
}

#donate-modal small {
	font-size: 12px;
}

@media (min-width: 576px) {
	.modal-dialog.alert {
		max-width: 400px;
	}
}

/*---------------------------------------------*/
/*                 Sweet Alert                 */
/*---------------------------------------------*/

.swal2-popup {
	width: 400px;
	background: #121212db !important;
	border: 1px solid white;
	border-radius: 1.375rem;
}

.swal2-popup.medium-width {
	width: 350px;
}

.swal2-title,
.swal2-html-container {
	color: white !important;
}

.swal2-actions {
	direction: rtl;
}

.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-default-outline:focus {
	box-shadow: none;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left],
div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right],
div:where(.swal2-icon).swal2-success .swal2-success-fix,
.swal2-icon.swal2-success.trans-anim-bg [class^=swal2-success-circular-line],
.swal2-icon.swal2-success.trans-anim-bg .swal2-success-fix {
	background-color: transparent !important;
}

.footer {
	padding: 47px 0 40px;
	font-size: 16px;
}

.line {
	width: 100%;
	height: 1px;
	opacity: 0.5;
	background: #000;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 900px) {
	.wrapper .player {
		flex: 0 0 100%;
	}
}

@media (max-width: 768px) {
	.cont-padding {
		padding-right: 1.5rem !important;
		padding-left: 1.5rem !important;
	}

	.top-nav .nav-wrapper {
		width: 100%;
		padding-left: 4px;
		padding-right: 4px;
		position: absolute;
		top: calc(100% + 27px);
		z-index: 10;
	}

	.search-form,
	.main-nav .navbar>.col .search-form {
		max-width: 215px;
		height: 28px;
		z-index: 10;
	}

	.wrapper .player {
		flex: 0 0 100%;
	}

	.player .big-play-pause i {
		font-size: 45px;
	}

	.player .big-play-pause svg {
		width: 50px;
	}

	.player-control-tooltip .tooltip-inner {
		display: none !important;
	}

	@keyframes bigPlayIcon {
		0% {
			font-size: 45px;
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			font-size: 90px;
			opacity: 0;
		}
	}

	.news-list .news-img {
		width: 100%;
	}

	.news-list:not(:first-child) .news-img {
		padding-top: 4px;
	}

	.news-list .news-img img {
		height: auto;
	}

	.news-list .news-content {
		width: 100%;
	}

	.news-detail img {
		width: 100%;
	}
}

@media (max-width: 650px) {
	.marquee-wrapper .marquee-highlight .icon {
		display: inline-block;
	}

	.marquee-wrapper .marquee-highlight .text {
		display: none !important;
	}
}

@media (max-width: 430px) {
	.footer {
		padding: 35px 0 27px;
		font-size: 13px;
	}
}

@media (max-width: 375px) {

	.cont-padding,
	.main-nav .navbar .nav {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	.main-nav .navbar .nav li a {
		margin: 0;
	}

	.player .control .box .live {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 992px) {

	.container,
	.container-md,
	.container-sm {
		max-width: calc(100vw - 100px);
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	.player .control .marquee-wrapper .marquee-highlight .icon {
		display: inline-block;
	}

	.player .control .marquee-wrapper .marquee-highlight .text {
		display: none;
	}
}

@media (min-width: 768px) {
	.line {
		flex: 1;
		width: initial;
	}

	.line-left {
		margin: 0 40px 0 0;
		background: linear-gradient(to right, rgba(0, 0, 0, 0), #fff);
	}

	.line-right {
		margin: 0 0 0 40px;
		background: linear-gradient(to left, rgba(0, 0, 0, 0), #fff);
	}
}


/*---------------------------------------------*/
/*                 Audio card                  */
/*---------------------------------------------*/


.slider-button-nav {
	z-index: 2;
	display: flex;
	gap: 16px;
	align-items: flex-end;
	position: relative;
	top: 8px;
}

.slider-button-nav button {
	aspect-ratio: 1;
	position: unset;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: transparent;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.slider-button-nav button::after {
	content: '';
}

.slider-button-nav button:hover:not(:disabled) {
	transform: scale(1.1);
}

.slider-button-nav button:disabled {
	opacity: .5;
	cursor: default;
}

.swiper-button-prev {
	justify-content: flex-end;
}

.swiper-button-next {
	justify-content: flex-start;
}

.audio-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 440px;
	text-align: left;
	background: hsla(0, 0%, 0%, 0.5);
	background-blend-mode: soft-light;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
	border: 0;
	border-radius: 16px;
	cursor: pointer;
	padding-block: 12px;
	padding-inline: 12px
}

.audio-card-fixed-width {
	width: 220px;
	height: 100%;
}

.audio-card:hover {
	background: hsla(0, 0%, 0%, 0.7);
}

.audio-card .audio-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	padding-block: 0;
	padding-inline: 0;
}

.audio-card .audio-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px
}

.audio-card .audio-card-image .audio-card-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	top: 50%;
	left: 50%;
	background-color: hsla(0, 0%, 0%, 0);
	border: 1px solid hsl(0, 0%, 100%, );
	border-radius: 64px;
	transform: translate(-50%, -50%);
	transition: transform .3s ease-in-out;
}

.audio-card:hover .audio-card-icon {
	transform: translate(-50%, -50%) scale(1.1)
}

.audio-card:active {
	background-color: hsla(0, 0%, 0%, 0.5) !important;
}

.audio-card .audio-card-content {
	width: 100%;
	padding-block: 4px;
	padding-inline: 0px;
}

.slider-swiper {
	position: relative;
	margin-block: -20px;
	margin-inline: calc(20px *-1);
	padding-block: 20px;
	padding-inline: 20px;
	-webkit-mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 1) 20px, hsla(0, 0%, 0%, 1) calc(100% - 20px), hsla(0, 0%, 0%, 0) 100%);
	mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 1) 20px, hsla(0, 0%, 0%, 1) calc(100% - 20px), hsla(0, 0%, 0%, 0) 100%);

}

.slider-swiper .slider-item {
	width: auto;
	height: auto;
	margin-bottom: 0;
	transition: transform .3s ease-in-out
}

@media screen and (min-width: 578px) {
	.slider-swiper {
		margin-block: -36px;
		margin-inline: calc(36px *-1);
		padding-block: 36px;
		padding-inline: 36px;
		-webkit-mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 1) 36px, hsla(0, 0%, 0%, 1) calc(100% - 36px), hsla(0, 0%, 0%, 0) 100%);
		mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 1) 36px, hsla(0, 0%, 0%, 1) calc(100% - 36px), hsla(0, 0%, 0%, 0) 100%);
	}
}

@media screen and (min-width: 768px) {
	.audio-card-fixed-width {
		width: 280px;
	}

	.audio-card .audio-card-image {
		padding-block: 12px;
		padding-inline: 12px;
	}

	.audio-card .audio-card-content {
		padding-block: 0;
		padding-inline: 12px;
	}
}

.slider-swiper .slider-item.silder-large {
	width: 640px
}

/*---------------------------------------------*/
/*                Radio Player                 */
/*---------------------------------------------*/

.radio-player-image-btn {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	aspect-ratio: 1/1;
	border: 0;
	border-radius: 24px;
	background-color: hsla(0, 0%, 100%, 0.25);
	background-size: cover;
	background-position: 50%;
	box-shadow: 0 4px 40px 0 hsla(240, 100%, 0%, 0.5);
}

.marquee-current-play {
	white-space: nowrap;
  	overflow: hidden;
}

.marquee-current-play-text {
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	padding-left: 100%;
	animation: marquee 20s linear infinite;
  }

  @keyframes marquee {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
  }

@keyframes blink {
	0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.genre-middle {
	position: relative;
	bottom: 0.1rem;
}

.genre-badge-middle {
	align-self: center;
	display: inline-flex;
    align-items: center;
}

.live-badge {
	border: 1px solid red;
	color:  red;;
}

.live-badge-small {
	scale: 0.8;
}

.live-dot {
	position: relative;
	width: 12px;
	height: 12px;
	border: 1px solid red;
	border-radius: 100%;
}

.live-dot::before {
	position: absolute;
	inset: 50%;
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background: red;
	transform: translate(-50%, -50%);
	animation: blink 2s infinite steps(1);
}

.volume-wrapper {
	width: 100%;
}

.bg-gradient-primary {
	background: linear-gradient(var(--end-color), var(--start-color));
}

@media only screen and (min-width: 768px) {
	.volume-wrapper {
		width: auto;
	}

	.radio-player-image-btn {
		width: 240px;
	}
}

.custom-range[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	cursor: pointer;
	outline: none;
	border-radius: 15px;

	height: 3px;
	background: #00000000;
}

.custom-range[type="range"]::-webkit-slider-runnable-track {
	background: transparent;
}

.custom-range[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 15px;
	width: 15px;
	background-color: var(--end-color);
	border-radius: 50%;
	border: none;

	transition: .2s ease-in-out;
}

.custom-range[type="range"]::-moz-range-thumb {
	height: 15px;
	width: 15px;
	background-color: var(--end-color);
	border-radius: 50%;
	border: none;

	transition: .2s ease-in-out;
}