/*---------------------------
  Element Audio Player
 ----------------------------*/
.web-audio-player-main {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -62px;
    height: 62px;
    background-color: #1c1c1c;
    visibility: hidden;
    opacity: 0;
    color: #fff;
    z-index: 101;
    transition: .3s -webkit-transform, .3s opacity, .3s cisibility;
    transition: .3s transform, .3s opacity, .3s cisibility;
}

.web-audio-player-main.show {
    visibility: visible;
    opacity: 1;
}

.web-audio-player-main:before {
    content: '';
    position: absolute;
    display: block;
    left: 100px;
    right: 160px;
    top: -40px;
    height: 40px;
    z-index: 0;
}

.web-audio-player-main:hover, .web-audio-player-main.web-audio-player-pin {
    -webkit-transform: translateY(-62px);
    -ms-transform: translateY(-62px);
    transform: translateY(-62px);
}

.web-audio-player-main .web-audio-inner {
    display: table;
    height: 62px;
    width: 100%;
}

.web-audio-player-main .web-audio-inner > div {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

.web-audio-player-main .web-audio-controls,
.web-audio-player-main .web-audio-settings {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.web-audio-player-main .web-audio-controls > div,
.web-audio-player-main .web-audio-settings > div {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    font-size: 1.1rem;
    width: 35px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.web-audio-player-main .web-audio-controls .web-audio-play-pause {
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 19px;
    text-align: center;
    background-color: #fff;
    color: #1c1c1c;
}

.web-audio-player-main .web-audio-controls .web-audio-play-pause .web-audio-pause {
    display: none;
}

.web-audio-player-main.web-audio-player-playing .web-audio-play-pause .web-audio-play {
    display: none;
}

.web-audio-player-main.web-audio-player-playing .web-audio-play-pause .web-audio-pause {
    display: block;
}

.web-audio-player-main .web-audio-title {
    padding: 0 20px;
    width: 99%;
}

.web-audio-player-main .web-audio-title > div {
    display: table;
    table-layout: fixed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.web-audio-player-main .web-audio-time {
    white-space: nowrap;
    font-size: 0.9rem;
    padding-right: 15px;
}

.web-audio-player-main .web-audio-volume {
    padding-right: 10px;
}

.web-audio-player-main .web-audio-volume-icon {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    font-size: 1.1rem;
    width: 15px;
    height: 30px;
    line-height: 30px;
    text-align: left;
}

.web-audio-player-main .web-audio-volume-icon-half,
.web-audio-player-main .web-audio-volume-icon-small,
.web-audio-player-main .web-audio-volume-icon-muted,
.web-audio-player-main.volume-half .web-audio-volume-icon-full,
.web-audio-player-main.volume-small .web-audio-volume-icon-full,
.web-audio-player-main.volume-muted .web-audio-volume-icon-full {
    display: none;
}

.web-audio-player-main .web-audio-volume-icon-full {
    display: block;
}

.web-audio-player-main.volume-half .web-audio-volume-icon-half {
    display: block;
}

.web-audio-player-main.volume-small .web-audio-volume-icon-small {
    display: block;
}

.web-audio-player-main.volume-muted .web-audio-volume-icon-muted {
    display: block;
}

.web-audio-player-main .web-audio-volume-inner {
    position: relative;
    display: inline-block;
    width: 70px;
    margin-left: 5px;
    background-color: #555;
    vertical-align: middle;
}

.web-audio-player-main .web-audio-progress {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    background-color: #3b3b3b;
    z-index: 1;
}

.web-audio-player-main .web-audio-volume-inner,
.web-audio-player-main .web-audio-progress {
    height: 1px;
    cursor: pointer;
}

.web-audio-player-main .web-audio-volume-inner:before,
.web-audio-player-main .web-audio-progress:before {
    content: '';
    position: absolute;
    display: block;
    top: -8px;
    bottom: -8px;
    left: 0;
    right: 0;
}

.web-audio-player-main .web-audio-volume-inner .web-audio-volume-current,
.web-audio-player-main .web-audio-progress .web-audio-progress-current {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: #bbb;
    transition: .3s background-color;
    z-index: 1;
}

.web-audio-player-main .web-audio-volume-inner .web-audio-volume-current:after,
.web-audio-player-main .web-audio-progress .web-audio-progress-current:after {
    content: '';
    position: absolute;
    right: -2px;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background-color: #fff;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: .3s -webkit-transform;
    transition: .3s transform;
}

.web-audio-player-main .web-audio-volume-inner:hover .web-audio-volume-current,
.web-audio-player-main .web-audio-volume-inner.hover .web-audio-volume-current,
.web-audio-player-main .web-audio-progress:hover .web-audio-progress-current,
.web-audio-player-main .web-audio-progress.hover .web-audio-progress-current {
    background-color: #fff;
}

.web-audio-player-main .web-audio-volume-inner:hover .web-audio-volume-current:after,
.web-audio-player-main .web-audio-volume-inner.hover .web-audio-volume-current:after,
.web-audio-player-main .web-audio-progress:hover .web-audio-progress-current:after,
.web-audio-player-main .web-audio-progress.hover .web-audio-progress-current:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.web-audio-player-main.web-audio-player-playlist-opened {
    -webkit-transform: translateY(-312px);
    -ms-transform: translateY(-312px);
    transform: translateY(-312px);
}

.web-audio-player-main .web-audio-player-playlist {
    position: absolute;
    background-color: #1c1c1c;
    top: 100%;
    left: 0;
    right: 0;
    height: 250px;
}

.web-audio-player-main .web-audio-player-playlist-inner {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.web-audio-player-main .web-audio-player-playlist-inner > li {
    display: table;
    width: 100%;
    padding: 13px;
    cursor: pointer;
    transition: .2s background-color;
}

.web-audio-player-main .web-audio-player-playlist-inner > li:hover, .web-audio-player-main .web-audio-player-playlist-inner > li.web-playlist-item-active {
    background-color: #262626;
}

.web-audio-player-main .web-playlist-play-pause {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 11px;
    text-align: center;
    background-color: #fff;
    color: #1c1c1c;
    margin-left: 7px;
    margin-right: 15px;
    font-size: 8px;
}

.web-audio-player-main .web-playlist-play-pause .web-playlist-pause {
    display: none;
}

.web-audio-player-main .web-audio-player-playlist-inner > li.web-playlist-item-playing .web-playlist-play-pause .web-playlist-play {
    display: none;
}

.web-audio-player-main .web-audio-player-playlist-inner > li.web-playlist-item-playing .web-playlist-play-pause .web-playlist-pause {
    display: block;
}

.web-audio-player-main .web-playlist-item-duration {
    display: inline-block;
    text-align: right;
    font-size: 0.9rem;
    margin-right: 7px;
    width: 58px;
}

.web-audio-player-main .web-playlist-right > a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    text-align: center;
    width: 30px;
}

.web-audio-player-main .web-playlist-item-cont > div {
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;
}

.web-audio-player-main .web-playlist-item-cont .web-playlist-title {
    width: 99%;
}

.web-audio-player-main .web-playlist-item-cont .web-playlist-title > div {
    width: 100%;
    white-space: normal;
}

.web-audio-player-main .web-audio-settings .web-audio-pin {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.web-audio-player-main .web-audio-settings .web-audio-pin,
.web-audio-player-main .web-audio-settings .web-audio-loop,
.web-audio-player-main .web-audio-settings .web-audio-shuffle,
.web-audio-player-main .web-audio-settings .web-audio-playlist {
    opacity: 0.5;
}

.web-audio-player-main.web-audio-player-pin .web-audio-settings .web-audio-pin,
.web-audio-player-main.web-audio-player-loop .web-audio-settings .web-audio-loop,
.web-audio-player-main.web-audio-player-shuffle .web-audio-settings .web-audio-shuffle,
.web-audio-player-main.web-audio-player-playlist-opened .web-audio-settings .web-audio-playlist {
    opacity: 1;
}

@media (max-width: 767px) {
    .web-audio-player-main {
        bottom: -170px;
        height: 170px;
    }
    .web-audio-player-main:hover {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    .web-audio-player-main.web-audio-player-pin, .web-audio-player-main.web-audio-player-pin:hover {
        -webkit-transform: translateY(-170px);
        -ms-transform: translateY(-170px);
        transform: translateY(-170px);
    }
    .web-audio-player-main.web-audio-player-playlist-opened, .web-audio-player-main.web-audio-player-playlist-opened:hover {
        -webkit-transform: translateY(-420px);
        -ms-transform: translateY(-420px);
        transform: translateY(-420px);
    }
    .web-audio-player-main .web-audio-inner {
        display: block;
        height: 170px;
        text-align: center;
    }
    .web-audio-player-main .web-audio-inner .web-audio-controls {
        padding-top: 20px;
        padding-bottom: 10px;
    }
    .web-audio-player-main .web-audio-inner .web-audio-title {
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .web-audio-player-main .web-audio-inner .web-audio-controls,
    .web-audio-player-main .web-audio-inner .web-audio-title {
        display: block;
    }
    .web-audio-player-main .web-audio-inner .web-audio-time,
    .web-audio-player-main .web-audio-inner .web-audio-volume,
    .web-audio-player-main .web-audio-inner .web-audio-settings {
        display: inline-block;
    }
    .web-audio-player-main .web-audio-inner .web-audio-pin {
        display: none;
    }
}

/* Playlist */
.web-audio-playlist-hidden {
    display: none;
}

.web-audio-playlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.web-audio-playlist > li {
    display: table;
    padding: 13px;
    cursor: pointer;
}

.web-audio-playlist > li:hover, .web-audio-playlist > li.web-audio-playlist-item-active {
    background-color: #f2f2f2;
}

.web-audio-playlist > li > div {
    display: table-cell;
    vertical-align: middle;
}

.web-audio-playlist > li .web-audio-playlist-title {
    width: 99%;
}

.web-audio-playlist > li .web-audio-playlist-buttons {
    white-space: nowrap;
}

.web-audio-playlist > li .web-audio-playlist-buttons > a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    text-align: center;
    width: 30px;
}

.web-audio-playlist > li .web-audio-playlist-play-pause {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 11px;
    text-align: center;
    background-color: #3b3b3b;
    color: #fff;
    margin-left: 7px;
    margin-right: 15px;
    font-size: 8px;
}

.web-audio-playlist > li .web-audio-playlist-play-pause .web-audio-playlist-pause {
    display: none;
}

.web-audio-playlist > li.web-audio-playlist-item-playing .web-audio-playlist-play-pause .web-audio-playlist-play {
    display: none;
}

.web-audio-playlist > li.web-audio-playlist-item-playing .web-audio-playlist-play-pause .web-audio-playlist-pause {
    display: block;
}

.web-audio-playlist > li .web-audio-playlist-duration {
    display: inline-block;
    text-align: right;
    font-size: 0.9rem;
    margin-right: 7px;
    width: 58px;
}

.web-audio-playlist.web-audio-playlist-dark > li:hover, .web-audio-playlist.web-audio-playlist-dark > li.web-audio-playlist-item-active {
    background-color: #262626;
}

.web-audio-playlist.web-audio-playlist-dark > li .web-audio-playlist-play-pause {
    background-color: #fff;
    color: #1c1c1c;
}

/* Plain Audio Player */
.web-audio-plain {
    display: table;
    width: 100%;
    padding: 20px 15px;
    background-color: #fff;
}

.web-audio-plain > div {
    display: table-cell;
}

.web-audio-plain .web-audio-plain-title {
    width: 99%;
}

.web-audio-plain .web-audio-plain-buttons {
    white-space: nowrap;
}

.web-audio-plain .web-audio-plain-buttons > a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    text-align: center;
    width: 30px;
}

.web-audio-plain .web-audio-plain-play-pause {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    background-color: #3b3b3b;
    color: #fff;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 19px;
    margin-left: 7px;
    margin-right: 15px;
    font-size: 1.1rem;
}

.web-audio-plain .web-audio-plain-play-pause .web-audio-plain-pause {
    display: none;
}

.web-audio-plain.web-audio-plain-playing .web-audio-plain-play-pause .web-audio-plain-play {
    display: none;
}

.web-audio-plain.web-audio-plain-playing .web-audio-plain-play-pause .web-audio-plain-pause {
    display: block;
}

.web-audio-plain .web-audio-plain-duration {
    display: inline-block;
    text-align: right;
    font-size: 0.9rem;
    margin-right: 7px;
    width: 58px;
}

.web-audio-plain .web-audio-progress {
    position: relative;
    background-color: #ddd;
    cursor: pointer;
    left: 0;
    right: 0;
    height: 1px;
    margin-top: 2px;
    margin-bottom: 2px;
    z-index: 1;
}

.web-audio-plain .web-audio-progress:before {
    content: '';
    position: absolute;
    display: block;
    top: -8px;
    bottom: -8px;
    left: 0;
    right: 0;
}

.web-audio-plain .web-audio-progress .web-audio-progress-current {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: #777;
    transition: .3s background-color;
    z-index: 1;
}

.web-audio-plain .web-audio-progress .web-audio-progress-current:after {
    content: '';
    position: absolute;
    right: -2px;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background-color: #3b3b3b;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: .3s -webkit-transform;
    transition: .3s transform;
}

.web-audio-plain .web-audio-progress:hover .web-audio-progress-current,
.web-audio-plain .web-audio-progress.hover .web-audio-progress-current {
    background-color: #3b3b3b;
}

.web-audio-plain .web-audio-progress:hover .web-audio-progress-current:after,
.web-audio-plain .web-audio-progress.hover .web-audio-progress-current:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.web-audio-plain.web-audio-plain-dark {
    background-color: #262626;
    color: #fff;
}

.web-audio-plain.web-audio-plain-dark .web-audio-plain-play-pause {
    background-color: #fff;
    color: #1c1c1c;
}

.web-audio-plain.web-audio-plain-dark .web-audio-progress {
    background-color: #3b3b3b;
}

.web-audio-plain.web-audio-plain-dark .web-audio-progress .web-audio-progress-current {
    background-color: #bbb;
}

.web-audio-plain.web-audio-plain-dark .web-audio-progress .web-audio-progress-current:after {
    background-color: #fff;
}

.web-audio-plain.web-audio-plain-dark .web-audio-progress:hover .web-audio-progress-current,
.web-audio-plain.web-audio-plain-dark .web-audio-progress.hover .web-audio-progress-current {
    background-color: #fff;
}