.mainContainer { /***/
	padding: 0px 0px 30px 0px; 
	font-size: 12pt; 
	text-align: left;
}
	
#mobileTimeZone { /***/
	display: block;
	padding: 10px;
	margin: 0px -15px 10px -15px;
	background-color: #f0f0f0;
	font-size: 4vw;
}

/* Container wrapping all the cards */
.song-card-grid {
	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  	gap: 1.5rem;
  	padding: 1rem;
  	justify-items: left;
}

/* Each individual card */
.song-card {
	border-radius: 10px;
  	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  	overflow: hidden;
  	transition: transform 0.3s ease, box-shadow 0.3s ease;
  	max-width: none;
  	width: 100%;
  	text-align: center;
  	padding: .5rem;
}

.song-card.h {
  	background-color: rgba(68, 135, 222, .15);
  	border: 1px solid #4487de;
}
 
.song-card.p {
	background-color: rgba(173, 148, 249, .15);
  	border: 1px solid #ad94f9;
 }
 
 .song-card.r {
 	background-color: rgba(207, 33, 128, .15);
  	border: 1px solid #cf2180;
 }

.song-card:hover {
	transform: scale(1.03);
  	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.song-title {
  	font-weight: bold;
  	font-size: 1.3rem;
  	line-height: 1.3rem;
  	margin: 0.2rem 0;
}

.song-artist {
	font-size: 1.1rem;
  	margin: 0;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 0.4rem;
}

.song-artist i {
	 color: #444;
}

.song-time {
	font-size: 0.9rem;
  	margin: 0;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 0.4rem;
}

.playlistIcons { /***/
	text-align: center;
	margin-bottom: 20px;
}

.playlistDate { /***/
	text-align: center;
	margin-bottom: 20px;
}

#selectPLdate { /***/
	font-size: 2em;
	padding-left: .5em; 
	padding-right: .5em; 
	text-align: center; 
	width: 100%;
	border-radius: 0;
}

#selectPLdate.h {
	border: 2px solid #4487de; 
}

#selectPLdate.p {
	border: 2px solid #ad94f9; 
}

#selectPLdate.r {
	border: 2px solid #cf2180; 
}

.playlistSearch { /***/
	text-align: center;
	margin-bottom: 20px;
}

#songSearch { /****/
	-webkit-appearance: none;
	border-radius: 0;
	width: 100%; 
	font-size: 2em; 
	padding-left: .5em; 
	padding-right: .5em; 
	text-align: left;
	padding-bottom: 0px;
}

#songSearch.h {
	border: 2px solid #4487de; 
}

#songSearch.p {
	border: 2px solid #ad94f9; 
}

#songSearch.r {
	border: 2px solid #cf2180; 
}

.hourHeader {
	padding: 5px 0px 5px 15px; 
	letter-spacing: 1px; 
	font-weight: bold; 
	display: inline-block; 
	width: 100%; 
	background-color: #4487de; 
	color: #ffffff; 
	font-size: 18px; 
	line-height: 26px;
}

.searchResultsHeader {
	padding: 5px 0px 5px 15px; 
	letter-spacing: 1px; 
	font-weight: bold; 
	display: inline-block; 
	width: 100%; 
	background-color: #606875; 
	color: #ffffff; 
	font-size: 18px; 
	line-height: 26px;
}

.hourHeader.h {
	background-color: #4487de;
}

.hourHeader.p {
	background-color: #ad94f9;
}

.hourHeader.r {
	background-color: #cf2180;
}

.searchSong {
	padding: 5px 15px;
}

.searchSong.h:nth-child(odd) {
	background-color: rgba(68, 135, 222, .15);
}

.searchSong.p:nth-child(odd) {
	background-color: rgba(173, 148, 249, .15);
}

.searchSong.r:nth-child(odd) {
	background-color: rgba(207, 33, 128, .15);
}

.searchH {
	padding: 5px 0px 5px 15px; 
	letter-spacing: 1px; 
	font-weight: bold; 
	display: inline-block; 
	width: 100%; 
	background-color: #4487de; 
	color: #ffffff; 
	font-size: 18px; 
	line-height: 26px;
}

.searchP {
	padding: 5px 0px 5px 15px; 
	letter-spacing: 1px; 
	font-weight: bold; 
	display: inline-block; 
	width: 100%; 
	background-color: #ad94f9; 
	color: #ffffff; 
	font-size: 18px; 
	line-height: 26px;
}

.searchR {
	padding: 5px 0px 5px 15px; 
	letter-spacing: 1px; 
	font-weight: bold; 
	display: inline-block; 
	width: 100%; 
	background-color: #cf2180; 
	color: #ffffff; 
	font-size: 18px; 
	line-height: 26px;
}

.view.active.h {
	background-color: #4487de;
	color: #e1ebf9;
	margin-bottom: 15px;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	border-radius: 25px;
	cursor: pointer;
	text-shadow: 0 0 2px #e1ebf9;
}

.view.h {
	color: #4487de;
	margin-bottom: 15px;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	border: 2px solid #4487de;
	border-radius: 25px;
	cursor: pointer;
	font-weight: bold;
	transition: all .2s;
}

.view.h:hover {
	background-color: #f7ca6c;
}

.view.active.p {
	background-color: #ad94f9;
	color: #f2edfd;
	margin-bottom: 15px;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	border-radius: 25px;
	cursor: pointer;
	text-shadow: 0 0 2px #f2edfd;
}

.view.p {
	color: #ad94f9;
	margin-bottom: 15px;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	border: 2px solid #ad94f9;
	border-radius: 25px;
	cursor: pointer;
	font-weight: bold;
	transition: all .2s;
}

.view.p:hover {
	background-color: #3f4659;
}

.view.active.r {
	background-color: #cf2180;
	color: #f8ddea;
	margin-bottom: 15px;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	border-radius: 25px;
	cursor: pointer;
	text-shadow: 0 0 2px #f8ddea;
}

.view.r {
	color: #cf2180;
	margin-bottom: 15px;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	border: 2px solid #cf2180;
	border-radius: 25px;
	cursor: pointer;
	font-weight: bold;
	transition: all .2s;
}

.view.r:hover {
	background-color: rgb(120, 200, 233);
}

#dateSelector {
	display: none;
}

#playlistContent {
	transition: all .3s;
}

#whiteShadowRight, #whiteShadowLeft {
	display: none;
}

.btnProgSched {
	text-align: center;
	flex: 100%;
    max-width: 100%;
}

.btnSearching {
	display: none;
}

.searchMobile {
	display: inline-block;
	text-align: center;
}

#viewGrid, #viewList {
	display: none;
}

#selectPLdateContainer {
	visibility: hidden;
	padding: 0px 15px;
}

.mainContainer .row {
	margin-right: 0px;
	margin-left: 0px;
}

#selectPLdate {
	visibility: visible;
	color: #000000 !important;
}

#whichDate {
	font-size: 6vw;
	line-height: 8vw;
	padding-top: 5px;
	letter-spacing: 1px;
	font-weight: bold;
}

#whichDate.h {
	background-color: #f7ca6c;
	color: #4487de;
	padding: 5px 15px 5px 15px;
	font-size: 18px;
	line-height: 26px;
}
		
#whichDate.p {
	background-color: #ad94f9;
	color: #3e4659;
	padding: 5px 15px 5px 15px;
	font-size: 18px;
	line-height: 26px;
}
		
#whichDate.r {
	background-color: rgb(120, 200, 233);
	color: #cf2180;
	padding: 5px 15px 5px 15px;
	font-size: 18px;
	line-height: 26px;
}


@-webkit-keyframes glowH {
  from {
		text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #4487de, 0 0 3px #4487de, 0 0 4px #4487de, 0 0 4px #4487de, 0 0 4px #4487de;
  }
  to {
    	text-shadow: 0 0 2px #fff, 0 0 2px #e1ebf9, 0 0 3px #e1ebf9, 0 0 3px #e1ebf9, 0 0 4px #e1ebf9, 0 0 4px #e1ebf9, 0 0 4px #e1ebf9;
  }
}

@media (min-width: 768px) {
	body:not(.force-player) {

		.btnSearching {
			display: inline-block;
		}

		.searchMobile {
			display: none;			
		}

		#whichDate {
			font-size: 18px;
			line-height: 24px;
			padding-top: 5px;
			letter-spacing: 1px;
			font-weight: bold;
			padding-left: 15px;
		}

		.view.active.h {
			padding: 5px 10px 0px 10px;
		}
		
		.containerNoTicker {
			margin-top: 150px;
		}

		.view.h {
			padding: 5px 10px 0px 10px;
		}

		.view.active.p {
			padding: 5px 10px 0px 10px;
		}
		
		.view.p {
			padding: 5px 10px 0px 10px;
		}

		.view.active.r {
			padding: 5px 10px 0px 10px;
		}

		.view.r {
			padding: 5px 10px 0px 10px;
		}
	
		.mainContainer .row {
		margin-right: -15px;
		margin-left: -15px;
	}

	.playlistIcons { /***/
		text-align: left;
		margin-bottom: 0px;
	}
	
	.btnProgSched {
		text-align: left;
	}
	
	#selectPLdateContainer {
		visibility: visible;
	}
	
	#viewGrid, #viewList {
		display: inline-block;
	}
	
	.playlistDate { /***/
		text-align: right;
		margin-bottom: 0px;
	}

	.playlistSearch { /***/
		text-align: center;
		margin-bottom: 0px;
	}
	
	.song-card {
		max-width: 300px;
		padding: .75rem;
	}
	
	.song-card-grid.list {
  		display: inline-block;
  		padding: 1rem;
  		justify-items: left;
		ustify-items: unset;
        width: 100%;
	}
	
	.song-card.list {
		max-width: unset;
		text-align: left;
		padding: 4px 0px 0px 15px;
		margin-bottom: 10px;
	}
	
	.song-card.list:last-child {
		margin-bottom: 0px;
	}
	
	.song-time.list {
		display: inline-block;
	}
	
	.song-title.list {
		display: inline-block;
	}
	
	.song-artist.list {
		display: inline-block;
	}
	
	.song-time {
  		font-size: 0.7rem;
		margin: 0.2rem 0;
	}
	
	.song-title {
		margin: 0.5rem 0;
	}
	
	.song-artist {
		margin: 0.2rem 0;
  		font-size: 0.95rem;
  	}
	
	#selectPLdate { /***/
		font-size: 2em;
		padding-left: .5em; 
		padding-right: .5em; 
		text-align: center; 
		/*border: 2px solid #4487de;*/
		/*width: auto;*/
	}
	
	#songSearch { /***/
		line-height: normal; 
	}
	
	.mainContainer { /***/
		padding: 0px 0px 30px 0px; 
		font-size: 12pt; 
		text-align: left;
	}
	
	#mobileTimeZone { /***/
		display: none;
	}
	
	#whiteShadowLeft.light, #whiteShadowRight.light {
		/*filter: drop-shadow(-1rem -5rem 1rem rgba(255, 255, 255, .25)) drop-shadow(1rem -5rem 1rem rgba(255, 255, 255, .25));*/
		filter: drop-shadow(-1rem -3rem 1rem rgba(255, 255, 255, .5)) drop-shadow(1rem -3rem 1rem rgba(255, 255, 255, .50));
	}
	
	#whiteShadowLeft {
		position: fixed;
    	background-color: rgb(65, 133, 217);
    	/* transform: translateX(-50%); */
    	right: 49%;
    	width: 585px;
    	height: 410px;
    	rotate: -3deg;
    	/* right: 0px; */
    	top: 200px;
		display: block;
	}
	
	#whiteShadowRight {
		position: fixed;
    	background-color: rgb(65, 133, 217);
    	/* transform: translateX(-50%); */
    	left: 49%;
    	width: 585px;
    	height: 410px;
    	rotate: 3deg;
    	/* right: 0px; */
    	top: 200px;
		display: block;
	}
	
	#mainContent {
		position: relative;
    	z-index: 1;
	}
	
	.dayList {		
		display: inline-block;
		margin-bottom: 5px;
		padding: 5px 10px;
		font-size: 1.5em;
		transition: all .2s;
		cursor: pointer;
		background-color: #ffffff;
	}
	
	.dayList.h {
		border: 2px solid #4487de;
		color: #4487de;
		width: 80%;
	}
	
	.dayList.p {
		border: 2px solid #ad94f9;
		color: #ad94f9;
		width: 80%;
	}
	
	.dayList.r {
		border: 2px solid #cf2180;
		color: #cf2180;
		width: 80%;
	}
	
	.dayList.h:hover {
		border: 2px solid #4487de;
		color: #ffffff;
		background-color: #4487de;
	}
	
	.dayList.p:hover {
		border: 2px solid #ad94f9;
		color: #ffffff;
		background-color: #ad94f9;
	}
	
	.dayList.r:hover {
		border: 2px solid #cf2180;
		color: #ffffff;
		background-color: #cf2180;
	}
	
	.dayList.active.h {
		background-color: #4487de;
		color: rgb(247, 202, 108);
	}
	
	.dayList.active.p {
		background-color: #ad94f9;
		color: rgb(255, 255, 255);
	}
	
	.dayList.active.r {
		background-color: #cf2180;
		color: rgb(255, 255, 255);
	}
	
	#dateSelector {
		position: sticky;
  		top: 130px;
		margin-top: -80px;
	}
	.custom-select {
  		min-width: 350px;
  		line-height: normal;
	}

	.custom-select select {
  		appearance: none;
  		width: 100%;
  		font-size: 2em;
  		line-height: normal;
  		background-color: #fff;
  		color: #000;
  		cursor: pointer;
	}
	
	.custom-select::before,
	.custom-select::after {
  		--size: 0.3rem;
  		position: absolute;
  		content: "";
  		right: 1.5rem;
  		pointer-events: none;
	}

	.custom-select::before {
  		border-left: var(--size) solid transparent;
  		border-right: var(--size) solid transparent;
  		border-bottom: var(--size) solid black;
  		top: 40%;
	}

	.custom-select::after {
  		border-left: var(--size) solid transparent;
  		border-right: var(--size) solid transparent;
  		border-top: var(--size) solid black;
  		top: 55%;
	}
	}
}