body {
	--persist-unit: 4rem;
	--persist-height: var(--persist-unit);
	@media (display-mode: standalone) {
		--persist-height: calc(var(--persist-unit) + 1.5rem);
	}
	@media (width >= 52.5em) {
		--persist-unit: 4.5rem;
		--persist-height: var(--persist-unit);
	}
	padding-bottom: var(--persist-unit);
	&.persist-child-present {
		-ms-overflow-style: none;
		scrollbar-width: none;
		overflow: hidden;
		&::-webkit-scrollbar {
			display: none;
		}
	}
}
.hidden {
	display: none;
}
#jpp-player-persist {
	width: 100%;
	bottom: 0;
	position: fixed;
	height: var(--persist-height);
	z-index: 20;
	background-color: white;
	border-top: 1px solid #808080;
	#jpp-main {
		display: grid;
		align-items: center;
		justify-content: center;
		align-content: center;
		grid-template-columns: var(--persist-unit) var(--persist-unit) calc(100vw - (var(--persist-unit) * 3)) var(--persist-unit);
		z-index: 40;
		background-color: white;
		border-bottom: 1px solid #808080;
	}
}
@media (width >= 52.5em) {
	#jpp-player-persist {
		--plyr-control-icon-size: 2.125rem;
		#jpp-main {
			grid-template-columns: var(--persist-unit) var(--persist-unit) 1fr var(--persist-unit);
		}
	}
}
.jpp-button-wrap {
	width: var(--persist-unit);
	height: var(--persist-unit);
	border-left: 1px solid #808080;
	button {
		width: var(--persist-unit);
		height: var(--persist-unit);
		padding: 1rem;
		outline: none;
		border: 0;
		background-color: var(--main-blue);
		svg {
			fill: white;
		}
		&#jpp-player-stop {
			padding: 0.5rem 0 0.5rem 1.25rem;
		}
	}
}
#jpp-player-controls.jpp-button-wrap {
	padding: 1rem;
	button {
		border-radius: calc(var(--persist-unit) / 2);
		width: calc(var(--persist-unit) - 2rem);
		height: calc(var(--persist-unit) - 2rem);
		padding: 0.375rem 0.75rem 0.5rem 0.5rem;
	}
}
#jpp-now-playing {
	font-weight: 500;
	padding: 0.5rem;
	display: flex;
	flex-flow: row nowrap;
	gap: 0;
	justify-content: space-between;
	:is(h3,p) {
		margin: 0;
	}
	p {
		text-transform: capitalize;
		font-size: 0.75rem;
	}
	h3 {
		font-style: italic;
		font-size: 0.9rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.playing-next {
		display: none;
		:is(p,h3) {
			color: #5b5b5b;
		}
	}
	@media (width >= 34em) {
		p {
			font-size: 0.9rem;
		}
		h3 {
			font-size: 1rem;
		}
		.playing-next {
			display: block;
		}
	}
}
#jpp-player-wrap {
	border-right: 1px solid #808080;
}
#jpp-menu-wrap {
	width: 100%;
	height: 40vh;
	position: fixed;
	bottom: -40vh;
	left: 0;
	right: 0;
	transition: bottom .2s ease-out;
	overflow-y: scroll;
	overscroll-behavior: none;
	z-index: -1;
	display: flex;
	flex-flow: column nowrap;
	border-top: 1px solid #808080;
	border-bottom: 1px solid #808080;
	background-color: white;
	box-shadow: 0 0 10px #000;
	&.jpp-menu-active,
	&.jpp-menu-active.jpp-now-play {
		bottom: var(--persist-height);
	}
	button {
		width: 100%;
		margin: 0;
		padding: 0.5em;
		background-color: var(--main-blue);
		color: white;
		outline: 0;
		transition: opacity 0.2s ease-out;
		border: 1px solid #808080;
		border-radius: 3rem;
		svg {
			fill: white;
			padding: 0.25rem 0.25rem 0.25rem 0.375rem;
		}
		&.jpp-button-active {
			background-color: var(--main-background);
			color: var(--main-blue);
			border: 1px solid var(--accent-black-2);
			border-bottom-color: transparent;
		}
	}
	#jpp-streams button.jpp-button-active {
		background-color: var(--main-red);
		color: white;
		border-bottom-color: var(--accent-black-2);
	}
}
@media (width >= 52.5em) {
	#jpp-menu-wrap {
		width: 30rem;
		right: 16px;
		left: calc(100vw - 30rem - 16px);
		border: 1px solid var(--accent-black-2);
	}
}
.menu-station-section {
	display: grid;
	grid-template-columns: calc(var(--persist-unit) * 0.8) auto;
	gap: 1rem;
	align-items: center;
	p {
		text-transform: capitalize;
	}
}

#jpp-menu {
	width: 100%;
	padding: 0.5rem 1rem;
	h1 {
		position: relative;
		&::before {
			content: "";
			border-bottom: 2px solid var(--main-blue);
			position: absolute;
			bottom: 0;
			left: 0;
			width: 50%;
			height: 1px;
		}
	}
}
#jpp-submenus {
	padding: 1rem;
	aside {
		gap: 0.5rem;
		margin: 0 auto;
		max-width: 100%;
		width: 100%;
		padding: 0;
		display: grid;
	}
}
#jpp-frame-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 15;
	iframe {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		overflow: scroll;
		height: 100%;
		width: 100%;
		z-index: 17;
	}
	#jpp-loader {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0,0,0,0.25);
		z-index: 18;
		color: white;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		&.hidden {
			display: none;
		}
		svg {
			height: var(--persist-unit);
			width: var(--persist-unit);
			animation-name: spin;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
	}
}
@keyframes spin {
	0% { transform: rotate(0deg) }
	to { transform: rotate(1turn) }
}