/* WIUX
 * stream.css - stream info and player
 */

.controls
{
	align-items: center;
	display: flex;
	justify-content: center;
}

.mute
{
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	height: 15px;
	margin: 10px;
	width: 15px;
}

.mute.muted   { background-image: url("/.link-files.wiux.net/images/unmute.png"); }
.mute.unmuted { background-image: url("/.link-files.wiux.net/images/mute.png"); }

.playpause
{
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	height: 30px;
	margin: 10px;
	width: 30px;
}

.playpause.paused  { background-image: url("/.link-files.wiux.net/images/play.png"); }
.playpause.playing { background-image: url("/.link-files.wiux.net/images/pause.png"); }

.stream-info .info
{
	font-size: 0.8rem;
	margin: auto;
	max-width: 300px;
	text-align: center;
	text-transform: uppercase;
}

.stream-info .info div
{
	margin: 0;
}

.stream-info .info .title
{
	font-size: 1.25rem;
	text-transform: none;
}

.volume
{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	cursor: pointer;
	margin: 10px;
	transition: opacity 0.2s;
	width: 95px;
}

.volume:hover
{
	opacity: 0.7;
}

.volume::-moz-range-thumb
{
	-moz-appearance: none;
	appearance: none;
	background-color: #FFFFFF;
	border: solid 2px #000000;
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.volume::-moz-range-track
{
	-moz-appearance: none;
	appearance: none;
	background-color: #000000;
	height: 2px;
}

.volume::-webkit-slider-runnable-track
{
	-webkit-appearance: none;
	appearance: none;
	background-color: #000000;
	height: 2px;
}

.volume::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;
	background-color: #FFFFFF;
	border: solid 2px #000000;
	border-radius: 50%;
	margin-top: -6.5px;
	height: 15px;
	width: 15px;
}