/* CSS Document */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.6px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2.8px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 16px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #357cb9;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2.8px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 16px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 2.8px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2b6699;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 16px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  height: 2.8px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #357cb9;
}


input[type=range]::-moz-focus-outer {
    border: 0;
}
input[type=range]::-webkit-focus-outer {
    border: 0;
}
	
#player {
	font-wight: 800;
	width: 110px;
	border: 1px 	solid #00;
	padding: 2px;
	height: 25px;
	border-radius: 15px;
	background: rgb(245,246,246);
	background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
	box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.75);
	position: absolute;
	top: 60px;
	right: 2px;
}
#msg {
	width: 340px;
	border: 1px 	solid #3C9832;
	padding: 2px;
	height: 25px;
	background-color: #CAFFDB;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	color: #000;
	font-weight: bold;
}
#vol-bar {
	width: 40px;
	float: left;
	margin-top: 10px;
}
.play-btn {
	height: 25px;
	width: 25px;
	background-image: url(play-pause.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	float: left;
	margin-right: 4px;
}
.play-btn:hover {
    background-position: left -25px;
}
.play-btn:active {
    background-position: left -50px;
}
.play-btn-disabled {
  	pointer-events: none;
	height: 25px;
	width: 25px;
	background-image: url(play-pause.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 4px;
	background-position: left -75px;
}
.pause-btn {
	height: 25px;
	width: 25px;
	background-image: url(play-pause.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 4px;
	background-position: right 0px;
}
.pause-btn:hover {
    background-position: right -25px;
}
.pause-btn:active {
    background-position: right -50px;
}
.pause-btn-disabled {
  	pointer-events: none;
	height: 25px;
	width: 25px;
	background-image: url(play-pause.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 4px;
	background-position: right -75px;
}