/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

.elsplyr, .elsplyr div, .elsplyr span,
.elsplyr h1, .elsplyr h2, .elsplyr h3, .elsplyr h4, .elsplyr h5, .elsplyr h6, .elsplyr p, .elsplyr pre,
.elsplyr a, .elsplyr img, .elsplyr small, .elsplyr strike, .elsplyr strong, .elsplyr sub, .elsplyr sup,
.elsplyr b, .elsplyr u, .elsplyr i, .elsplyr center,
.elsplyr dl, .elsplyr dt, .elsplyr dd, .elsplyr ol, .elsplyr ul, .elsplyr li,
.elsplyr table, .elsplyr caption, .elsplyr tbody, .elsplyr tfoot, .elsplyr thead, .elsplyr tr, .elsplyr th, .elsplyr td,
.elsplyr article, .elsplyr aside, .elsplyr canvas, .elsplyr details, .elsplyr embed, 
.elsplyr figure, .elsplyr figcaption, .elsplyr footer, .elsplyr header, .elsplyr hgroup, 
.elsplyr menu, .elsplyr nav, .elsplyr output, .elsplyr ruby, .elsplyr section, .elsplyr summary,
.elsplyr time, .elsplyr mark, .elsplyr audio, .elsplyr video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
.elsplyr article, .elsplyr aside, .elsplyr details, .elsplyr figcaption, .elsplyr figure, 
.elsplyr footer, .elsplyr header, .elsplyr hgroup, .elsplyr menu, .elsplyr nav, .elsplyr section {
    display: block;
}

.elsplyr ol, .elsplyr ul {
    list-style: none;
}
.elsplyr blockquote, .elsplyr q {
    quotes: none;
}
.elsplyr blockquote:before, .elsplyr blockquote:after,
.elsplyr q:before, .elsplyr q:after {
    content: '';
    content: none;
}
.elsplyr table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
end reset
*/


/* body { */
	/* background-color: #e0ded4; */
	/* line-height: 1; */
/* } */























.elsplyr {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
    color: #222;
    font-family: 'Karla', sans-serif;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    line-height: 1.5em;
	/* overflow-y: scroll; */
}

.elsplyr *, .elsplyr *:before, .elsplyr *:after {
  -webkit-box-sizing: inherit; 
  -moz-box-sizing: inherit; 
  box-sizing: inherit;
}

/* apply this class to clear floats */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/* apply this class to stop text being selectable/highlightable */
.no-user-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently */  	
}

.elsplyr {
	background-color: rgba(248, 248, 248, 1);
	/* padding: 0.375em; */
	width: 100%;
	/* box-shadow: 0 0 7px rgba(0, 0, 0, .3); */
	margin: 1.5em 0;
	
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);
    border-radius: 3px;
	
	overflow: hidden; /* need this so that the sharp inner div corners don't peek out from the corner radius */
	
	
	
}

.elsplyr svg {
	stroke: #111;
}

.elsplyr.elsplyr-dark svg {
	stroke: #eee;
}

.elsplyr .elsplyr-cover {
	display: flex;
	justify-content: space-between;
	padding: 0.75em 1.5em;
	background-color: rgb(72,72,72);
    color: rgb(248,248,248);
}

.elsplyr .elsplyr-cover-title,
.elsplyr .elsplyr-cover .elsplyr-cover-totals {
	font-size: 0.75em;
	line-height: 2;
	letter-spacing: .5px;
}

.elsplyr .elsplyr-cover .elsplyr-cover-totals {
	white-space: nowrap;
}

.elsplyr .elsplyr-cover-title span,
.elsplyr .elsplyr-cover .elsplyr-cover-totals ul {
	font-style: normal;
	letter-spacing: .75px;
}

.elsplyr .elsplyr-cover .elsplyr-cover-totals ul {
	display: flex;
	font-size: 1em;
	line-height: 2;
	margin-bottom: 0;
}

.elsplyr .elsplyr-cover .elsplyr-cover-totals ul li {
	padding-left: 0;
	position: initial;
}

.elsplyr .elsplyr-cover .elsplyr-cover-totals ul li:before {
	width: 0;
    position: initial;
    left: 0;
    content: "";
}

.elsplyr .elsplyr-cover .elsplyr-cover-totals ul li:first-child:after {
	content:",";
	margin-right: .25em;
}

.elsplyr .elsplyr-cover-image {
	width: 100%;
	position: relative;
}

.elsplyr .elsplyr-cover-image .img-frame {
	width: 100%;
	position: relative;
}

.elsplyr .elsplyr-cover-image .img-frame .std-img {
	position: relative;
    display: block;
    height: 0;
}

.elsplyr .elsplyr-cover-image .img-frame .std-img {
	position: relative;
    display: block;
    height: 0;
}

.elsplyr .elsplyr-cover-image .img-frame .std-img img {
	position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.elsplyr .elsplyr-grouphead {
	padding: .75em 0;
}

.elsplyr.elsplyr-multi .elsplyr-grouphead {
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);
    z-index: 10;
    position: relative;
}

.elsplyr .elsplyr-head {
	position: relative;
	/* padding-top: 0.375em; */
}

.elsplyr .elsplyr-track-info {
	/* padding: 0.75em 2.625em 0.75em 0.75em; */
	padding: 0.75em 3.375em 0.75em 1.5em;
}

.elsplyr .elsplyr-track-title-wrap,
.elsplyr .elsplyr-track-artist-wrap {
	overflow: hidden;
	position: relative;
    min-height: 1.5em;
}

.elsplyr .elsplyr-track-title,
.elsplyr .elsplyr-track-title-dupe,
.elsplyr .elsplyr-track-artist,
.elsplyr .elsplyr-track-artist-dupe {
	font-size: 1.125em;
	line-height: 1.333333333333333em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.elsplyr .elsplyr-track-artist,
.elsplyr .elsplyr-track-artist-dupe {
	font-size: 1.09375em;
	line-height: 1.371428571428571em;
}

.elsplyr .elsplyr-track-title-dupe,
.elsplyr .elsplyr-playlist-item-track-title-dupe,
.elsplyr .elsplyr-track-artist-dupe,
.elsplyr .elsplyr-playlist-item-track-artist-dupe {
	visibility: hidden;
	position: absolute;
	width: 0;
	height: 0;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

.elsplyr .elsplyr-track-title-dupe.elsplyr-dupe-unhide,
.elsplyr .elsplyr-playlist-item-track-title-dupe.elsplyr-dupe-unhide,
.elsplyr .elsplyr-track-artist-dupe.elsplyr-dupe-unhide,
.elsplyr .elsplyr-playlist-item-track-artist-dupe.elsplyr-dupe-unhide {
	visibility: initial;
	position: inherit;
	width: inherit;
	height: inherit;
}

.elsplyr .elsplyr-track-title-dupe.elsplyr-dupe-fade,
.elsplyr .elsplyr-playlist-item-track-title-dupe.elsplyr-dupe-fade,
.elsplyr .elsplyr-track-artist-dupe.elsplyr-dupe-fade,
.elsplyr .elsplyr-playlist-item-track-artist-dupe.elsplyr-dupe-fade {
	opacity: 0;
}

.elsplyr .elsplyr-track-title,
.elsplyr .elsplyr-track-title-dupe {
	font-weight: bold;
}

.elsplyr .elsplyr-track-title span,
.elsplyr .elsplyr-track-title-dupe span {
	font-size: 0.7222222222222222em;
	line-height: 1em;
	padding-left: 0.0769230769230769em;
	color: #888;
	text-transform: uppercase;
}

.elsplyr .elsplyr-playlist-item-track-title span,
.elsplyr .elsplyr-playlist-item-track-title-dupe span {
	font-size: 0.7857142857142857em;
	line-height: 1em;
	color: #888;
	text-transform: uppercase;
}

.elsplyr-track-info.elsplyr-oneliner-txt-double-overflow .elsplyr-track-artist-wrap .elsplyr-track-txt-reveal-btn,
.elsplyr-playlist-item-track-info.elsplyr-oneliner-txt-double-overflow .elsplyr-playlist-item-track-artist-txt-reveal-btn {
	display: none;
}

.elsplyr-track-info.elsplyr-oneliner-txt-double-overflow .elsplyr-track-title-wrap {
	overflow: unset;
}

.elsplyr-track-info.elsplyr-oneliner-txt-double-overflow .elsplyr-track-title-wrap .elsplyr-track-txt-reveal-btn,
.elsplyr-playlist-item-track-info.elsplyr-oneliner-txt-double-overflow .elsplyr-playlist-item-track-title-txt-reveal-btn {
	top: 1em;
}

.elsplyr-playlist-item-track-title-dupe.elsplyr-txt-oneliner-overflowing,
.elsplyr-playlist-item-track-artist-dupe.elsplyr-txt-oneliner-overflowing,
.elsplyr-txt-oneliner-overflowing .elsplyr-track-title-dupe,
.elsplyr-txt-oneliner-overflowing .elsplyr-track-artist-dupe {
	/* opacity: 0; */
	/* transition: opacity 0.1s ease-in-out;	 */
	mask-image: linear-gradient(90deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%);
}

.elsplyr-playlist-item-track-title-txt-reveal-btn,
.elsplyr-playlist-item-track-artist-txt-reveal-btn,
.elsplyr-track-txt-reveal-btn {
    position: absolute;
    width: 32px;
    bottom: 0px;
    right: 0px;
    text-align: right;
	opacity: 0;
}

.elsplyr-playlist-item-track-artist-txt-reveal-btn.active {
	bottom: 2px;
}

.elsplyr-playlist-item-track-title-txt-reveal-btn {
	bottom: initial;
	top: 2px;
}

.elsplyr-playlist-item-track-title-txt-reveal-btn.active,
.elsplyr-playlist-item-track-artist-txt-reveal-btn.active,
.elsplyr-txt-oneliner-overflowing .elsplyr-track-txt-reveal-btn {
	font-family: 'DM Mono';
	opacity: 1;
	font-size: 0.8125em;
	line-height: 1.846153846153846em;
	color: #777;
	letter-spacing: .25px;
	opacity: 0.75;
	z-index: 999;
}

.elsplyr-playlist-item-track-title-txt-reveal-btn.active span,
.elsplyr-playlist-item-track-artist-txt-reveal-btn.active span,
.elsplyr-txt-oneliner-overflowing .elsplyr-track-txt-reveal-btn span {
	color: #0099ff;
}

.elsplyr-txt-oneliner-overflowing .elsplyr-track-txt-reveal-btn {
	font-size: 1em;
	line-height: 1.5em;
}

.elsplyr-track-title-wrap.elsplyr-txt-oneliner-overflowing .elsplyr-track-txt-reveal-btn {
	line-height: 1.375em;
}

.elsplyr .elsplyr-txt-oneliner.elsplyr-txt-oneliner-fade-toggle {
	opacity: 1;	
}

.elsplyr .elsplyr-txt-oneliner-assess {
	position: absolute;
	visibility: hidden;
	text-overflow: initial;
}

.elsplyr .elsplyr-txt-oneliner-animate {
	animation-name: elsplyr-txt-oneliner-scroll;
	animation-duration: 4s;
}

@keyframes elsplyr-txt-oneliner-scroll {
  /* 0%   {margin-left: 0;} */

  100% {margin-left: 0;}
}

/* .elsplyr .elsplyr-txt-oneliner-more-btn { */
	/* font-size: 0.75em; */
	/* font-weight: 700; */
	/* position: absolute; */
	/* right: 0px; */
	/* top: 0px; */
	/* height: 2em; */
	/* padding-top: 0.41666666666666666666666666666667em; */
	/* width: 1.5833333333333333333333333333333em; */
	/* line-height: 1.5833333333333333333333333333333em; */
	/* color: #555; */
/* } */


.elsplyr .elsplyr-track-contextual,
.elsplyr .elsplyr-playlist-item-contextual {
	position: absolute;
	right: 0;
	width: 0; /* TODO: JS CSS transitions (or velocity.js)... set this to 0% to start with, opening up to 100% when contextual button clicked */
	top: 0;
	height: 100%;
	-webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}

.elsplyr .elsplyr-track-contextual.active,
.elsplyr .elsplyr-playlist-item-contextual.active {
	width: 100%;
}

.elsplyr .elsplyr-track-contextual-btn,
.elsplyr .elsplyr-playlist-item-contextual-btn {
	position: absolute;
	right: 0.75em;
	top: 0px;
	height: 100%;
	width: 2.25em;
	display: flex;
    justify-content: center;
    flex-direction: column;
	text-align: center;
	cursor: pointer;
}

.elsplyr .elsplyr-playlist-item-contextual-btn {
	right: .25em;
}

.elsplyr .elsplyr-track-contextual-btn svg,
.elsplyr .elsplyr-playlist-item-contextual-btn svg {
	margin: 0 auto;
	width: 1.5em;
	stroke-width: 2;
}

.elsplyr .elsplyr-playlist-item-contextual-btn svg {
	width: .75em;
	stroke-width: 1;
}

.elsplyr .elsplyr-track-contextual-btn svg {
	width: 1.5em;
	stroke-width: 1;
}

.elsplyr .elsplyr-track-contextual-items,
.elsplyr .elsplyr-playlist-item-contextual-items {
	width: 100%;
	height: 100%;
	display: flex;
}

.elsplyr .elsplyr-track-contextual-item-a,
.elsplyr .elsplyr-track-contextual-item-b,
.elsplyr .elsplyr-track-contextual-item-c,
.elsplyr .elsplyr-playlist-item-contextual-item-a,
.elsplyr .elsplyr-playlist-item-contextual-item-b,
.elsplyr .elsplyr-playlist-item-contextual-item-c {
	width: 4.5em;
	height: 100%;
	display: flex;
    justify-content: center;
    flex-direction: column;
	text-align: center;
	background-color: blue;
}

.elsplyr .elsplyr-controls-a {
	width: 100%;
	height: 3em;
	display: flex;
	padding: 0 0.75em;
}

.elsplyr .elsplyr-controls-a1,
.elsplyr .elsplyr-controls-a3 {
	min-width: 2.25em;
	height: 3em;
	cursor: pointer;
}

.elsplyr .elsplyr-controls-a1,
.elsplyr .elsplyr-controls-a3 {
	display: flex;
    justify-content: center;
    flex-direction: column;
	text-align: center;
}

.elsplyr .elsplyr-controls-a1 svg,
.elsplyr .elsplyr-controls-a3 svg {
	margin: 0 auto;
	width: 1.5em;
	stroke-width: 2;
}

.elsplyr .elsplyr-controls-a2 { /* seek bar */
	width: 100%;
	height: 3em;
	padding: 1.40625em 0em;
    margin: 0 0.375em;
	cursor: pointer;
}

.elsplyr .elsplyr-controls-a2 svg {
	width: 100%;
	height: 0.1875em;
	stroke-width: 0.1875em;
	stroke: rgba(128,128,128,.5);
	overflow: visible;
	vertical-align: top;
}

.elsplyr .elsplyr-controls-a2 .elsplyr-seek-progress svg {
	stroke: rgba(128,128,128,.5);
}

.elsplyr.elsplyr-dark .elsplyr-controls-a2 .elsplyr-seek-progress svg {
	stroke: #eee;
}

.elsplyr .elsplyr-seek-bar,
.elsplyr .elsplyr-seek-progress {
	height: 0.1875em;		
}

.elsplyr .elsplyr-seek-bar {
	width: 100%;
	position: relative;
}

.elsplyr.elsplyr-single .elsplyr-seek {
	margin: 0 1em;
}

.elsplyr .elsplyr-seek-progress {
	width: 0%; /* set this dynamically, based on track progress */
	position: absolute;
    top: 0px;
    left: 0px;
	min-width: 1px; /* we do this because otherwise we get odd behaviour with the round stroke caps */
	transition: width .1s ease;
}

.elsplyr .elsplyr-seek-handle {
	width: 0.625em;
	height: 0.625em;
	position: absolute;
	right: -0.3125em; /*    i.e. (elsplyr-seek-handle width) / 2     */
	top: -0.21875em; /*    i.e. ( ( (elsplyr-seek-bar height) / 2 ) - ( (elsplyr-seek-handle height) / 2 )     */
	overflow: visible;
}

.elsplyr .elsplyr-controls-a2 .elsplyr-seek-handle svg {
	fill: #111;
	stroke-width: 0;
	width: 100%;
	height: 100%;
}

.elsplyr .elsplyr-controls-b {
	width: 100%;
	height: 3em;
	display: flex;
	padding: 0 0.75em;
	/* margin-bottom: 0.375em; */
}

.elsplyr .elsplyr-controls-b1,
.elsplyr .elsplyr-controls-b5 {
	min-width: 2.25em;
	height: 3em;
	/* background-color: red; */
}

.elsplyr .elsplyr-controls-b2,
.elsplyr .elsplyr-controls-b4 {
	min-width: 4.5em;
	height: 3em;
	/* background-color: blue; */
}

	
.elsplyr .elsplyr-controls-b1,
.elsplyr .elsplyr-controls-b2,
.elsplyr .elsplyr-controls-b3,
.elsplyr .elsplyr-controls-b4,
.elsplyr .elsplyr-controls-b5 {
	display: flex;
    justify-content: center;
    flex-direction: column;
	text-align: center;
	cursor: pointer;
}

.elsplyr .elsplyr-controls-b3 { /* play button */
	height: 3em;
	width: 100%;
	/* background-color: green; */
}

.elsplyr .elsplyr-controls-b1 svg,
.elsplyr .elsplyr-controls-b2 svg,
.elsplyr .elsplyr-controls-b3 svg,
.elsplyr .elsplyr-controls-b4 svg,
.elsplyr .elsplyr-controls-b5 svg {
	margin: 0 auto;
	width: 1.5em;
	stroke-width: 2;
}

.elsplyr .elsplyr-controls-b3 svg {
	width: 3em;
	stroke-width: 1;
}

.elsplyr .elsplyr-play svg .elsplyr-play-status-circle { /* circumference is (2 x 8 x pi) = 50.265482457436691815402294132472 */
	stroke: grey;
	stroke-width: .75;
	stroke-dasharray: 0;
	transition: stroke 1s linear, stroke-dasharray 0.5s linear;	
}

.elsplyr.elsplyr-dark .elsplyr-play svg .elsplyr-play-status-circle {
	stroke: rgba(128,128,128,.5);
}

.elsplyr .elsplyr-play.elsplyr-played svg .elsplyr-play-status-circle {
	stroke: green;
	stroke-dasharray: 1.6755160819145563938467431377491; /* 1/30th of the circumference */
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
	-ms-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.elsplyr .elsplyr-play.elsplyr-paused svg .elsplyr-play-status-circle {
	stroke: orange;
}

.elsplyr .elsplyr-play.elsplyr-sleep svg .elsplyr-play-status-circle {
	stroke: orange;
}

.elsplyr .elsplyr-play.elsplyr-sleep-seek svg .elsplyr-play-status-circle {
	stroke: orange;
}

.elsplyr .elsplyr-play.elsplyr-busy svg .elsplyr-play-status-circle {
	stroke: #eee;
	animation: blinker 0.5s ease-in-out infinite;
	stroke-dasharray: 0;
}

.elsplyr.elsplyr-dark .elsplyr-play.elsplyr-busy svg .elsplyr-play-status-circle {
	stroke: #ccc
}


@-webkit-keyframes spin { 
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin { 
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin { 
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}
@keyframes spin { 
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes blinker {
	50% {
	  opacity: 0;
	}
}

.elsplyr .elsplyr-playlist-btn svg {
	-webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -ms-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;	
}

.elsplyr .elsplyr-playlist-btn.active svg {
	-webkit-transform: scaleY(-1);
	-moz-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	transform: scaleY(-1);
}

.elsplyr .elsplyr-duration-a span,
.elsplyr .elsplyr-duration-b span,
.elsplyr .elsplyr-current-time-dupe span {
	font-family: 'DM Mono';
	font-size: 0.8125em;
	line-height: 1.846153846153846em;                               
}

.elsplyr .elsplyr-current-time-dupe span {
	display: none;
}

.elsplyr .elsplyr-playlist {
	overflow: hidden;
	height: 0;
	background-color: rgb(240,240,240);
}

.elsplyr .elsplyr-playlist.active {
	height: inherit;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.elsplyr .elsplyr-playlist.active.scrolling::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.elsplyr .elsplyr-playlist.active.scrolling {
	overflow-y: scroll;
    overflow-x: hidden;
    max-height: 312px;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	/* -webkit-overflow-scrolling: touch; */
}

.elsplyr .elsplyr-playlist-item {
	display: flex;
	position: relative;
	padding: 0.375em 2.625em 0.375em 0.375em;
	/* margin: 0.75em 0; */
}

.elsplyr .elsplyr-playlist-item:first-child {
	margin-top: 0.375em;
}

.elsplyr .elsplyr-playlist-item:last-child {
	/* margin-bottom: 0.375em; */
}

.elsplyr .elsplyr-playlist-item.elsplyr-track-no-preview {
	opacity: 0.3;
}

.elsplyr .elsplyr-playlist-ender {
	height: 0.375em;
}

.elsplyr .elsplyr-playlist.active .elsplyr-playlist-item {

}

.elsplyr .elsplyr-playlist-item-index,
.elsplyr .elsplyr-playlist-item-track-info,
.elsplyr .elsplyr-playlist-item-duration {
	display: flex;
    flex-direction: column;
	justify-content: center;
}

.elsplyr .elsplyr-playlist-item-index {
	/* min-width: 2.25em; */
	min-width: 2.875em;
    padding-right: 0.125em;
	height: 3em;
	text-align: center;
	position: relative;
}

.elsplyr .elsplyr-playlist-item-index-marker {
	position: absolute;
    width: 12px;
    height: 100%;
    line-height: 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	opacity: 0;
	-webkit-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

.elsplyr .elsplyr-playlist-item-index-marker svg {
	line-height: 1px;
	width: 12px;
	height: 12px;
	stroke: #333;
}

.elsplyr .elsplyr-playlist-item-track-info {
	position: relative;
	width: 100%;
	/* height: 3em; */
	overflow: hidden;
	margin-right: 0.5em;
}

.elsplyr .elsplyr-playlist-item-track-title,
.elsplyr .elsplyr-playlist-item-track-title-dupe,
.elsplyr .elsplyr-playlist-item-track-artist,
.elsplyr .elsplyr-playlist-item-track-artist-dupe {
	font-size: 0.875em;
	line-height: 1.428571428571429em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.elsplyr .elsplyr-playlist-item-track-title,
.elsplyr .elsplyr-playlist-item-track-title-dupe {
	font-weight: bold;
}

.elsplyr .elsplyr-playlist-item-duration {
	min-width: 2.25em;
	text-align: right;
	
}

.elsplyr .elsplyr-playlist-item-index span,
.elsplyr .elsplyr-playlist-item-duration span {
	font-family: 'DM Mono';
	font-size: 0.75em;
	line-height: 1.333333333333333em;
}

.elsplyr .elsplyr-playlist-item {
	/* -webkit-transition: background-color 500ms ease-in-out; */
    /* -ms-transition: background-color 500ms ease-in-out; */
    /* transition: background-color 500ms ease-in-out; */
	cursor: pointer;
}

/* .elsplyr .amplitude-active-song-container { */
	/* background-color: rgb(248,248,248);   */
/* } */

.elsplyr .elsplyr-playlist-item.marker .elsplyr-playlist-item-index-marker {
	opacity: 1;
}




#elsplyr-text-reveal-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0,0,0,0.1); */
  z-index: 9999;
  pointer-events: auto;
}

#elsplyr-text-reveal-modal .elsplyr-text-reveal-modal-wrap {
  background: white;
  padding: 30px 20px 20px;
  border-radius: 8px;
  width: 300px; /* Fixed width for predictability */
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  position: fixed; /* Use fixed positioning */
  pointer-events: auto;
}



#elsplyr-text-reveal-modal button {
	position: absolute;
	top: 10px;
	right: 15px;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
}

#elsplyr-text-reveal-modal #elsplyr-text-reveal-modal-content {
	font-size: 0.875em;
	color: #222;
}

#elsplyr-text-reveal-modal .elsplyr-text-reveal-modal-content-title {
	font-weight: bold;
}

#elsplyr-text-reveal-modal .elsplyr-text-reveal-modal-content-title span {
	font-size: 0.8571428571428571em;
	text-transform: uppercase;
	color: #777;
}

/* Arrow pointing up (modal below button) */
#elsplyr-text-reveal-modal .elsplyr-text-reveal-modal-wrap::before {
  content: '';
  position: absolute;
  top: -8px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

/* Arrow pointing down (modal above button) */
#elsplyr-text-reveal-modal .elsplyr-text-reveal-modal-wrap.modal-above::before {
  top: auto;
  bottom: -8px;
  border-bottom: none;
  border-top: 8px solid white;
}





/* ELSPLYR OverlayScrollbars style overrides */

.os-theme-dark > .os-scrollbar-vertical,
.os-theme-light > .os-scrollbar-vertical {
    width: 7px !important;
}

.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.os-theme-light > .os-scrollbar > .os-scrollbar-track {
    border-radius: 7px !important;
}

.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(0, 0, 0, 0.2) !important;
}

.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(255, 255, 255, 0.2) !important;
}