body {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Full height of the viewport */
}

main {
	flex: 1; /* Take up the available space */
}

/* Default logo styling */
.logo {
	max-width: 100%; /* Ensures it scales down naturally */
	height: auto;
}

/* For mobile screens (max-width 576px in Bootstrap) */
@media (max-width: 576px) {
	.logo {
		max-width: 270px; /* Shrinks the logo for mobile */
	}
}

nav
{

}

.nav-link
{
	font-weight: 600;
	font-size:1rem;
	margin-right:2rem;
}

.nav-link:last-child
{
  margin-right:0 !important;
}

.nav-link:hover
{
	color: #e448b1;
}

#dashboardNav ul li a, #restartNav ul li a
{
	color: #000000;
	text-decoration: none;
}

#dashboardNav ul li i, #restartNav ul li i
{
	margin-right:20px;
}

form .form-control
{
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #f5f5f5; /* No border */
	padding: 0.75rem 1rem; /* Larger padding */
	font-size: 1.2rem; /* Slightly larger font size */
	border-radius: 0.25rem; /* Optional: Rounded corners */
}

/* Remove focus box-shadow and slightly darker background when focused */
form .form-control:focus
{
	box-shadow: none; /* Remove focus shadow */
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #000000; /* No border */
}

.input-group-text {
	background-color: #f5f5f5; /* Match input background */
	border: 2px solid #f5f5f5; /* Remove border */
}

.onAir
{
	border:2px solid #ff0000;
	color:#ff0000;
	padding:6px 12px 6px 12px !important;
}

.green
{
	color: #5bb100;
}

.red
{
	color: #dc3645;
}

.btn-dark:hover
{
	background-color: #f700b3;
	border: 1px solid #f700b3;
}

.btn-pink
{
	background-color: #f700b3;
	border: 1px solid #f700b3;
	color: #ffffff;
}

.btn-pink:hover
{
	background-color: #000000;
	border: 1px solid #000000;
	color: #ffffff;
}

.btn-pink-always
{
	background-color: #f700b3;
	border: 1px solid #f700b3;
	color: #ffffff;
}

.btn-pink-always:hover
{
	background-color: #f700b3;
	border: 1px solid #f700b3;
	color: #ffffff;
}

.btn-success
{
	background-color: #5cb300;
	border: 1px solid #5cb300;
}

.btn-success:hover
{
	background-color: #4e9900;
	border: 1px solid #4e9900;
}

.episodeLink:hover
{
	text-decoration: underline !important;
}

.faLink
{
	color: #000000;
}

.nowPlaying
{
	border:1px solid #ffffff !important;
	font-size:12px !important;
}

#topPanel
{
	color: #ffffff;
	background-color: #000000;
	background-image: url('/images/5137894.webp');
	background-position: bottom; /* Center the background image */
	background-repeat: no-repeat; /* Prevent the background from repeating */
	background-size: cover; /* Ensure the background covers the entire div */
	position: relative; /* Necessary for child absolute positioning */
}

#blackPanel
{
	background-color: #000000;
	background-image: url('/images/5137894.webp');
}

#blackPanel a
{
	color: #ffffff;
	text-decoration: none;
}

#pinkPanel
{
	background-color: #fe00b9;
	background: linear-gradient(to bottom,  #fe00b9, #fee12b);
}

@media (min-width: 768px)
{
	#pinkPanel
	{
		background: linear-gradient(to bottom, #ff62b7, #fe00b9);
	}
}

#pinkYellowPanel
{
	background-color: #fe00b9;
	background: linear-gradient(to bottom,  #fe00b9, #fee12b);
}

#introPanel
{
	background: linear-gradient(to bottom,  #fe00b9, #fee12b);
	height: 600px;
}

@media (min-width: 768px)
{
	#introPanel
	{
		// background: linear-gradient(to bottom, #fee12b, #ffffff); /* Stronger contrast with a lighter yellow */
	}
}


#whitePanel
{
	background-color: rgba(255, 255, 255, 0.75);
	margin: 0 10px 0 10px;
}

.pinkGradient
{
	background-color: #fe00b9;
	background: linear-gradient(to bottom, #ff62b7, #fe00b9);
}

#optionsPanel
{
	background: linear-gradient(to bottom, #ff62b7, #fe00b9);
	color: #ffffff;
}

#currentlyPlaying
{

}

.livePlayer {
	display: flex; /* Use flexbox layout */
	width: 100%; /* Full width of the viewport */
	height:100px;
	background-color: #ffffff;

	align-items: center;          /* Vertically center */


}

.livePlayerLeft {
	width: 100px; /* Fixed width */
}

.livePlayerRight {
	flex-grow: 1; /* Allow this div to fill the remaining space */
	display: flex; /* Make it a flex container */
}

:root {
  --plyr-color-main: #f700b3;
  --plyr-controls: 100%;
}

.plyr
{
	width:100%;
}

.miniPlayer, .episodePlayer
{
	background-color: #f1f3f4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:20px 20px 20px 20px;
}

.episodePlayer
{
	background-color: #ffffff;
}

.miniPlayer h3, .episodePlayer h3
{
	font-size:1.4rem;
	margin:0 0 5px 0;
}

.miniPlayer h3 a,  .episodePlayer h3 a
{
	color:#000000;
	text-decoration: none;
}

.miniPlayer h3 a:hover, .episodePlayer h3 a:hover
{
	color:#e448b1
}

.miniPlayer p, .episodePlayer p
{
	font-size:1rem;
	margin:0 0 0 0;
}

.miniPlayer p.date, .episodePlayer p.date
{
	font-size:.75rem;
	color:#999999;
	margin:0 0 0 0;
}

.miniPlayer, .episodePlayer
{
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

.moreLink, .popoutLink
{
	color:#000000 !important;
	text-decoration:none;
}

.moreLink:hover, .popoutLink:hover
{
	color:#e448b1 !important;
}

.pagination .page-item.active .page-link {
	background-color: black; /* Black background for active page */
	color: white;            /* White text for active page */
	border: 1px solid #000000;            /* Remove the border */
	// outline: none;           /* Remove the outline */
}

.pagination .page-item .page-link {
	background-color: white; /* White background for inactive pages */
	color: black;            /* Black text for inactive pages */
	border: 1px solid #dee2e6; /* Optional: Set a light border for inactive pages */
}

.pagination .page-item:hover .page-link {
	background-color: #f8f9fa; /* Optional: Hover effect to highlight inactive pages */
}

.pagination .page-item.active .page-link:hover {
	background-color: #444; /* Optional: Hover effect for active page */
}

#linksPanel {
	color: #ffffff;
	background-color: #333333;
	/* background-image: url('/images/studio.png'); */
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#linksPanel ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#linksPanel a
{
	color:#ffffff;
	text-decoration:none
}

#linksPanel a:hover
{
	color:#cccccc;
}

#socialPanel {
	color: #ffffff;
	background-color: #0e0704;
	/* background-image: url('/images/studio.png'); */
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#socialIcons
{
	text-align:center !important;
}

#socialIcons a
{
  font-size:2em;
  margin-right:.3em;
  color:#cccccc;
}

#socialIcons a:last-child
{
  margin-right:0 !important;
}

#socialIcons a:hover
{
  color: #ffffff;
}

.footer
{
	background-color: #0e0704;
	color:#ffffff;
}

.footer p
{
	font-size: 0.9em;
}

.footer a
{
	color:#ffffff;
	text-decoration: none;
}

.copyright
{
	font-size: 0.7em !important;
}

/* Extra small devices (portrait phones, less than 576px) */
/* No media query needed for `xs`, as it's the default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px)
{

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px)
{

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	#topPanel
	{
		padding:6rem 0 0 0;
	}

	#homePanel2
	{
		padding:4rem 0 4rem 0;
	}

	#homePanel3
	{
		padding:4rem 0 5rem 0;
	}

}