/*css html audio player user */

.html5_audio_outer_low {
    border: 0px rgb(224, 224, 224) solid;
    margin-bottom: 1em;
    margin-top: 1em;
    float: left;
    overflow: auto;
    text-align: left;
    font-family: arial, sans-serif;
    font-size: 10pt;
    color: black;
    background-color: #ffffff;
    width: 99%;
    border-radius: 0;
}

.html5_audio_outer_high {
    border: 0px rgb(174, 10, 2) solid;
    margin-bottom: 1em;
    margin-top: 1em;
    float: left;
    overflow: auto;
    text-align: left;
    font-family: arial, sans-serif;
    font-size: 10pt;
    color: black;
    background-color: #fff;
    width: 100%;
    max-width: 99%;
    border-radius: 0;
}

.html5_audio {
    /* margin: 0; */
    /* background-color: rgb(242, 244, 245); */
    border: 0px rgb(255, 0, 0) solid;
    width: 100%;
    padding: 0em;
    margin:0;
}

.html5_audio_player_headline {
    background-color: #9c9c9c;
    padding: 0.5em;
    overflow: auto;
    /* width: 100%; */
    display: block;
    line-height: 1.4m;
    font-size: 10pt;
}

.html5_audio_headline_player_name_high ,.html5_audio_headline_player_name_low {
    background-color: rgb(255, 251, 217);
    font-weight: bold;
    width: 20%;
        min-width:12em;
}

.html5_audio_headline_player_name_low {
    background-color: rgb(255, 255, 255);
}


.html5_audio_headline_pause_low, .html5_audio_headline_pause_high {

    width: 4%;
        min-width:2em;

    
}

.html5_audio_headline_actual_trackname {
        background-color: rgba(255, 255, 255, 0.98);
        width: 40%;
            min-width:10em;
}

.html5_audio_headline_other_song {/* width:10%; */}

.html5_audio_headline_pause_low {
    background-color: rgb(255, 255, 255);
}

.html5_audio_headline_pause_high {
    background-color: rgb(255, 255, 255);
    color: #68bb80;
}

.html5_audio_headline_other_song {
    background-color: rgba(255, 255, 255, 0.98);
    width: 4%;
    min-width:2em;
}



.html5_audio_headline_player_name_high,
.html5_audio_headline_player_name_low,
.html5_audio_headline_other_song, 
.html5_audio_headline_pause_low, 
.html5_audio_headline_pause_high,
.html5_audio_headline_actual_trackname,

.html5_audio_headline_shuffle_low,
.html5_audio_headline_shuffle_high,
.html5_audio_headline_auto_next_song_high,
.html5_audio_headline_auto_next_song_low,
.html5_audio_headline_auto_start_high,
.html5_audio_headline_auto_start_low,
.html5_audio_headline_random_start_high,
.html5_audio_headline_random_start_low 
{
    border-radius: 0.4em;
    inset 0 0 3px 2px rgba(1, 1, 1, 0.75);
    padding-left: 1%;
    padding-right:1%;
    margin: 0px;
    text-align: center;
    border: 1px #000000 solid;
    overflow: hidden;
    color: black;
    float: left;
    cursor: pointer;
    margin-top: 0.2em;
    vertical-align: middle;
    line-height: 1.5em;
    display: table-cell;
}


.html5_audio_headline_shuffle_low {
    background-color: #e0e0e0;
}

.html5_audio_headline_shuffle_high {
    background-color: #fdd6ae;

}

.html5_audio_headline_auto_next_song_low {
    background-color: #e0e0e0;
}

.html5_audio_headline_auto_next_song_high {
    background-color: #cfffb1;

}

.html5_audio_headline_auto_start_low {
    background-color: #e0e0e0;
}

.html5_audio_headline_auto_start_high {
    background-color: #b1f0ff;
}

.html5_audio_headline_random_start_low {
    background-color: #e0e0e0;
    display:none;
}

.html5_audio_headline_random_start_high {
    background-color: #ffb1f8;
    display:none;

}

.html5_audio_controls {
    /* background-color: rgba(216, 215, 215, 0.28); */
    overflow: auto;
    border-bottom: 0px gray solid;
    height: auto;
    /* font-size: 1.4em; */
    width: 100%;
    display: block;
}

.html5_audio_text_play {
    background-color: rgb(255, 251, 217);
    color: black;
    padding: 0.3em;
    padding-left: 1.5em;
    overflow: auto;
    cursor: pointer;
    border-bottom: 0px #999 solid;
    /* line-height: 1.4em; */
    /* box-shadow: inset 0 0 2px 1px rgba(173, 173, 173, 0.24); */
    
}

.html5_audio_text_pause {
    /* background-color: rgb(251, 251, 251); */
    color: black;
    padding: 0.3em;
    padding-left: 1.5em;
    overflow: auto;
    cursor: pointer;
    /* border-bottom: 0px #999 solid; */
    /* display: block; */
    /* width: 100%; */
}
.html5_audio_text_play,.html5_audio_text_pause {
    border-radius: 0;
    border-bottom: 1px #d0d0d0 solid;
}

.progress_outer {
}

,progress {
}

.audio_player_symbol_start {
    width: 1.5em;
    text-align: left;
    float: left;
}

.audio_player_symbol_pause {
    xbackground-color: #ffbe00;
    width: 1.5em;
    text-align: left;
    float: left;
}

/*.........................*/
.audio_player_symbol_startb {
    background-color: #c7c7c7;
    width: 1.5em;
    text-align: left;
    float: left;
    border-radius: 0.5em;
    margin-right: 0.5em;
    text-align: center;
    color: black;
}

.audio_player_symbol_pauseb {
    background-color: #68bb80;
    width: 1.5em;
    text-align: left;
    float: left;
    border-radius: 0.5em;
    margin-right: 0.5em;
    text-align: center;
    color: white;
}

.audio_player_symbol_file {
    xbackground-color: #0083ff;
    display: table-cell;
    vertical-align: middle;
}

.audio_player_real_track {
    background-color: #ffffff;
    width: 2em;
    text-align: center;
    display: table-cell;
    float: left;
    font-weight: bold;
    border-radius: 0.4em;
    border: 1px gray solid;
    margin-right: 1em;
}

/*--------------------------------------*/
/*--------smartphone tablet-----------------------------------------------------------*/
@media screen and (max-width: 100px ) {

    .html5_audio_headline_player_name_high ,.html5_audio_headline_player_name_low {
        width: 96%;
    }

    .html5_audio_headline_actual_trackname_outer {
        width: 100%;
    }
}

/*--------smartphone tablet-----------------------------------------------------------*/
@media screen and (max-width: 100px ) {
.html5_audio_headline_pause_low, .html5_audio_headline_pause_high {
    width: 96%;
    overflow:hidden;
}

.html5_audio_headline_actual_trackname {
        background-color: rgba(255, 255, 255, 0.98);
    width: 84%;
}

.html5_audio_headline_other_song {

    width: 6%;

}
}