/****   Styl1ng for the Music Player Controls   *****/


#audio-player-container {
    --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
    position: relative;
    margin: 0 0 auto 0;
    width: 98%;
    max-width: 380px;
    height: 168px;
    background: transparent;
}

    #audio-player-container::before {
        position: absolute;
        content: '';
        width: 370px;
        height: calc(100%);
        /* background: linear-gradient(to left, #007db5, #ff8a00); */
        z-index: -1;
    }

    #play-icon {
        margin: 20px 2.5% 10px 2.5%;
    }
/*
    path {
        stroke: red;     #007db5;
    }
*/
.time {
    display: inline-block;
    width: 37px;
    *text-align: center;
    font-size: 15px;
    margin: 28.5px 0 18.5px 0;
    float: left;
}

output {
    /* display: inline-block; */
    width: 32px;
    /* text-align: center; */
    font-size: 15px;
    /* margin: 10px 2.5% 0 5%; */
    float: left;
    clear: left;
}

    #volume-slider {
        margin: 10px 2.5%;
        width: 80%;
        background: none;
    }
        /*
    #volume-slider::-webkit-slider-runnable-track {
        background: rgba(0, 125, 181, 0.6);
    }

    #volume-slider::-moz-range-track {
        background: rgba(0, 125, 181, 0.6);
    }

    #volume-slider::-ms-fill-upper {
        background: rgba(0, 125, 181, 0.6);
    }
*/
    #volume-slider::before {
        width: var(--volume-before-width);
    }

    #mute-icon {
        margin: 0 0;
    }

    input[type="range"] {
        position: relative;
        -webkit-appearance: none;
        width: 30%;
        margin: 0;
        padding: 0;
        height: 19px;
        margin: 15px 2.5% 10px 2.5%;
        float: left;
        outline: none;
        background: none;
    }
        /*
    input[type="range"]::-webkit-slider-runnable-track {
        width: 100%;
        height: 5px;
        cursor: pointer;
        background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
    }

    input[type="range"]::before {
        position: absolute;
        content: "";
        top: 8px;
        left: 0;
        width: var(--seek-before-width);
        height: 3px;
        background-color: #007db5;
        cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
        position: relative;
        -webkit-appearance: none;
        box-sizing: content-box;
        border: 1px solid #007db5;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        margin: -3px 0 0 0;
    }

    input[type="range"]:active::-webkit-slider-thumb {
        transform: scale(1.2);
        background: #007db5;
    }
*/
    input[type="range"]::-moz-range-track {
        width: 100%;
        height: 3px;
        cursor: pointer;
        background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
    }

    input[type="range"]::-moz-range-progress {
        background-color: #007db5;
    }

    input[type="range"]::-moz-focus-outer {
        border: 0;
    }

    input[type="range"]::-moz-range-thumb {
        box-sizing: content-box;
        border: 1px solid #007db5;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
    }

    input[type="range"]:active::-moz-range-thumb {
        transform: scale(1.2);
        background: #007db5;
    }

    input[type="range"]::-ms-track {
        width: 100%;
        height: 3px;
        cursor: pointer;
        background: transparent;
        border: solid transparent;
        color: transparent;
    }

    input[type="range"]::-ms-fill-lower {
        background-color: #007db5;
    }

    input[type="range"]::-ms-fill-upper {
        background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
    }

    input[type="range"]::-ms-thumb {
        box-sizing: content-box;
        border: 1px solid #007db5;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
    }

    input[type="range"]:active::-ms-thumb {
        transform: scale(1.2);
        background: #007db5;
    }

    a, a:hover {
        color: #000000;
        text-decoration: none;
    }

    .no-audio {
        display: none;
    }

    div#extraControls {
    }

/****   End Styl1ng for the Music Player Controls   *****/


/****   Styl1ng for the Music Player Playlist   *****/

    #plUL {
        list-style: none;
        height:90px;
        margin: 0;
        padding: 10px 0;
    }

    #plUL li {
        cursor: pointer;
        line-height: 1.45em;
        *border: 1px solid black;
        *border-radius: 4px;
        *margin-top: 4px;
    }

        #plUL li:hover {
            font-weight: bold;
        }


    .plItem {
        position: relative;
    }

    #plwrap {
        position: relative;
    }

    .plimage {
        position: absolute;
        top: 10px;
        left: 10px;
    }
/*
    .playlist-title {
        position: absolute;
        display: block;
        width: 190px;
        top: 0;
        *right: 5px;
        left: 25px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid none;
    }

    .playlist-number {
        text-align: left;
        padding-left: 10px;
        *padding-right:10px;
        width: 30px;
        color: var(--contentLight);
        font-weight:bold;
    }

    .plSelected {
        color: red;
*/
    .plSel, .plSel:hover {
        *text-align: right;
        *width: 25px;
        font-weight: bold;
        cursor: default !important;
    }

    .is-audio, #audio0 {
        display: block;
    }

    .js.audio .is-audio {
        display: block;
    }

    .js #audio0 {
        display: block;
    }



/****   End Styl1ng for the Music Player Playlist   *****/