/*** WP Audio shortcode styling -- MediaElement.js player ***/

.audio_player {
    margin-top: 1.5rem;
}

.mejs-container * {
    font-family: 'Work Sans', Avenir, sans-serif;
    color: #66625f;
    font-weight: 500;
    font-size: 1rem;
}

.mejs-container {
    height: 50px;
    background: #E5E2E2;
    font-family: 'Work Sans', Avenir, sans-serif;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.mejs-container .mejs-controls {
    background: #E5E2E2;
    border-radius: 7px;
    height: 46px;
    padding: 0.6rem 0.5rem 1rem 0.7rem;
}

.mejs-button > button,
.mejs-button > button:hover,
.mejs-button > button:focus {
    position: relative;
    margin: 6px auto;
    border-radius: 0;
}

.mejs-button > button:hover,
.mejs-button > button:focus {
    background-color: transparent;
    background-image: url(../graphics/mejs-controls.svg);
}

.mejs-play > button,
.mejs-pause > button {
    height: 18px;
    margin-top: 7px;
}
.mejs-play > button {
    background-position: -3px 0;
    width: 14px;
    margin-top: 7px;
    margin-left: 10px;
}
.mejs-pause > button {
    background-position: -22px 0;
    width: 16px;
}
.mejs-mute > button {
    background-position: -60px 0;
}
.mejs-mute > button:hover {
    background-position: -40px 0;
}
.mejs-unmute > button {
    background-position: -40px 0;
}
.mejs-unmute > button:hover {
    background-position: -60px 0;
}

.mejs-button,
.mejs-button:hover {
    background-color: #E71105;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.mejs-time {
    line-height: 1.1rem;
    padding: 0.7rem 0.5rem;
    height: 1rem;
}

.mejs-time-rail {
    height: 1rem;
    padding-top: 0.4rem;
}

.mejs-horizontal-volume-total {
    top: 12px;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #66625f;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #ffffff;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-time-rail .mejs-time-total {
    width: 100%;
}

.mejs-controls .mejs-time-rail span {
    border: none;
    cursor: ew-resize;
}

mejs-time-current, .mejs-time-handle-content {
    background: transparent;
}

.mejs-time-float,
.mejs-time-float-current {
    font-size: 0.9rem;
    background: transparent;
    border: none;
}

.mejs-time-float-current {
    width: auto;
    width: fit-content;
}

/* background: hsla(0,0%,100%,.9); */


@media screen and (min-width: 30em) {

    .mejs-container .mejs-controls {
        height: 50px;
    }

    .mejs-button > button {
        /*margin: 0.35rem; /* 6px */
    }

    .mejs-time {
        padding: 0.5rem;
    }

}