@CHARSET "UTF-8";

:root {
	--font-family-base: "Segoe UI", Tahoma, Arial, sans-serif;
	--font-family-display: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
	--font-size-base: 12px;
	--font-size-small: 11px;
	--color-page-bg: #000000;
	--color-text-muted: #666666;
	--color-brand: #3B5998;
	--color-page-surface: #08111f;
	--color-page-border: rgba(120, 164, 225, 0.18);
	--color-panel-border: rgba(255, 255, 255, 0.16);
	--color-panel: #6699CC;
	--color-panel-dark: #4477AA;
	--color-panel-dark-hover: #225588;
	--color-panel-link-hover: #99CCFF;
	--color-panel-header: linear-gradient(180deg, #78a8dd 0%, #4d79b8 100%);
	--color-panel-body: linear-gradient(180deg, rgba(112, 159, 214, 0.96) 0%, rgba(82, 128, 187, 0.96) 100%);
	--color-row-odd: #dde7f3;
	--color-row-even: #c4d4e8;
	--color-row-hover: #aec5e1;
	--color-request-accent: #1db4ff;
	--color-request-accent-dark: #0a74c7;
	--color-request-accent-border: rgba(208, 240, 255, 0.72);
	--color-footer-link: #8fc4ff;
	--color-footer-text: #8e97b9;
	--color-soft-panel: rgba(59, 89, 152, 0.14);
	--color-soft-panel-fill: rgba(59, 89, 152, 0.12);
	--color-soft-panel-border: rgba(59, 89, 152, 0.18);
	--radius-field: 8px;
	--radius-pill: 999px;
	--shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.18);
	--shadow-panel: 0 18px 34px rgba(0, 0, 0, 0.24);
	--sidebar-width: 150px;
	--content-offset: 180px;
	--content-min-width: 760px;
	--content-min-width-tablet: 720px;
	--content-min-width-mobile: 640px;
	--content-min-width-phone: 560px;
	--currently-playing-min-width: 640px;
	--coming-up-min-width: 420px;
	--search-input-min-width: 180px;
	--search-input-max-width: 280px;
	--panel-padding: 16px;
	--content-gap: 16px;
	--desktop-shared-panel-height: 212px;
	--color-heading-text: #ffffff;
	--color-table-text: #445067;
	--font-size-panel-heading: 14px;
	--font-size-panel-body: 12px;
	--font-size-panel-title: 15px;
	--font-size-panel-meta: 12px;
	--font-size-display-sm: 18px;
	--font-size-display-md: 22px;
	--sidebar-heading-padding: 10px;
	--sidebar-item-padding-x: 10px;
	--sidebar-item-padding-y: 6px;
	--sidebar-link-width: 140px;
	--table-cell-padding-x: 12px;
	--table-cell-padding-y: 10px;
	--color-panel-contrast: #ffffff;
	--color-coming-up-bg: var(--color-panel-dark);
	--color-alert-error-border: #c84343;
	--color-alert-error-bg: #ffeeee;
	--color-alert-success-border: #2f8a41;
	--color-alert-success-bg: #eeffee;
	--sidebar-block-gap: 10px;
	--panel-radius: 18px;
	--panel-radius-sm: 14px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
}

/************************************************************************
 * GLOBAL STYLES:
 * .body:
 *   background-color: Global background color
 *   color: Global text color
 *   font-*: Global font size and family
 ************************************************************************/
body {
	margin: 0px;
	/*background-image: url("../images/o.png") repeat-y center top scroll; // Uncomment and replace this with a similar image */
	background-color: var(--color-page-bg);
	color: var(--color-text-muted);
	font-size: var(--font-size-base);
	font-family: var(--font-family-base);
	line-height: 1.45;
}

* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

a { text-decoration: none; color: var(--color-brand); }
a:hover { text-decoration: none; color: var(--color-brand); }

input,
select,
textarea,
button {
	font: inherit;
}

input[type="text"],
select,
textarea {
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-field);
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.95);
	color: #1d2342;
	box-shadow: inset 0 1px 2px rgba(7, 15, 28, 0.12);
	min-height: 38px;
}

input[type="submit"],
button,
.paging-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-pill);
	padding: 7px 14px;
	background: linear-gradient(180deg, #5d91d8 0%, #3b67aa 100%);
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input[type="submit"]:hover,
button:hover,
.paging-link a:hover {
	background: linear-gradient(180deg, #6fa0e2 0%, #2d5f9f 100%);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

/*************************************************************************
 * PAGE STYLES:
 * #page:
 *   background-color: Background color of the page DIV
 *   border-*: Border on either side of the page, used with .body background-image
 *   margin-top: Blank space at the top of the page
 *   margin-left, margin-right: Aligns the page DIV in the center
 *   padding: Pads the page with the given size
 *   width: Size of the page DIV
 *
 *************************************************************************/
#page {
	background: linear-gradient(180deg, rgba(8, 17, 31, 0.98) 0%, rgba(3, 9, 18, 0.98) 100%);
	min-height: 500px;
	border: 1px solid var(--color-page-border);
	margin-top: var(--space-3);
	margin-bottom: var(--space-3);
	margin-left: auto;
	margin-right: auto;
	padding: 18px;
	width: 100%;
	max-width: 1582px;
	border-radius: 24px;
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
	overflow: hidden;
}

/************************************************************************
 * LOGO STYLES:
 * #logo
 *   width: Size of the LOGO DIV
 *   height: Height of the LOGO DIV, usually same as LOGO image height
 *   margin-bottom: Space to the elements below the logo
 *   border-bottom: Horizontal Line below Logo
 *   color: Normal text inside the Logo DIV
 *   font-size: The size of the Station Name Text
 * #logo img
 *    Align all images in the LOGO DIV vertically in the middle
 *    No borders for any images inside the LOGO DIV
 *
 ************************************************************************/
#logo {
	position: relative;
	width: 100%;
	min-height: 89px;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: var(--space-5);
	margin-right: 0px;

	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: var(--space-3);
	padding-right: 0px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--color-brand);
	font-family: var(--font-family-display);
	font-size: clamp(30px, 3.3vw, 40px);
	font-weight: bold;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

#logo > a {
	display: block;
	flex: 1 1 320px;
	min-width: 0;
}

#logo img {
	vertical-align: middle;
	border: 0px;
	display: block;
}

#requestviewer_button {
	position: static;
	z-index: 5;
	flex: 0 0 auto;
}

#requestviewer_button a,
#requestviewer_button a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(54px, 6vw, 84px);
	min-width: clamp(220px, 28vw, 360px);
	padding: clamp(12px, 1.6vw, 18px) clamp(22px, 2.8vw, 34px);
	background: linear-gradient(180deg, #35c7ff 0%, #0b8be0 52%, #075fae 100%);
	border: 2px solid rgba(223, 247, 255, 0.9);
	color: #ffffff;
	font-size: clamp(17px, 1.9vw, 24px);
	font-weight: 700;
	font-family: var(--font-family-base);
	letter-spacing: clamp(0.01em, 0.03vw, 0.04em);
	line-height: 1.25;
	text-align: center;
	white-space: normal;
	border-radius: 16px;
	box-shadow: 0 12px 26px rgba(7, 48, 92, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#requestviewer_button a:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 16px 30px rgba(7, 48, 92, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
	filter: brightness(1.03);
	color: #ffffff;
}

/************************************************************************
 * NAVIGATION STYLES:
 * #navigation:
 *   Positions the navigation menu
 *
 * #navigation dl:
 *   background: Navigation area background color
 *   width: Width of the Navigation Menu
 *
 * #navigation dl dt:
 *   border-bottom: White line below the Header Text in the menu
 *   color: Header Text Color
 *   font-size: Header Text Size
 *
 * #navigation dl dd:
 *   background-color: Background colors of items in the menu
 *   color: Menu text color
 *   font-size: Header Text Size
 *   border-bottom: White line below the Text in the menu
 *
 * #navigation dl dd a:
 * Styling on hover
 *
 *
 ************************************************************************/
#navigation,
#dedication,
#top_requests {
	float: none;
	clear: both;
	margin-top: 0px;
	margin-bottom: var(--sidebar-block-gap);
	margin-left: 0px;
	margin-right: 0px;
}

#navigation {
	--sidebar-shell-bg: var(--color-panel);
	--sidebar-item-bg: var(--color-panel-dark);
	--sidebar-item-hover-bg: var(--color-panel-dark-hover);
}

#dedication {
	--sidebar-shell-bg: darkblue;
	--sidebar-item-bg: var(--color-panel-dark);
	--sidebar-item-hover-bg: var(--color-panel);
}

#top_requests {
	--sidebar-shell-bg: var(--color-panel);
	--sidebar-item-bg: var(--color-panel-dark);
	--sidebar-item-hover-bg: var(--color-panel);
}

#navigation dl,
#dedication dl,
#top_requests dl {
	background: var(--color-panel-body);
	margin: 0px;
	padding: 0 0 10px;
	width: auto;
	border: 1px solid var(--color-panel-border);
	border-radius: var(--panel-radius-sm);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
}

#navigation dl dd,
#dedication dl dd,
#top_requests dl dd {
	background-color: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	color: white;
	margin: 0px;
}

#navigation dl dd a,
#navigation dl dd a:visited,
#dedication dl dd a,
#dedication dl dd a:visited,
#top_requests dl dd a,
#top_requests dl dd a:visited {
	background: transparent;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	background-attachment: scroll;
	color: white;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	column-gap: 8px;
	text-decoration: none;
	width: var(--sidebar-link-width);
	padding-top: var(--sidebar-item-padding-y);
	padding-left: var(--sidebar-item-padding-x);
	padding-bottom: var(--sidebar-item-padding-y);
	padding-right: 0px;
	transition: background-color 0.16s ease, padding-left 0.16s ease, color 0.16s ease;
	line-height: 1.35;
}

#navigation dl dd a:hover,
#dedication dl dd a:hover,
#top_requests dl dd a:hover {
	background-color: rgba(255, 255, 255, 0.14);
	background-repeat: no-repeat;
	background-position: 11px 10px;
	background-attachment: scroll;
	color: var(--color-panel-link-hover);
	padding-left: 14px;
}

#navigation dl dd img,
#dedication dl dd img,
#top_requests dl dd img {
	vertical-align: middle;
	border: 0px;
	flex: 0 0 auto;
}

#navigation dl dd img {
	max-width: 20px;
	max-height: 20px;
}

#navigation .menu-home-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	margin-right: 0;
	font-size: 22px;
	line-height: 1;
	vertical-align: middle;
	text-align: center;
}

#navigation dl dd.menu-home-item a,
#navigation dl dd.menu-home-item a:visited {
	min-height: 22px;
	padding-top: 4px;
	padding-bottom: 4px;
}

#navigation dl dd {
	vertical-align: middle;
	font-size: 12px;
}

#navigation dl dd a,
#navigation dl dd a:visited {
	min-height: 28px;
	padding-top: 8px;
	padding-bottom: 8px;
	line-height: 1.25;
}

/************************************************************************
 * DEDICATION STYLES:
 * #dedication:
 *   Positions the dedication menu
 *
 * #dedication dl:
 *   background: Currently Playing Small area background color
 *   width: Width of the Currently Playing Small Menu
 *
 * #dedication dl dt:
 *   border-bottom: White line below the Header Text in the menu
 *   color: Header Text Color
 *   font-size: Header Text Size
 *
 * #dedication dl dd:
 *   background-color: Background colors of items in the menu
 *   color: Menu text color
 *   font-size: Header Text Size
 *   border-bottom: White line below the Text in the menu
 *
 * #dedication dl dd a:
 * Styling on hover
 *
 *
 ************************************************************************/
#dedication dl dd {
	font-size: 12px;
	padding: 5px;
}

/************************************************************************
 * TOP REQUESTS STYLES:
 *
 *
 ************************************************************************/
#top_requests dl dd {
	font-size: 12px;
	background-repeat: repeat;
	background-position: 0px 0px;
	background-attachment: scroll;

	color: white;
	font-size: 1em;
	margin: 0px;
	padding: 0px;
}

#top_requests dl dd a,
#top_requests dl dd a:visited {
	line-height: 1.35;
}

/************************************************************************
 * PARTNER LINKS STYLES:
 *
 *
 *
 ************************************************************************/
#partner-links {
	text-align: center;
	width: auto;
	float: none;
	clear: both;
	margin-top: 0px;
	margin-bottom: var(--sidebar-block-gap);
	margin-left: 0px;
	margin-right: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

#partner-links a,
#partner-links a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

#partner-links img {
	display: block;
	border: 0px;
	border-radius: 12px;
}

#currently_playing_wrapper,
#coming-up_wrapper,
#recently_played_wrapper,
#playlist {
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: var(--content-gap);
	margin-right: 0px;
	clear: none;
}

#playing-panels {
	display: contents;
}

#currently_playing,
#coming-up,
#recently_played,
#playlist_wrapper {
	background: var(--color-panel-body);
	padding: var(--panel-padding);
	border: 1px solid var(--color-panel-border);
	border-radius: var(--panel-radius);
	box-shadow: var(--shadow-panel);
}

#currently_playing table,
#coming-up table,
#recently_played table,
#playlist table {
	background: transparent;
	border-spacing: 0px;
	width: 100%;
	border-collapse: separate;
}

#currently_playing th,
#coming-up table th,
#recently_played table th,
#playlist table th {
	padding-bottom: 10px;
}

#navigation dl dt,
#dedication dl dt,
#top_requests dl dt {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--color-heading-text);
	font-size: var(--font-size-panel-heading);
	font-weight: bold;
	margin: 0px;
	padding: var(--sidebar-heading-padding);
	background: var(--color-panel-header);
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-transform: uppercase;
}

#currently_playing thead tr,
#coming-up table thead tr,
#recently_played table thead tr,
#playlist table thead tr {
	color: var(--color-heading-text);
	font-size: var(--font-size-panel-title);
	font-weight: bold;
	background: var(--color-panel-header);
}

#playlist table thead th + th {
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	padding-left: 14px;
}

#playlist .playlist-heading-main {
	text-align: center;
}

#playlist .playlist-heading-album {
	text-align: center !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
}

#playlist .playlist-heading-links {
	text-align: center;
}

#playlist .playlist-heading-time {
	text-align: right;
}

#currently_playing tbody tr,
#recently_played table tbody tr,
#playlist table tbody tr {
	color: var(--color-table-text);
	font-size: 14px;
	font-weight: bold;
	transition: background-color 0.16s ease;
	line-height: 1.4;
}

#currently_playing tbody tr + tr,
#recently_played table tbody tr + tr,
#playlist table tbody tr + tr {
	box-shadow: inset 0 1px 0 rgba(71, 94, 131, 0.12);
}

#currently_playing td,
#currently_playing th,
#coming-up table td,
#coming-up table th,
#recently_played table td,
#recently_played table th,
#playlist table td,
#playlist table th {
	padding-left: var(--table-cell-padding-x);
	padding-right: var(--table-cell-padding-x);
}

/************************************************************************
 * CURRENTLY PLAYING STYLES:
 *
 *
 *
 ************************************************************************/

#currently_playing th.links {
	width: 90px;
}


#currently-playing-artist
{
	font-size: var(--font-size-display-sm);
}

#currently-playing-title
{
	font-size: var(--font-size-display-md);
	line-height: 1.2;
}

#currently-playing-duration
{
	font-size: var(--font-size-display-sm);
}

#currently_playing table {
	min-width: var(--currently-playing-min-width);
	table-layout: fixed;
}

#currently_playing tbody tr {
	overflow: hidden;
	min-height: 30px;
	background-color: var(--color-row-odd);
	border-spacing: 0px;
	border-collapse: collapse;
}

#currently_playing tbody tr:hover,
#recently_played table tbody tr:hover,
#playlist table tbody tr:hover {
	background-color: var(--color-row-hover);
}

#currently_playing img {
	border: 0px;
	text-align: center;
}

#cpPictureMainSong {
	display: none;
}

.media-column {
	width: 170px;
}

.time-column {
	width: 70px;
}

.song-media-cell {
	vertical-align: top;
	width: 170px;
}

.song-details-cell {
	vertical-align: top;
	line-height: 1.55;
}

.song-link-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--space-2);
}

.song-link-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.request-link,
.song-link-icons .request-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 109px;
	min-height: 37px;
	padding: 8px 16px;
	background: linear-gradient(180deg, #35c7ff 0%, #0b8be0 52%, #075fae 100%);
	border: 2px solid rgba(223, 247, 255, 0.9);
	border-radius: 999px;
	box-shadow: 0 12px 26px rgba(7, 48, 92, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background 0.16s ease;
	color: #ffffff;
	font-size: var(--font-size-panel-body);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
}

.request-link:hover,
.song-link-icons .request-link:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 16px 30px rgba(7, 48, 92, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
	filter: saturate(1.14) brightness(1.02);
}

.request-link:active,
.song-link-icons .request-link:active {
	transform: translateY(0);
	box-shadow: 0 8px 16px rgba(7, 48, 92, 0.24);
}

.request-link::after,
.song-link-icons .request-link::after {
	content: "Request";
	display: inline-block;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
}

.request-link-icon,
.song-link-icons .request-link-icon {
	display: block;
	width: 16px;
	height: 16px;
	filter: brightness(0) invert(1);
	flex: 0 0 auto;
}

.song-link-icons .songinfo-link {
	margin-left: 16px;
}

.songinfo-link-spaced {
	margin-left: 16px;
}

.songinfo-link {
	display: inline-grid !important;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: linear-gradient(180deg, #35c7ff 0%, #0b8be0 52%, #075fae 100%);
	border: 2px solid rgba(223, 247, 255, 0.9);
	box-shadow: 0 12px 26px rgba(7, 48, 92, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.songinfo-link:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 16px 30px rgba(7, 48, 92, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
	filter: saturate(1.14) brightness(1.02);
}

.songinfo-glyph {
	display: block;
	color: #ffffff;
	font-family: "Georgia", "Times New Roman", serif;
	font-size: 19px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	transform: translateY(-1px);
}

.coming-up-divider {
	width: 100%;
	border: none;
	margin: 8px 0 0;
}

/************************************************************************
 * COMING UP STYLES:
 * #coming-up:
 *   Positions the coming-up menu
 *
 * #coming-up dl:
 *   background: COMING UP area background color
 *   width: Width of the COMING UP Menu
 *
 * #coming-up dl dt:
 *   border-bottom: White line below the Header Text in the menu
 *   color: Header Text Color
 *   font-size: Header Text Size
 *
 * #coming-up dl dd:
 *   background-color: Background colors of items in the menu
 *   color: Menu text color
 *   font-size: Header Text Size
 *   border-bottom: White line below the Text in the menu
 *
 * #coming-up dl dd a:
 * Styling on hover
 *
 *
 ************************************************************************/
#coming-up table {
	min-width: var(--coming-up-min-width);
}

#coming-up table thead tr {
	color: var(--color-panel-contrast);
}

#coming-up table tbody tr {
	color: var(--color-panel-contrast);
	font-size: var(--font-size-panel-body);
	background-color: transparent;
}

#coming-up table tbody td {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding-top: 14px;
}

#coming-up table tbody tr div {
	width: auto;
	line-height: 20px;
	min-height: 38px;
	float: none;

	background-color: rgba(42, 85, 139, 0.9);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	background-attachment: scroll;

	color: var(--color-panel-contrast);

	overflow: hidden;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#coming-up table tbody tr span {
	font-size: var(--font-size-display-sm);
	line-height: 24px;
	padding-right: 5px;
}

#coming-up table tbody tr a,
#coming-up table tbody tr a:visited {
	text-decoration: none;
	font-size: var(--font-size-panel-meta);
	line-height: 1.2;
	color: var(--color-panel-contrast);
}

#coming-up table tbody tr a:hover {
	background-repeat: no-repeat;
	background-position: 11px 10px;
	background-attachment: scroll;

	color: var(--color-panel-link-hover);
}

#coming-up table tbody tr img {
	vertical-align: middle;
	border: 0px;
}

#coming-up table tbody tr span.comingIndex {
	float:left;
	margin: 3px;
}


/************************************************************************
 * RECENTLY PLAYED:
 *
 *
 *
 ************************************************************************/
#recently_played table {
	min-width: var(--content-min-width);
}

#recently_played table tbody tr {
	overflow: hidden;
	min-height: 60px;
	line-height: 1.45;
}

#recently_played table td,
#recently_played table th {
	padding-top: 3px;
}

.recently_played_odd {
	background-color: var(--color-row-odd);
	border-spacing: 0px;
	border-collapse: collapse;
}

.recently_played_even {
	background-color: var(--color-row-even);
	border-spacing: 0px;
	border-collapse: collapse;
}

#recently_played table img {
	border: 0px;
}

.rpPicture {
	display: none;
}

/************************************************************************
 * FOOTER STYLES:
 *
 *
 *
 ************************************************************************/
#footer {
	width: 100%;
	margin-top: 30px;
	padding-top: 16px;

	border-top: 1px solid rgba(255, 255, 255, 0.12);
	clear: both;
	text-align: center;
	line-height: 1.6;
	color: var(--color-footer-text);
	font-size: var(--font-size-small);
}

#footer p {
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}

#footer a,
#footer a:visited {
	color: var(--color-footer-link);
}

.error {
	border: 1px solid var(--color-alert-error-border);
	padding: 12px 14px;
	background: var(--color-alert-error-bg);
	margin: var(--space-3) 0;
	border-radius: 12px;
}

.success {
	border: 1px solid var(--color-alert-success-border);
	padding: 12px 14px;
	background: var(--color-alert-success-bg);
	margin: var(--space-3) 0;
	border-radius: 12px;
}

/************************************************************************
 * PLAYLIST:
 *
 *
 *
 ************************************************************************/

#playlist th.links,
#playlist .playlist-heading-links {
	width: 170px;
}

#playlist {
	min-width: var(--content-min-width);
	box-sizing: border-box;
}

#playlist_wrapper {
	box-sizing: border-box;
	border-radius: var(--panel-radius);
	overflow: hidden;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	background-clip: padding-box;
}

#playlist table {
	min-width: var(--content-min-width);
	border-radius: calc(var(--panel-radius) - 2px);
}

#playlist table td,
#playlist table th {
	padding-top: var(--table-cell-padding-y);
	padding-bottom: var(--table-cell-padding-y);
	vertical-align: top;
}

#playlist table td:nth-child(3),
#playlist table td:nth-child(5) {
	white-space: normal;
	word-break: break-word;
}

#playlist table td:nth-child(4) {
	white-space: nowrap;
}

#td-playlist-paging
{
	padding: 5px;
	margin: 5px;
	height: 10px;
	text-align: center;
}

#playlist table tbody tr.playlist-paging-row:hover,
#playlist table tbody tr.playlist-paging-row:hover > td,
#playlist table tbody tr.playlist-paging-row > td {
	background: transparent !important;
}

.playlist-paging {
	display: grid;
	grid-template-columns: minmax(140px, max-content) auto minmax(140px, max-content);
	align-items: center;
	justify-content: center;
	column-gap: var(--space-2);
	row-gap: var(--space-2);
	font-size: var(--font-size-panel-meta);
	font-weight: bold;
	line-height: 1.3;
}

.paging-summary {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(235, 245, 255, 0.92);
	border: 1px solid rgba(168, 201, 236, 0.9);
	color: #29496f;
	border-radius: var(--radius-pill);
}

.paging-link {
	display: flex;
	justify-content: center;
	min-width: 140px;
}

.paging-link:empty {
	visibility: hidden;
}

.playlist-paging .paging-link a {
	min-height: 42px;
	padding: 10px 18px;
	background: linear-gradient(180deg, #35c7ff 0%, #0b8be0 52%, #075fae 100%);
	border: 2px solid rgba(223, 247, 255, 0.9);
	box-shadow: 0 12px 26px rgba(7, 48, 92, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	color: #ffffff;
	font-size: var(--font-size-panel-body);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
}

.playlist-paging .paging-link a:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 16px 30px rgba(7, 48, 92, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
	filter: brightness(1.03);
}

#playlist table img {
	border: 0px;
}

#playlist table thead tr:first-child th:first-child {
	border-top-left-radius: calc(var(--panel-radius) - 2px);
}

#playlist table thead tr:first-child th:last-child {
	border-top-right-radius: calc(var(--panel-radius) - 2px);
}

#playlist table tbody tr:last-child td:first-child {
	border-bottom-left-radius: calc(var(--panel-radius) - 2px);
}

#playlist table tbody tr:last-child td:last-child {
	border-bottom-right-radius: calc(var(--panel-radius) - 2px);
}

/************************************************************************
 * SEARCH:
 *
 *
 *
 ************************************************************************/

#search {
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: var(--content-gap);
	margin-right: 0px;
	clear: none;
	background: var(--color-panel-body);
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
	min-width: var(--content-min-width);
	box-sizing: border-box;
	color: white;
	font-size: var(--font-size-panel-body);
	font-weight: bold;
	border: 1px solid var(--color-panel-border);
	border-radius: var(--panel-radius);
	box-shadow: var(--shadow-panel);
}

#search form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-left: var(--space-3);
	padding-right: var(--space-3);
	min-width: var(--content-min-width);
}


#search table {
	width: 100%;
}

#search .character-grid,
#search .character-grid tbody,
#search .character-grid tr {
	display: block;
	width: 100%;
}

#search .character-grid tr {
	display: grid;
	grid-template-columns: repeat(14, 44px);
	gap: 6px;
	box-sizing: border-box;
	justify-content: center;
}

#search .character-grid td {
	display: block;
	margin: 0;
	width: 100%;
	min-width: 0;
}

#search input[type="text"],
#search select {
	max-width: 100%;
}

#search .search-toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

#search .search-legend {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#search .search-fields {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

#search .search-actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-2);
	margin-left: var(--space-2);
}

#search .search-control {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	min-height: 38px;
}

#search .search-control span,
#search .search-artist-label {
	display: inline-block;
	white-space: nowrap;
}

#search .search-fields .search-control:first-child {
	flex: 0 1 280px;
}

#search .search-fields .search-control:first-child input[type="text"] {
	min-width: var(--search-input-min-width);
	max-width: var(--search-input-max-width);
	width: 100%;
}

#search .search-limit {
	display: inline-flex;
	align-items: center;
}

#search .search-submit {
	display: inline-flex;
	align-items: center;
}

#search .search-reset {
	display: inline-flex;
	align-items: center;
}

#search .search-submit input[type="submit"] {
	padding: 8px 28px;
	background: linear-gradient(180deg, #8fd2ff 0%, #2f7fcb 100%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
	font-weight: bold;
	min-height: 38px;
}

#search .search-submit input[type="submit"]:hover {
	background: linear-gradient(180deg, #a5ddff 0%, #236eb3 100%);
}

#search .search-reset a,
#search .search-reset a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	color: #eef6ff;
	font-weight: bold;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

#search .search-reset a:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	transform: translateY(-1px);
}

#search .search-divider {
	margin: var(--space-2) 0 var(--space-2);
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

#search .search-suggestion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 2px 0 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255, 190, 92, 0.18) 0%, rgba(255, 140, 0, 0.12) 100%);
	border: 1px solid rgba(255, 197, 115, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	color: #fff3de;
	font-size: 15px;
	line-height: 1.35;
}

#search .search-suggestion-label {
	color: #ffd29c;
	font-weight: bold;
	font-size: 16px;
}

#search .search-suggestion-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

#search .search-suggestion-select {
	min-width: 220px;
	max-width: 320px;
	height: 40px;
	padding: 0 10px;
	margin-top: -7px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(18, 27, 45, 0.7);
	color: #ffffff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	font-size: 15px;
	line-height: normal;
}

#search .search-suggestion-select option {
	color: #ffffff;
	background: #18253b;
}

#search .search-suggestion-apply,
#search .search-suggestion-apply:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 14px;
	margin-top: -7px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-weight: bold;
	font-size: 15px;
	line-height: normal;
	text-decoration: none;
}

#search .search-suggestion-apply:hover {
	background: rgba(255, 255, 255, 0.24);
	color: #fff3de;
}

#search .search-artist-label {
	margin-bottom: var(--space-1);
	font-weight: bold;
	color: #eef6ff;
}

#search .characterButton {
	width: 100%;
	padding: 7px 10px;
	background: var(--color-soft-panel);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	color: #d8ebff;
	font-weight: bold;
	min-width: 0;
	line-height: 1.2;
	min-height: 34px;
}

#search .characterButton:hover {
	text-decoration: none;
	background: rgba(255, 255, 255, 0.16);
	color: white;
	cursor: pointer;
}

#search #activeCharacter {
	color:white;
	background: rgba(255, 255, 255, 0.22);
}

@media (min-width: 901px) {
	#page {
		display: grid;
		grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
		column-gap: 20px;
		align-items: start;
	}

	#logo,
	#err_message,
	#footer {
		grid-column: 1 / -1;
	}

	#navigation,
	#top_requests,
	#partner-links,
	#dedication {
		grid-column: 1;
		float: none;
		clear: none;
		margin-left: 0;
		margin-right: 0;
		width: var(--sidebar-width);
	}

	#navigation dl,
	#top_requests dl,
	#dedication dl {
		width: var(--sidebar-width);
	}

	#navigation dl,
	#search,
	body.page-playing #currently_playing {
		height: var(--desktop-shared-panel-height);
	}

	#navigation {
		grid-row: 2;
	}

	#top_requests {
		grid-row: 3;
	}

	#partner-links {
		grid-row: 4;
	}

	#dedication {
		grid-row: 5;
	}

	#currently_playing_wrapper,
	#coming-up_wrapper,
	#recently_played_wrapper,
	#playlist,
	#search {
		grid-column: 2;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		min-width: var(--content-min-width);
		box-sizing: border-box;
	}

	#currently_playing_wrapper,
	#search {
		grid-row: 2;
	}

	#coming-up_wrapper,
	#playlist {
		grid-row: 3;
	}

	#recently_played_wrapper {
		grid-row: 4;
	}

	#playing-panels {
		grid-column: 2;
		grid-row: 2 / span 4;
		display: flex;
		flex-direction: column;
		gap: 0;
		align-self: start;
		min-width: 0;
		width: 100%;
	}

	#playing-panels > #currently_playing_wrapper,
	#playing-panels > #coming-up_wrapper,
	#playing-panels > #recently_played_wrapper {
		width: 100%;
		min-width: var(--content-min-width);
		box-sizing: border-box;
		margin-bottom: var(--content-gap);
	}

	#playing-panels > #recently_played_wrapper:last-child,
	#playing-panels > #coming-up_wrapper:last-child,
	#playing-panels > #currently_playing_wrapper:last-child {
		margin-bottom: 0;
	}

	body.page-playing #top_requests {
		margin-top: 6px;
	}

body.page-playing #currently_playing,
body.page-playing #coming-up,
body.page-playing #recently_played {
	width: 100%;
	min-width: var(--content-min-width);
	box-sizing: border-box;
}

body.page-playing #currently_playing table,
body.page-playing #coming-up table,
body.page-playing #recently_played table {
	min-width: 100%;
	width: 100%;
}

body.page-playing #coming-up {
	padding-top: 10px;
	padding-bottom: 10px;
}

body.page-playing #coming-up table tbody td {
	align-items: center;
	padding-top: 8px;
	padding-bottom: 4px;
}

body.page-playing #currently_playing {
	display: flex;
	align-items: stretch;
}

body.page-playing #currently_playing table,
body.page-playing #currently_playing tbody,
body.page-playing #currently_playing tbody tr {
	height: 100%;
}

body.page-playing #currently_playing tbody tr > td {
	background: var(--color-row-odd);
	vertical-align: top;
}

body.page-playing #currently_playing tbody tr:hover > td {
	background: var(--color-row-hover);
}

	#playlist table tbody td:nth-child(1) {
		width: 42px;
	}

	#search,
	#playlist_wrapper {
		width: 100%;
		min-width: var(--content-min-width);
		box-sizing: border-box;
	}

	#search form,
	#playlist table {
		width: 100%;
		min-width: 100%;
	}

	#playlist table tbody td:nth-child(2) {
		width: 72px;
	}

	#playlist table tbody td:nth-child(3) {
		width: 38%;
		font-size: 16px;
		line-height: 1.45;
	}

	#playlist table tbody td:nth-child(4) {
		width: 170px;
		text-align: center;
		white-space: nowrap;
	}

	#playlist table tbody td:nth-child(5) {
		width: 36%;
	}

	#playlist table tbody td:nth-child(6) {
		width: 72px;
	}

	#playlist table tbody td:nth-child(4) .request-link {
		display: inline-flex;
		margin-left: 0;
		margin-right: 0;
		vertical-align: middle;
	}

	#playlist table tbody td:nth-child(4) .songinfo-link {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		margin: 0 0 0 12px !important;
		vertical-align: middle;
	}
}

@media (min-width: 901px) and (max-width: 1280px) {
	#currently_playing_wrapper,
	#coming-up_wrapper,
	#recently_played_wrapper,
	#playlist,
	#search,
	#playing-panels > #currently_playing_wrapper,
	#playing-panels > #coming-up_wrapper,
	#playing-panels > #recently_played_wrapper,
	body.page-playing #currently_playing,
	body.page-playing #coming-up,
	body.page-playing #recently_played,
	#playlist_wrapper {
		min-width: 0;
	}

	#search form,
	#playlist table,
	body.page-playing #currently_playing table,
	body.page-playing #coming-up table,
	body.page-playing #recently_played table {
		min-width: 0;
		width: 100%;
	}

	#playlist table tbody td:nth-child(3) {
		width: 34%;
		font-size: 15px;
	}

	#playlist table tbody td:nth-child(4) {
		width: 150px;
	}

	#playlist table tbody td:nth-child(5) {
		width: 32%;
	}
}

@media (max-width: 900px) {
	body {
		font-size: 12px;
	}

	#page {
		padding: 8px;
	}

	#navigation,
	#top_requests,
	#partner-links,
	#dedication {
		float: none;
		clear: both;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	#navigation dl,
	#top_requests dl,
	#dedication dl {
		width: auto;
		min-height: 0;
	}

	#navigation dl dd a,
	#top_requests dl dd a,
	#dedication dl dd a {
		width: auto;
	}

	#currently_playing_wrapper,
	#coming-up_wrapper,
	#recently_played_wrapper,
	#playlist,
	#search {
		margin-left: 0;
		margin-right: 0;
		min-height: 0;
	}

	#playlist table {
		min-width: var(--content-min-width-tablet);
	}

	#playlist table tbody td:nth-child(1),
	#playlist table tbody td:nth-child(2),
	#playlist table tbody td:nth-child(4),
	#playlist table tbody td:nth-child(5),
	#playlist table tbody td:nth-child(6) {
		font-size: var(--font-size-panel-body);
		line-height: 1.4;
	}

	#playlist table tbody td:nth-child(3) {
		font-size: 15px;
		line-height: 1.45;
	}
  }

@media (max-width: 700px) {
	#page {
		margin-top: 6px;
		margin-bottom: 6px;
		padding: 10px;
		border-radius: 18px;
	}

	#logo {
		padding-bottom: 12px;
		font-size: 28px;
	}

	#logo > a,
	#requestviewer_button {
		flex: 1 1 100%;
	}

	#requestviewer_button a,
	#requestviewer_button a:visited {
		width: 100%;
		text-align: center;
		padding: 10px 14px;
		font-size: 17px;
	}

	#currently_playing_wrapper,
	#coming-up_wrapper,
	#recently_played_wrapper,
	#playlist,
	#search {
		overflow-x: visible;
		min-width: 0;
		width: 100%;
	}

	#currently_playing table,
	#recently_played table {
		min-width: 0;
		width: 100%;
		table-layout: auto;
	}

	#currently_playing table thead,
	#recently_played table thead {
		display: none;
	}

	#currently_playing table tbody,
	#recently_played table tbody {
		display: block;
	}

	#currently_playing table tbody tr {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"art details"
			"art time";
		column-gap: 12px;
		row-gap: 6px;
		margin-bottom: 10px;
		padding: 12px;
		border-radius: 16px;
		background: #eef4fc !important;
		box-shadow: 0 8px 18px rgba(16, 36, 64, 0.12);
	}

	#currently_playing table tbody td {
		display: block;
		padding: 0 !important;
		width: auto !important;
		border: 0 !important;
		background: transparent !important;
		text-align: left !important;
	}

	#currently_playing table tbody td.song-media-cell {
		grid-area: art;
	}

	#currently_playing table tbody td.song-details-cell {
		grid-area: details;
	}

	#currently_playing table tbody td:last-child {
		grid-area: time;
		color: #314463;
		font-size: 12px;
		font-weight: 700;
	}

	#currently_playing table tbody td:last-child::before {
		content: "Tijd: ";
		color: #20324f;
	}

	#recently_played table tbody tr {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"art title"
			"art album"
			"art links"
			"art time";
		column-gap: 12px;
		row-gap: 6px;
		margin-bottom: 10px;
		padding: 10px 12px;
		background: #eef4fc !important;
		border-radius: 16px;
		box-shadow: 0 8px 18px rgba(16, 36, 64, 0.12);
	}

	#recently_played table tbody td {
		display: block;
		padding: 0 !important;
		width: auto !important;
		border: 0 !important;
		background: transparent !important;
		text-align: left !important;
	}

	#recently_played table tbody td:nth-child(1) {
		grid-area: art;
	}

	#recently_played table tbody td:nth-child(2) {
		grid-area: title;
		font-size: 15px;
		line-height: 1.35;
		color: #20324f;
	}

	#recently_played table tbody td:nth-child(3) {
		grid-area: links;
	}

	#recently_played table tbody td:nth-child(4) {
		grid-area: album;
		font-size: 12px;
		line-height: 1.35;
		color: #314463;
	}

	#recently_played table tbody td:nth-child(4):empty {
		display: none;
	}

	#recently_played table tbody td:nth-child(4)::before {
		content: "Album: ";
		font-weight: 700;
		color: #20324f;
	}

	#recently_played table tbody td:nth-child(5) {
		grid-area: time;
		font-size: 12px;
		line-height: 1.35;
		color: #314463;
	}

	#recently_played table tbody td:nth-child(5)::before {
		content: "Tijd: ";
		font-weight: 700;
		color: #20324f;
	}

	#playlist {
		overflow-x: visible;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-y;
	}

	#playlist_wrapper {
		overflow-x: visible;
		padding-left: 12px;
		padding-right: 12px;
	}

	#playlist table {
		min-width: 0;
		width: 100%;
		table-layout: auto;
	}

	#playlist table td,
	#playlist table th {
		padding-left: 8px;
		padding-right: 8px;
	}

	#playlist table thead {
		display: none;
	}

	#playlist table td img[id^="rpPicture"] {
		width: 48px;
		height: 48px;
	}

	#playlist table tbody tr.playlist-row {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"art title"
			"art album"
			"art meta"
			"art actions";
		column-gap: 12px;
		row-gap: 6px;
		margin-bottom: 10px;
		padding: 10px 12px;
		background: #eef4fc;
		border-radius: 16px;
		box-shadow: 0 8px 18px rgba(16, 36, 64, 0.12);
	}

	#playlist table tbody tr.playlist-row td {
		display: block;
		padding: 0;
		width: auto !important;
		text-align: left !important;
		white-space: normal !important;
		background: transparent !important;
	}

	#playlist table tbody tr.playlist-row td:nth-child(1) {
		display: none;
	}

	#playlist table tbody tr.playlist-row td:nth-child(2) {
		grid-area: art;
		align-self: start;
	}

	#playlist table tbody tr.playlist-row td:nth-child(3) {
		grid-area: title;
		font-size: 15px;
		line-height: 1.35;
	}

	#playlist table tbody tr.playlist-row td:nth-child(4) {
		grid-area: actions;
		display: flex;
		align-items: center;
		gap: 10px;
		justify-content: flex-start;
	}

	#playlist table tbody tr.playlist-row td:nth-child(5) {
		grid-area: album;
		font-size: 12px;
		line-height: 1.35;
		color: #314463;
	}

	#playlist table tbody tr.playlist-row td:nth-child(5):empty {
		display: none;
	}

	#playlist table tbody tr.playlist-row td:nth-child(5)::before {
		content: "Album: ";
		font-weight: 700;
		color: #20324f;
	}

	#playlist table tbody tr.playlist-row td:nth-child(6) {
		grid-area: meta;
		display: block;
		font-size: 12px;
		line-height: 1.35;
		color: #314463;
		text-align: left !important;
	}

	#playlist table tbody tr.playlist-row td:nth-child(6)::before {
		content: "Tijd: ";
		font-weight: 700;
		color: #20324f;
	}

	.song-link-icons {
		justify-content: flex-start;
	}

	.songinfo-link {
		width: 32px;
		height: 32px;
	}

	.songinfo-glyph {
		font-size: 18px;
		transform: translateY(-0.5px);
	}

	#coming-up table tbody tr div {
		width: calc(100% - 10px);
		height: auto;
		min-height: 24px;
	}

	#coming-up table tbody td {
		grid-template-columns: 1fr;
	}

	#search form {
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
		gap: 4px;
	}

	#search .search-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}

	#search .search-fields,
	#search .search-actions {
		display: contents;
	}

	#search .search-control,
	#search .search-submit {
		display: inline-flex;
		align-items: center;
		width: auto;
	}

	#search .search-control {
		flex-wrap: nowrap;
		gap: 6px;
	}

	#search .character-grid tr {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 4px;
	}

	#search .search-fields .search-control:first-child input[type="text"] {
		min-width: 0;
		width: 160px;
	}

	#search .search-limit {
		margin-left: 0;
	}

	.playlist-paging {
		gap: 8px;
	}

	.paging-link,
	.paging-summary {
		width: 100%;
	}

	.paging-link:empty {
		display: none;
	}
}

@media (max-width: 480px) {
	#playlist table,
	#search form {
		min-width: 0;
		width: 100%;
	}

	#playlist table {
		min-width: 0;
	}

	#search .character-grid tr {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 4px;
	}

	#search form {
		gap: 4px;
	}

	#search .search-divider {
		margin: 6px 0 4px;
	}

	#search .search-suggestion {
		flex-wrap: wrap;
		gap: 6px 8px;
		padding: 8px 10px;
		font-size: 14px;
	}

	#search .search-suggestion-controls {
		width: 100%;
		margin-left: 0;
	}

	#search .search-suggestion-select {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	#search .search-artist-label {
		margin-bottom: 4px;
	}

	#search .search-fields .search-control:first-child input[type="text"] {
		width: 100%;
	}

	#search .characterButton {
		min-height: 24px;
		padding: 3px 4px;
		font-size: 10px;
	}

	#search .search-control span {
		line-height: 1;
	}

	#search .search-limit span:first-child {
		display: none;
	}

}

@media (max-width: 380px) {
	#search .character-grid tr {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	#search .search-control,
	#search .search-submit,
	#search .search-reset {
		width: 100%;
	}

	#search .search-fields .search-control:first-child,
	#search .search-limit,
	#search .search-submit {
		flex: 1 1 100%;
	}
}

@media (min-width: 701px) {
	#playlist table tbody tr.playlist-row-odd > td {
		background: var(--color-row-odd) !important;
	}

	#playlist table tbody tr.playlist-row-even > td {
		background: var(--color-row-even) !important;
	}

	#playlist table tbody tr.playlist-row-odd:hover > td,
	#playlist table tbody tr.playlist-row-even:hover > td {
		background: var(--color-row-hover) !important;
	}
}

@media (max-width: 700px) {
	#playlist table tbody tr.playlist-row > td {
		background: transparent !important;
	}

	#playlist table tbody tr.playlist-row {
		background: #eef4fc !important;
	}

	#playlist table tbody tr.playlist-row:hover {
		background: #eef4fc !important;
	}

	#playlist table tbody tr.playlist-row:hover > td {
		background: transparent !important;
	}
}