@import url("normalize.css");

body {
	font-family : 'Noto Sans', Arial, Sans-Serif;
	margin-right: 0.8rem;
}

.center {
	margin:0;
	text-indent: 0;
	text-align: center;
}

div.scroll-table { overflow: auto; }
div.scroll-table table {
	width: 100%;
	white-space: nowrap;
	margin-bottom: 0.5rem;
}

iframe { border: none;  height: 100vh; overflow-Y: auto; }
#logo { cursor: pointer; }

#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.3rem;
	color: #f0f0ff;
	background: radial-gradient(#39c,#033069);
}
#header > div:last-of-type {
	display: flex;
	flex-direction: column;
	font-size: 80%;
	text-align: center;
}
#header > div:last-of-type a {
	color: #fff;
	font-style: italic;
	text-decoration: none;
}
#meta {
	text-align: center;
}
#download-link { display: none; }
#loadPlaylist { background-color: #fff; }
nav ul {
	list-style: none;
	margin: 0.15rem 0.15rem 0.8rem;
	padding: 0;
	text-align: center;
	white-space: nowrap;
}
nav li {
	display: inline-block;
}
#menu {
	position: sticky;
	top: 0;
	overflow: auto;
	z-index: 10;
}
#menu label {
	display: block;
	margin: 0 0.1rem;
	padding: 0.3rem;
	color: #fff;
	background-color: #39c;
	border-radius: 0.5rem;
	cursor: pointer;
}

/* tab */
#main > input[name="tab"] { display: none; }
#main > input[name="tab"] + div { display: none; }
#main > input[name="tab"]:checked + div { display: block; }

thead {
	background-color: #39c;
	color: #fff;
	/* padding: 0.5rem 0; */
}
thead th { padding: 0.5rem 0; }
tbody td {
	max-width: 32rem;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

#progressBar {
	display: block;
	width: 100%;
	height: 0.5rem;
	margin: 0 auto;
}

/* online */
#radio form[name="icy"] {
	padding: 0 0.3rem;
}
form[name="icy"] div * {
	display: inline-block;
	width: 100%;
}
#sleep-wake {
	display: flex;
	justify-content: center;
}
#sleep-wake > p { margin: 0.2rem; }
#sleep-wake button { min-width: 5rem; }

#instantPlayBtn { font-size: 70%; }

/* playlist */
#playlist nav button { min-width: 5.2rem; }
#playlist table { border-collapse: collapse; }
#playlist tbody td { padding: 0.1rem; }
#playlist tbody td:first-of-type,
#playlist tbody td:nth-of-type(4) {
	text-align: right;
	padding-right: 0.5rem;
}
#stationsList td:nth-of-type(2),
#stationsList td:nth-of-type(3) {
	cursor: pointer;
}
#playlist > p:last-of-type {
	position: sticky;
	bottom: 0;
	padding: 0.3rem 0;
	width: 10rem;
	margin: 0 auto;
}
#stationsList tr:nth-of-type(2n) { background-color: #eee; }
#stationsList tr:not(.dragElem):hover {
	color: #fff;
	background-color: #888;
}
#stationsList tr.dragElem {
	background-color: blue;
	color: #fff;
}
#stationsList tr.over {
	color: #eee;
}

#menu label.active {
	color: yellow;
	font-size: 120%;
}
#radio h2,
#settings > h2 {
	display: flex;
	justify-content: space-between;
	margin: 0.2rem 0;
	padding: 0.2rem 0.3rem;
	background-color: #39C;
}
#icy {
	display: grid;
	grid-template-columns: 6.5rem auto;
}
#icy > p {
	margin: 0.1rem 0;
	padding: 0.1rem 0.3rem;
}
#icy > p:nth-of-type(2n+1) {
	font-style: italic;
	text-align: end;
}
#icy > p:nth-of-type(2n+1)::after {
	content: ':';
	padding-left: 0.3rem;
}

/* monitor */
#monitor > figure { margin: 0.2rem; }
#monitor-url { 	margin: 0.2rem; }
#monitor-audio {
	display: inline-block;
	width: 100%;
}

/* instant play */
#instant-play-form { display: flex; }
#full-url { flex-grow: 1; }
#instant-play-form label { margin-right: 0.5rem; }
#instant-play-form input[name="fullUrl"] { padding: 0 0.3rem; background-color: #ddd; }
#instantPlaySaveBtn { font-size: 75%; }

#settings fieldset > div { margin: 0; }
/* ------------- hardware -------------- */
form[name="hardware"] {
	text-align: center;
}
#vs1053 ~ fieldset.vs1053 { display: none; }
#vs1053:checked ~ fieldset.vs1053 { display: block; }
fieldset.vs1053 > div {
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	margin: 0.1rem;
	padding: 0.1rem;
	text-align: start;
}
/* ------------- Wifi ------------------ */
form[name="wifi"] fieldset > div,
form[name="wifi"] > div:first-of-type {
	display: grid;
	padding: .1rem;
	margin: 0.1rem;
	grid-gap: 0.1rem;
}
div.wifi {
	overflow-x: auto;
}
div.wifi fieldset > div {
	grid-template-columns: 6.8rem repeat(2, 1fr);
}
div.wifi input:not([type="checkbox"]) {
	width: 8rem;
}
form[name="wifi"] > div:first-of-type,
form[name="wifi"] > div:nth-of-type(3) fieldset > div {
	grid-template-columns: 6.8rem 1fr;
}
/* ------------- aside --------------------- */
#aside input.button {
	width: 25%;
}
/* ------------- Shoutcast ----------------- */
#shoutcast > div > div:first-of-type { background-color: #fff; }
#shoutcast h2 {
	padding: 0.5rem 1rem;
	background-color: #fff;
	margin: 0 0.5rem;
}
#shoutcast p { margin: 0.3rem 0; }
#shoutcast div.infos {
	display: grid;
	grid-template-columns: 4fr 6fr;
	grid-column-gap: 0.5rem;
}
#sh-title { font-size: 16pt; }
#sh-link {
	display: block;
	padding: 0.1rem 0.5rem;
	text-align: center;
}
#sh-link img { max-width: 100%; }

#sh-genrelist-0 ul { padding-left: 1.25rem; }
#sh-genrelist-0 label { cursor: pointer; }
#sh-genrelist-0 input[type="radio"] { display: none; }
#sh-genrelist-0 input[type="radio"] ~ ul { display: none; }
#sh-genrelist-0 input[type="radio"]:checked ~ ul { display: block; }
#sh-genrelist-0 input[type="radio"]:checked ~ label { color: red; cursor: pointer}

/* listing of stations */
#sh-playlist > figure {
	display: flex;
	flex-direction: column;
	margin: 0 0.5rem 0.5rem;
	padding: 0.2rem;
	background-color: #f0e5c0;
	border-radius: 0.5rem;
}
#sh-playlist > figure div.current { flex-grow: 1; }
#sh-playlist figcaption {
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 0.5rem;
	color: maroon;
}
#sh-playlist img[data-stationid] {
	max-width: 100px;
	cursor: pointer;
}
#sh-playlist .genres {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#sh-playlist .genres span {
	margin: 0.1rem 0.3rem;
	padding: 0.15rem 0.5rem;
	background-color: #d49355;
	color: #fbf6f6;
	border-radius: 0.3rem;
	cursor: pointer;
}

#sh-playlist + div.loader { display: none; }
#sh-playlist.loading + div.loader { display: block; }

/* -------------- loader ------------- */
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 12rem auto 0;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* -------------Soma FM -------------- */
#somafm {
	background-color: #000;
	text-align: center;
}
#somafm h2 {
	margin: 0;
	padding: 0.3rem 1rem;
	color: #f00;
}
#somafm-channels {
	display: flex;
	flex-wrap: wrap;
	color: #eee;
	justify-content: space-around;
}
#somafm-channels figure {
	max-width: 10rem;
	margin: 0.3rem 0.5rem;
}
#somafm-channels figcaption a {
	color: #1a9096;
	padding: 0.3rem;
	text-decoration: none;
	display: inline-block;
	/* width: 100%; */
}
#somafm-channels figcaption a:hover {
	background-color: #1a9096;
	color: #fff;
}
#somafm-channels img {
	max-width: 120px;
	cursor: pointer;
}
/* -------------- Ferarock ----------------- */
#ferarock h2 {
	text-align: center;
}
#ferarock > h2 > a {
	display: inline-block;
	background-color: #fff;
}
#ferarock-channels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}
#ferarock-channels figure {
	margin: 0.3rem;
	padding: 0.3rem;
	background-color: #fff;
}
#ferarock-channels img {
	max-width: 100%;
	max-height: 100px;
	margin: 0.3rem 0;
	cursor: pointer;
}
@media screen and (min-width: 48rem) {
	#ferarock-channels figure {
		width: 49%;
	}
}
@media screen and (min-width: 64rem) {
	#ferarock-channels figure {
		width: 32%;
	}
}
@media screen and (min-width: 92rem) {
	#ferarock-channels figure {
		width: 24%;
	}
}
/* -------------- Dirble ------------------- */
#dirble > nav > p {
	margin: 0;
}
#dirble-stations > article {
	position: relative;
}
#dirble-stations header {
	margin-right: 24px;
}

#dirble-stations ul {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
}
#dirble-stations li {
	margin: 0.3rem 0.5rem;
}
#dirble-stations img:not(.flag) { max-width: 100%; }
#dirble-stations img.flag {
	position: absolute;
	top: 0.2rem;
	right: 0.5rem;
}
#dirble-stations > article {
	display: grid;
	grid-template-columns: 1fr 2fr;
	margin: 0.3rem;
	padding: 0.3rem;
	background-color: #eee;
	border-radius: 0.6rem;
}
#dirble-stations ul.streams > li {
	display: flex;
	justify-content: space-between;
}
#dirble-stations ul.categories {
	grid-column: span 2;
	margin: 0;
	text-align: center;
}
#dirble-stations ul.categories li {
	display: inline-block;
	margin: 0.1rem;
	padding: 0.1rem 0.3rem;
	font-size: 90%;
	background-color: #48a6da;
	color: #fff;
	cursor: pointer;
}

@media screen and (min-width: 25rem) {
	form[name="icy"] > div:first-of-type {
		display: flex;
	}
	#icy-curst {
		flex-grow: 1;
	}
	form[name="icy"] > div:first-of-type > * {
		display: initial;
		width: auto;
	}
}
@media screen and (min-width: 48rem) {
	#settings form {
		margin: 0.5rem 1rem;
	}
	fieldset {
		margin: 0.5rem;
	}
	form[name="hardware"] fieldset > div,
	form[name="wifi"] fieldset > div,
	form[name="wifi"] > div:first-of-type {
		margin: 0.5rem;
	}
	#vs1053:checked ~ fieldset.vs1053 {
		grid-gap: 0.5rem;
		padding: 0.5rem;
	}
	form[name="wifi"] fieldset, form[name="wifi"] > div:first-of-type {
		padding: 0.5rem;
		grid-gap: 0.5rem;
	}
	div.wifi input:not([type="checkbox"]) {
		width: auto;
	}
	form[name="wifi"] > div:first-of-type,
	form[name="wifi"] > div:nth-of-type(3) fieldset > div {
		grid-template-columns: 8rem 1fr;
	}
	div.wifi fieldset > div {
		grid-template-columns: 8rem repeat(2, 1fr);
	}
	#dirble-stations {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	#dirble-stations > article {
		border: 1px solid #444;
		box-shadow: 5px 5px 2px #666;
	}
}

/* editing a station */
aside.modal {
	display: none;
}
aside.modal.active {
	display: initial;
}
#aside {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-color: #444e;
}
#aside > div {
	position: relative;
	width: 30rem;
	transform: translateY(-50%);
	margin: 50vh auto 0;
	padding: 1rem 0.2rem;
	border-radius: 1rem;
	background-color: #39c;
	box-shadow: 5px 5px 5px #ccc;
}
#aside h2 { color: #fff; }
#editStationForm > div:not(:first-of-type) {
	margin: 0.3rem;
	display: grid;
	grid-template-columns: 5rem auto;
}
#editStationForm > div:first-of-type {
	position: absolute;
	top: 0.5rem;
	left: 1rem;
	width: 4rem;
}
#editStationForm input[type="text"][readonly] {
	background-color: inherit;
	border: none;
	width: 3rem;
}
#editStationForm label {
	text-align: end;
	margin-right: 0.5rem;
}

/* responsive design */
@media screen and (min-width: 24rem) {
	#shoutcast > div { display: flex; }
	#shoutcast > div > div:last-of-type { flex-grow: 1; }

	#sh-playlist > figure {
		padding: 0.3rem 0.5rem;
	}
}

@media screen and (min-width: 48rem) {
	html { background-color: #444;}
	body {
		margin: 0 auto;
		background-color: #fff;
	}
	#radio, #settings {
		max-width: 48rem;
		margin: 0 auto;
	}
	#sh-playlist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		max-height: 100vh;
		overflow: auto;
	}
}

@media screen and (min-width: 64rem) {
	body {
		background-color: transparent;
	}
	#header {
		width: 48rem;
		margin: 0.3rem auto;
		border-radius: 1rem;
		padding: 0.3rem 1rem;
	}
	#menu li {
		min-width: 6rem;
	}
	#radio > div,
	#settings {
		margin: 0.3rem auto;
		padding-bottom: 0.5rem;
		background-color: #fff;
	}
	#playlist nav p:last-of-type { color: #fff; }
	#instant-play-form {
		margin: 0 0.5rem;
	}
	#sleep-wake {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	#playlist table {
		width: 64rem;
		margin: 0 auto;
		background-color: #fff;
	}
	#sh-playlist {
		grid-template-columns: repeat(3, 1fr);
	}
	#dirble > nav {
		width: 48rem;
		margin: 0 auto;
		display: flex;
	}
	#dirble-countries {
		flex-grow: 1;
	}
	#dirble-stations {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#dirble-stations > article {
		width: 23rem;
	}
	#about > div {
		display: grid;
		background-color: #fff;
		grid-template-columns: 1fr 1fr;
		margin: 0 2rem;
	}
}

@media screen and (min-width: 92rem) {
	#sh-playlist {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (min-width: 115rem) {
	#sh-playlist {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media print {
	.no-print { display: none; }
}