:root {
   --selector-line-height: 15px;
   --selector-font-size: 13px;
   --player-width: 500px;
}
#audio-player-container {
   padding-top: 50px;
}
#soundtracks-container, #audio-player-container {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

#soundtracks-container {
   margin: 40px auto 0 auto;
   width: var(--player-width);
   padding: 10px 10px 10px 10px;
   position: relative;
   background-color: white;
   border-radius: 10px;
}

#soundtracks-container > .inner {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

#soundtracks-selector {
   width: var(--player-width);
   max-height: calc((var(--selector-line-height) * 5) + 10px);
   overflow: auto;
   overflow-x: hidden;
   margin-top: 10px;
}
#soundtracks-selector li {
   position: relative;
   font-size: var(--selector-font-size);
   color: gray;
   line-height: var(--selector-line-height);
   margin: 0px 0 10px 0;
   padding-left: 15px;
   padding-right:20px;

   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   -webkit-align-content: flex-start;
   -ms-flex-line-pack: start;
   align-content: flex-start;
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
}

#soundtracks-selector li span.title {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
#soundtracks-selector li span.length {
   text-align: right;
   width: 40px;
}
#soundtracks-selector li:not(.active) {
   cursor: pointer;
}
#soundtracks-selector li.active {
   pointer-events: none;
   color: #00436A;
   background-image: url(../imgs/icon-arrow.png);
   background-size: calc(var(--selector-font-size) - 4px);
   background-repeat: no-repeat;
   background-position: center left;
}

#soundtracks-selector li::before {
   content: attr(data-idx) '.';
   margin-right: 5px;
}


#soundtrack-player {
   width: 100%;
}

#soundtracks-selector li.not-available {
   /* cursor: not-allowed !important; */
   pointer-events: none;
   color: rgba(204,204,204, 0.6);
}

audio::-internal-media-controls-download-buttion {
   display: none !important;
}
audio::-webkit-media-controls-enclosure {
   overflow: hidden !important;
}
audio::-webkit-media-controls-panel {
   width: calc(100% + 30px) !important; /* Adjust as needed */
}