.player-button {
	font-weight: 700;
}

@keyframes bga {
	50% {
		transform: scale(2)
	}
}

:root {
	--cover-size: 300px;
	--control-size: 80px;
	--max-width: 1140px;
}

main {
	position: relative;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0 auto;
	padding-top: calc(((100dvh - var(--cover-size)) / 2) - 10px);
	padding-bottom: calc(var(--control-size) + 5rem);
}

.player-artwork {
	width: var(--cover-size);
	height: var(--cover-size);
	box-shadow: none;
}

.player-cover-image {
	position: fixed;
}

.header-wrapper {
	height: var(--control-size);
	align-items: center;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.app {
	overflow: auto;
	overflow-x: hidden;
}

.app::after {
	position: fixed;
}

.container {
	width: 100%;
	max-width: var(--max-width);
}

.player {
	position: fixed;
	inset: inherit;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 0;
}

.player-wrapper {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	height: var(--control-size);
	display: flex;
	align-items: center;
}

.player-cover {
	width: 100%;
}

.container-flex {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.player::before {
	border-radius: 0;
}

.flex-1 {
	flex: 1;
}

.player-station {
	display: none !important;
}

.player-social {
	display: flex;
	flex-direction: row;
}

.player-social:not(.modal-social) {
	display: flex !important;
}

.main {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	margin-top: -150px;
}

.rk-card {
	align-items: center;
	position: relative;
	display: none;
}

.rk-card-image {
	margin-right: 1rem;
}

.rk-card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rk-card-thumbnail {
	width: 48px;
	height: 48px;
	object-fit: cover;
}

.rk-card-song {
	font-size: 1rem;
	font-weight: 700;
	color: white;
}

.rk-card-artist {
	font-size: 0.75rem;
	color: white;
}
.rk-banner {
	width: 100%;
}

.rk-current-song-info {
	padding: 0.5rem;
	border-radius: 9999px;
	background-color: var(--accent, #000);
	font-weight: 700;
	text-align: center;
	color: white;
	margin-top: 1rem;
}

.visualizer {
	position: fixed;
}

.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
}

.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.player-button-backward-step,
.player-button-forward-step,
.player-button-history {
	display: none !important;
}

.player-left .player-artwork-style {
	border-radius: 0 !important;
}

.main-logo {
	max-height: 150px;
	margin-bottom: 1rem;
	display: none;
}

@media (min-width: 762px) {
	main {
		padding-top: 20px;
	}

	.main-logo {
		display: block;
	}

	.rk-card {
		display: flex;
	}

	.header-logo-img {
		display: none !important;
	}

	.main {
		justify-content: center;
		align-items: center;
		flex-direction: row;
		margin-top: 0;
	}

	.header-wrapper {
		display: flex;
		justify-content: start !important;
		padding: 0;
		position: relative;
	}

	.header-logo {
		transform: translateX(0);
		left: 0;
	}

	.main > * + * {
		margin-top: 0 !important;
	}

	.main-content {
		flex: 1;
		margin-right: 2rem;
		margin-top: 15px;
    	margin-left: -34px;
	}

	.player-social {
		flex-direction: column;
		margin: 0 !important;
	}

	.main-artwork {
		margin-right: 2rem;
		max-width: var(--cover-size);
	}
}
@media (max-width: 991px) {
.player-cover-title  {
	overflow: hidden;
}
.player-cover-title span {
            transform: translateX(100%);
            animation: scroll-left 10s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        }
}

.footer {
	display: none;
}
.header {
    z-index: 0;
}
.player_webtv {
	width: 67.7%;
	height: 345px;
}
@media (max-width: 991px) {
.open-chat {
	display: none!important;
}
.footer {
	display: block;
}
.header {
    z-index: 50;
}
.player_webtv {
	width: 100%;
	height: 300px;
}
}