/*------------------------------------------------------------------------------------------- */
/*----------------------------------------- AUDIO ------------------------------------------ */
/*------------------------------------------------------------------------------------------- */
.audioplayer
{
    height: 50px;
    position: relative;
    z-index: 1;
    background: #e6e6e6;
    border: 1px solid #dadada;
    border-radius: 25px;
}

.audioplayer-mini
{
    width: 30px; /* 40 */
    margin: 0 auto;
}

/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */
.audioplayer > div
{
    position: absolute;
}

/* play/pause button */
.audioplayer-playpause
{
    width: 50px;
    height: 50px;
    text-align: left;
    /*text-indent: -9999px;*/
    cursor: pointer;
    z-index: 2;
    bottom: -5px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.audioplayer-playpause a{
    width: 38px;
    height: 38px;
    background: rgb(64,126,254);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 12px;
}
.audioplayer-mini .audioplayer-playpause
{
    width: 100%;
}
.audioplayer-stopped .audioplayer-playpause a
{
    /*width: 0;*/
    /*height: 0;*/
    border: 0.7em solid transparent;
    border-left-width: 1.1em;
    border-right: none;
    border-left-color: black;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* margin: -0.5em 0 0 -0.25em;  */
    border: none!important;
}
/*.audioplayer-stopped .audioplayer-playpause:hover a{*/
/*    border-left-color: rgb(64,126,254);*/
/*}*/
.audioplayer-playing .audioplayer-playpause i, .audioplayer-stopped .audioplayer-playpause i{
    color: white;
}
.audioplayer-playing .audioplayer-playpause:hover a:before,
.audioplayer-playing .audioplayer-playpause:hover a:after{
    background: rgb(64,126,254);
}
/*.audioplayer-playing .audioplayer-playpause a*/
/*{*/
/*    width: 0.75em;*/
/*    height: 0.75em;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    margin: -0.375em 0 0 -0.375em;*/
/*}*/
/*.audioplayer-playing .audioplayer-playpause a:before,*/
/*.audioplayer-playing .audioplayer-playpause a:after*/
/*{*/
/*    width: 40%;*/
/*    height: 100%;*/
/*    background-color: black;*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*}*/
/*.audioplayer-playing .audioplayer-playpause a:before*/
/*{*/
/*    left: 0;*/
/*}*/
/*.audioplayer-playing .audioplayer-playpause a:after*/
/*{*/
/*    right: 0;*/
/*}*/


/* timers */
.audioplayer-time
{
    width: 4em;
    height: 44px;
    line-height: 45px;
    text-align: center;
    z-index: 2;
    top: 0;
    color: black;
}
    .audioplayer-time-current
    {
        border-left: 1px solid #c0c0c0;
        border-right: 1px solid #c0c0c0;
        right: 7.0em;
    }
    .audioplayer-time-duration
    {
        border-right: 1px solid #c0c0c0;
        border-right-color: rgba( 255, 255, 255, .1 );
        right: 3em;  /* 40 */
    }
        .audioplayer-novolume .audioplayer-time-duration
        {
            border-right: 0;
            right: 0;
        }


/* progress bar of loaded/played */
.audioplayer-bar
{
    height: 5px; /* 14 */
    background-color: #c0c0c0;
    cursor: pointer;
    z-index: 2;
    bottom: 0;
    right: 2.9em;
    left: 44px;
}
    .audioplayer-novolume .audioplayer-bar
    {
        right: 4.375em; /* 70 */
    }
    .audioplayer-bar div
    {
        width: 0;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .audioplayer-bar-loaded
    {
        background-color: #989898;
        z-index: 1;
    }
    .audioplayer-bar-played
    {
        /*background: rgb(64,126,254);*/
        background: #1777f0;
        z-index: 2;
    }


/* volume button */
.audioplayer-volume
{
width: 3em; /* 40 */
height: 44px;
border-left: 1px solid #c0c0c0;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
right: 0;
}
.audioplayer-volume-button
{
    width: 100%;
    height: 51px;
}
.audioplayer-volume-button:hover a{
   background: rgb(64,126,254);
}
.audioplayer-volume-button:hover a:before{
    border-right-color:rgb(64,126,254);
}
.audioplayer:not(.audioplayer-muted) .audioplayer-volume-button:hover a:after{
    border-color:rgb(64,126,254);
}


    .audioplayer-volume-button a
    {
        width: 0.313em; /* 5 */
        height: 0.375em; /* 6 */
        background-color: black;
        display: block;
        position: relative;
        z-index: 1;
        top: 40%;
        left: 35%;
    }
        .audioplayer-volume-button a:before,
        .audioplayer-volume-button a:after
        {
            content: '';
            position: absolute;
        }
        .audioplayer-volume-button a:before
        {
            width: 0;
            height: 0;
            border: 0.5em solid transparent; /* 8 */
            border-left: none;
            border-right-color: black;
            z-index: 2;
            top: 50%;
            right: -0.25em;
            margin-top: -0.5em; /* 8 */
        }
        .audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after
        {
            /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
            width: 0.313em; /* 5 */
            height: 0.313em; /* 5 */
            border: 0.25em double black; /* 4 */
            border-width: 0.25em 0.25em 0 0; /* 4 */
            left: 0.563em; /* 9 */
            top: -0.063em; /* 1 */
            -webkit-border-radius: 0 0.938em 0 0; /* 15 */
            -moz-border-radius: 0 0.938em 0 0; /* 15 */
            border-radius: 0 0.938em 0 0; /* 15 */
            -webkit-transform: rotate( 45deg );
            -moz-transform: rotate( 45deg );
            -ms-transform: rotate( 45deg );
            -o-transform: rotate( 45deg );
            transform: rotate( 45deg );
        }


/* volume dropdown */
.audioplayer-volume-adjust
{
    height: 6.25em; /* 100 */
    cursor: default;
    position: absolute;
    left: -1px;
    right: -1px;
    top: -9999px;
    background: #e6e6e6;
    border: 1px solid #c0c0c0;
    border-bottom:0 none;
}
    .audioplayer-volume:not(:hover) .audioplayer-volume-adjust
    {
        opacity: 0;
    }
    .audioplayer-volume:hover .audioplayer-volume-adjust
    {
        top: auto;
        bottom: 50%;
    }
    .audioplayer-volume-adjust > div
    {
        width: 6px;
        height: 80%;
        background-color: #989898;
        cursor: pointer;
        position: relative;
        z-index: 1;
        margin: 30% auto 0;
        bottom: 6px;
    }
        .audioplayer-volume-adjust div div
        {
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgb(64,126,254);
        }
.audioplayer-novolume .audioplayer-volume
{
    display: none;
}

.audioplayer-bar,
.audioplayer-volume-adjust > div,
.audioplayer-bar-played,
audioplayer-bar-loaded,
.audioplayer-volume-adjust div div
{
    box-shadow: 1px 1px 0 rgba( 0, 0, 0, .2 ) inset;
}

.audioplayer-bar-played,
.audioplayer-volume-adjust div div
{
    color: rgb(64,126,254);
}

.audioplayer-volume-adjust div
{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.audioplayer-volume-adjust
{
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.audioplayer *,
.audioplayer *:before,
.audioplayer *:after
{
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}

.audioplayer {
    background: #fff;
    border: none;
}
.audio_box .media_box .audio_name {
    border-left: none;
}
.audioplayer-volume {
    border-left: none;
}
.audioplayer-bar {
    left: 60px;
}
.audio_box .media_box:hover .ico_panel {
    border-radius: 5px;
    padding-right: 10px;
}
.audioplayer-volume-adjust {
    border: 1px solid #c0c0c0;
}
.audioplayer-volume:hover .audioplayer-volume-adjust {
    bottom: 10%;
    z-index: 5;
}

.audioplayer-bar-played:after {
    content: '';
    opacity: 0;
    background: rgb(64,126,254);
    width: 11px;
    height: 11px;
    position: absolute;
    top: -3px;
    right: -5px;
    z-index: 10;
    border-radius: 50%;
    transition: .4s ease;
}

.audio_box .media_box:hover .ico_panel{display: block;}

.media_box:hover .audioplayer-bar-played:after {
    opacity: 1;
}

@media (max-width: 1240px) {
    .audio_box .media_box .audio_name {
        width: 51%!important;
    }
}

@media (max-width: 760px){
    .audioplayer-playpause {
        height: 60px;
        width: 60px;
        bottom: -9px;
    }

    .audioplayer-playpause a {
        width: 45px;
        height: 45px;
        font-size: 15px;
    }

    .audioplayer.audioplayer-stopped {
        height: 60px;
    }

    .audio_box .media_box .audio_name {
        left: 45px;
        height: 54px;
        /* text-align: center; */
        width: 48%!important;
        font-size: 13px;
        line-height: 54px;
    }

    .audioplayer-time.audioplayer-time-duration {
        height: 53px;
        font-size: 24px;
        width: auto;
        right: 45px;
        text-align: center;
        line-height: 53px;
        /*background: #e6e6e6;*/
    }

    .audioplayer-time-current {display: none;}

    .audioplayer-volume {
        height: 58px;
        line-height: 58px;
        width: 42px;
    }

    .audioplayer-volume-button a {
        font-size: 20px;
        line-height: 58px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
    }

    .audioplayer-volume-button {
        height: 58px;
        width: 20px;
    }

    .audio_box .media_box .ico_panel {
        height: 50px;
    }

    .audioplayer-stopped .audioplayer-playpause a {
        border: 1.0em solid transparent;
        border-left-width: 1.75em;
        border-right: none;
        border-left-color: black;
    }

    .audio_box .media_box:hover .ico_panel {
        line-height: 60px;
        background: #e6e6e6;
        top: 0;
    }

    .audio_box .media_box .ico_panel .popup {
        font-size: 18px;
    }
    .audioplayer{
        height: 60px;
        border-radius: 30px;
    }
    /*.audioplayer-playing .audioplayer-playpause a {*/
    /*    margin: 0;*/
    /*    transform: translate(-50%, -50%);*/
    /*    width: 1.4em;*/
    /*    height: 1.7em;*/
    /*}*/
    .audioplayer-bar {
        left: 65px;
    }
    .audio_box .media_box .audio_name {
        left: 50px;
    }
}