input[type='range'] {
}

input[type='range']:focus {
  outline: none;
}
/* Primero quitamos el estilo por defecto que tiene el input */
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
/* Estilo del thumb para webkit */
input[type=range]::-webkit-slider-thumb {
	background-color: var(--palettes-optional-6);
	width: 10px;
	height: 10px;
	border: 1px solid black;
	border-radius: 100%;
	margin: -3px;
}
/* Estilo del thumb para moz */
input[type=range]::-moz-range-thumb {
	background-color: var(--palettes-optional-6);
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 100%;
  margin: -3px;
}
/* Estilo para el thum para ms */
input[type=range]::-ms-thumb {
  background-color: var(--palettes-optional-6);
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 100%;
  margin: -3px;
}
/* El estilo del track para webkit */
input[type=range]::-webkit-slider-runnable-track {
  background-color: var(--palettes-optional-1);
  height: 4px;
  border-radius:2px;
  margin:0px 7px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}
/* Estilo de track para mox */
input[type=range]::-moz-range-track {
  background-color: var(--palettes-optional-3);
  height: 3px;
}
/* Estilo del track para ms */
input[type=range]::-ms-track {
  background-color: var(--palettes-optional-3);
  height: 3px;
}

input[type=range]::-ms-fill-lower {
  background-color:var(--palettes-optional-3);
}

input[type=range]::-ms-fill-upper {
  background-color: var(--palettes-optional-3);
}

.music-player {
  z-index: 1;
  width: 140px;
  height: 220px;
  position: fixed;
  left: calc(50% + 510px);
  display:block;
  background-color: var(--palettes-optional-6);
  border-radius: 15px;
  top: 40px;
  border: 1px solid black;
  box-shadow: 1px 0px 0px var(--palettes-optional-6), 0px 1px 0px var(--palettes-optional-6), 
  -1px 0px 0px var(--palettes-optional-6), 0px -1px 0px var(--palettes-optional-6), 0px 0px 6px rgba(0,0,0,0.2) ;
  line-height: normal;
  
}
.ply_thumb {
  width: 120px;
  height: 120px;
  border-radius: 15px;
  overflow: hidden;
  margin: 0px 10px;
  pointer-events: none;
  box-shadow: 0px 0px 3px inset rgba(0,0,0,0.2);
}
.ply_thumb img {
  transform: scale(1.5);
}
.ply_thumb iframe {
width: 660px;
  height: 400px;
transform: translate(-264px,-135px) scale(0.5);
}
.ply_text {
  font-size:11px;
  font-family: chosungu;
  font-weight: bold;
  text-align: center;
  padding: 3px;
  display:none;
}
.ply_text2 {
  font-size:12px;
  font-family: chosungu;
  font-weight: bold;
  text-align: center;
  padding: 3px;
}
.text_p:before {
  content:'현재 재생 중…';
}
.text_s:before {
  content:'PAUSE';
}
.music_ctl {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0px 10px;
  height:24px;
}