.cd__main {
	padding: 5px 0; 
	font: 20px/24px 'Helvetica', 'Arial', sans-serif;
	color: #eee;
}
 
/* << reset */

/* page style */
.page {
 
	margin: 0 auto;
 max-width:100%
 
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Audio Player */
.player-wrap {
	position: relative;
	margin: 0 0 1em;
	padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 4px 4px 100px rgb(255 88 179 / 90%);
    background: rgba(85, 44, 110, 0.5);
}
.player-wrap.enabled {
	padding-bottom: 4em;
}
.player-wrap .button2 {
 
	display: none;
 
}
.player-wrap .button2:hover {
  /*background-color: #444;*/
	cursor: pointer;
}
.player-wrap.enabled .button2 {
	display: block;
}
.player-wrap .info {
	/*margin-left: 10em;*/
}
.player-wrap h1 {
	padding: 1.5em 0;
}
.player-wrap .action {
	font-style: italic;
}
.player-wrap .player {
	position: absolute;
  display: none;
	left: 0;
	bottom: 0;
	padding: 0 1em 0 6em;
	width: 100%;
	height: 1em;
	background-color: #333;
	font-size: 2em;
	box-sizing: border-box;
}
.player-wrap.enabled .player {
	display: block;
}
.player-wrap .player svg {
	margin: .25em;
	width: .5em;
	height: .5em;
	fill: currentColor;
}
.player-wrap .player div {
	display: block;
	height: 1em;
}
.player-wrap audio,
.player-wrap .player .pause {
	display: none;
}
.player-wrap .playpause, .player-wrap .timer,
.player-wrap .prev, .player-wrap .next {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	height: 1em;
	line-height: 1em;
	vertical-align: top;
	text-align: center;
}
.player-wrap .playpause,
.player-wrap .prev, .player-wrap .next {
	width: 1em;
	cursor: pointer;
}
.player-wrap .playpause {
	left: 1em;
}
.player-wrap .next {
	left: auto;
	right: 0;
}
.player-wrap .playpause:hover,
.player-wrap .prev:hover, .player-wrap .next:hover {
		   border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 4px 4px 100px rgb(255 88 179 / 90%);
    background: rgba(85, 44, 110, 0.6);
}
.player-wrap .playpause, .player-wrap .play, .player-wrap .pause,
.player-wrap .prev::-moz-focus-inner,
.player-wrap .next::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.player-wrap .timer {
	left: 2em;
	width: 4em;
}
.player-wrap .timer div {
	display: inline-block;
	height: 100%;
	vertical-align: top;
	font-size: .45em;
}
.player-wrap .seek {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
.playlist-wrap {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 4px 4px 100px rgb(255 88 179 / 90%);
    background: rgba(85, 44, 110, 0.5);
}
.playlist-wrap li {
	margin: 0 0 0 3em;
	padding: .25em 0 .25em .5em;
	list-style: decimal outside;
}
.playlist-wrap li.sel {
		   border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 4px 4px 100px rgb(255 88 179 / 90%);
    background: rgba(85, 44, 110, 0.6);
}
.playlist-wrap li:hover {
	   border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 4px 4px 100px rgb(255 88 179 / 90%);
    background: rgba(85, 44, 110, 0.5);
}

/* >> input[type=range] class: seek */
input.seek[type=range] {
	box-sizing: border-box;
	background-color: transparent;
	vertical-align: top;
	font-size: 1em;
	-webkit-appearance: none;
}
input.seek[type=range]:focus {
	outline: none;
}
input.seek[type=range]::-webkit-slider-runnable-track {
	box-sizing: border-box;
	width: 98%;
	height: .17em;
	background-color: #eee;
	cursor: pointer;
	border-radius: .1em;
	transition: all .2s ease;
}
input.seek[type=range]::-webkit-slider-thumb {
	box-sizing: border-box;
	width: .17em;
	height: .7em;
	margin-top: -.27em;
	border-radius: .1em;
	background-color: #eee;
	cursor: pointer;
	-webkit-appearance: none;
}
input.seek[type=range]:focus::-webkit-slider-runnable-track {
	background-color: #eee;
}
input.seek[type=range]::-moz-range-track {
	box-sizing: border-box;
	border: 0 solid #eee;
	width: 98%;
	height: .17em;
	background-color: #eee;
	cursor: pointer;
	border-radius: .1em;
	transition: all .2s ease;
}
input.seek[type=range]::-moz-range-thumb {
	box-sizing: border-box;
	border: 0 solid #eee;
	width: .17em;
	height: .7em;
	background-color: #eee;
	cursor: pointer;
	border-radius: .1em;
}
input.seek[type=range]::-ms-track {
	box-sizing: border-box;
	border: 0 none;
	width: 98%;
	height: .17em;
	background-color: transparent;
	color: transparent;
	cursor: pointer;
	transition: all .2s ease;
}
input.seek[type=range]::-ms-fill-lower {
	background-color: #eee;
	border-radius: .1em;
}
input.seek[type=range]::-ms-fill-upper {
	background-color: #eee;
	border-radius: .1em;
}
input.seek[type=range]::-ms-thumb {
	margin-top: -.01em;
	box-sizing: border-box;
	width: .17em;
	height: .7em;
	background-color: #eee;
	cursor: pointer;
	border-radius: .1em;
}
input.seek[type=range]:focus::-ms-fill-lower {
	background-color: #eee;
}
input.seek[type=range]:focus::-ms-fill-upper {
	background-color: #eee;
}
/* << input[type=range] class: seek */
.player{
	   border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 4px 4px 100px rgb(255 88 179 / 90%) !important;
    background: rgba(85, 44, 110, 0.5) !important;
}