/*-------------------------------------------------------------------------------------*/
/*-- ---------------------------------PLAYER------------------------------------- -*/
/*-------------------------------------------------------------------------------------*/
  
#player {
	font-family:forque, daypbl, airstreamregular, dbregular, cowboy_hippie_proregular, Scratch_-webfont, INDUBITA-webfont;
	position: fixed;
	bottom: 0;
	z-index: 8000;
	text-align: center;
	/* display: none; */
	--volume-before-width: 100%;
	--seek-before-width: 0%;
}

#div-radio-and-buttons{
	position: relative;
}

#img-radio-player {
	z-index: 6000;
}

#playerHide, #playerShow {
	position: fixed;
	z-index: 8000;
	color: #fff;
}

#playerShow {
	bottom: 10%;
	display: none; 
}

#iconPlayerShow {
	font-size: 2em;
	color: #6d460e;
	z-index: 8000;
}

#playerHide, #miniPlayer, #iconPlayerShow, #mute-icon, #play-icon:hover {
	cursor: pointer;
}

#titlePlayer {
	font-family:forque, daypbl, airstreamregular, dbregular, cowboy_hippie_proregular, Scratch_-webfont, INDUBITA-webfont;
	font-size: 1.2vw;
	color: #6d460e;
	background: #ece4cd;
	border: 3px solid #6d460e;
	border-radius: 15px 15px 0px 0px;
	width: 100%;
	height: 10%;
}

@media all and (max-width: 992px) {
	#titlePlayer{
		font-size: 2vw;
	}
}

@media all and (max-width: 576px) {
	#titlePlayer{
		font-size: 3vw;
	}
}

/*-- ---------------------------------volume-slider------------------------------------- -*/

#volume-slider {
	position: absolute;	
	z-index: 8000;
	width: 39%;
	top: 38%;
	left: -10.78%;
	transform: rotate(-90deg);
}

#volume-slider::before {
    width: var(--volume-before-width);
}


/*-- ---------------------------------mute-icon------------------------------------- -*/

#mute-icon {
	position: absolute;	
	z-index: 8000;
	color: #ece4cd;
	top: 74.6%;
	left: 5%;
}

/*-- ---------------------------------play-icon------------------------------------- -*/

#play-icon {
	position: absolute;
	z-index: 8000;
	color: #12393d;
	font-size: 2em;
	top: 19%;
	left: 45.2%;
}

/*-- ---------------------------------current-time------------------------------------- -*/

#current-time{
	position: absolute;	
	z-index: 8000;
	color: #ece4cd;
	top: 40.6%;
	left: 18%;
	font-size: 1vw;
}

/*-- ---------------------------------duration------------------------------------- -*/

#duration {
	position: absolute;	
	z-index: 8000;
	color: #ece4cd;
	top: 40.6%;
	right: 16.5%;
	font-size: 1vw;
}

/*-- ---------------------------------duration & current time responsive------------------------------------- -*/

@media all and (max-width: 992px) {
	#duration, #current-time{
		font-size: 2vw;
	}
}

@media all and (max-width: 576px) {
	#duration, #current-time{
		font-size: 3vw;
	}
}

/*-- ---------------------------------seek-slider------------------------------------- -*/

#seek-slider {
	position: absolute;	
	z-index: 8000;
	/* color: #d4198d; */
	top: 55%;
	left: 16%;
	width: 69%;		
}

/*-- ---------------------------------playerHide------------------------------------- -*/

#playerHide {
	position: absolute;	
	z-index: 8000;
	color: #ece4cd;
	top: 10%;
	left: 90%;
}

/*-- ---------------------------------CUSTOM SLIDERS------------------------------------- -*/

  input[type="range"]{
	-moz-apperance:none; 
	-webkit-appearance: none;
	height: 6px; 
  }

/*-- ---------------------------------CUSTOM SLIDERS MOZ--------wait for buffer----------------------------- -*/

  input[type="range"]::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background-color: #ece4cd;
	background: linear-gradient(to right, rgba(236, 228, 205, 1) var(--buffered-width), rgba(188, 182, 164, 1) var(--buffered-width));
  }
  input[type="range"]::-moz-range-progress {
	background-color: #12393d;
	height: 6px;
  }
  input[type="range"]::-moz-focus-outer {
	border: 0;
  }
  input[type="range"]::-moz-range-thumb {
	box-sizing: content-box;
	border: 1px solid #ece4cd;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background-color: #12393d;
	cursor: pointer;
  }
  input[type="range"]:active::-moz-range-thumb {
	transform: scale(1.2);
	/* background: #12393d; */
  }

  /*-- ---------------------------------CUSTOM SLIDERS CHROME------------wait for buffer------------------------- -*/

  input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background-color: #ece4cd;
	background: linear-gradient(to right, rgba(236, 228, 205, 1) var(--buffered-width), rgba(188, 182, 164, 1) var(--buffered-width));
  }
  input[type="range"]::before {
	position: absolute;
	content: "";
	/* top: 8px; */
	left: 0;
	width: var(--seek-before-width);
	height: 6px;
	background-color: #12393d;
	cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
	position: relative;
	-webkit-appearance: none;
	box-sizing: content-box;
	border: 1px solid #ece4cd;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background-color: #12393d;
	cursor: pointer;
	margin: -5px 0 0 0;
  }
  input[type="range"]:active::-webkit-slider-thumb {
	transform: scale(1.2);
	/* background: #007db5; */
  }