/* audio-player */
.audio-player {
    width: 100%;
    height: 70px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.audio-player .player-wrapper {
    display: inline-block;
    width: 1180px;
    height: 70px;
}
.audio-player .player-wrapper .btns,
.audio-player .player-wrapper .icon,
.audio-player .player-wrapper .detail,
.audio-player .player-wrapper .volume {
    display: inherit;
}
.audio-player .player-wrapper .btns .prev {
    width: 15px;
    height: 18px;
    margin: calc((70px - 18px)/2) 25px calc((70px - 18px)/2) 0;
    background-image: url(/public/images/player/prev@2x.png);
    filter: brightness(0);
}
.audio-player .player-wrapper .btns .prev:hover {
    background-image: url(/public/images/player/prev-hover@2x.png);
}
.audio-player .player-wrapper .btns .play-pause {
    width: 50px;
    height: 50px;
    margin: calc((70px - 50px) / 2) 0;
}
.audio-player .player-wrapper .btns .play-pause.playing {
    background-image: url(/public/images/player/pause@2x.png);
    filter: brightness(0);
}
.audio-player .player-wrapper .btns .play-pause.paused {
    background-image: url(/public/images/player/play@2x.png);
    filter: brightness(0);
}
.audio-player .player-wrapper .btns .play-pause.paused:hover {
    background-image: url(/public/images/player/play-hover@2x.png);
}
.audio-player .player-wrapper .btns .play-pause.playing:hover {
    background-image: url(/public/images/player/pause-hover@2x.png);
}
.audio-player .player-wrapper .btns .next {
    width: 15px;
    height: 18px;
    margin: calc((70px - 18px) / 2) 0 calc((70px - 18px) / 2) 25px;
    background-image: url(/public/images/player/next@2x.png);
    filter: brightness(0);
}
.audio-player .player-wrapper .btns .next:hover {
    background-image: url(/public/images/player/next-hover@2x.png);
}
.audio-player .player-wrapper .icon {
    background: center no-repeat;
    background-size: cover;
}
.audio-player .player-wrapper .icon:hover {
    cursor: pointer;
}
.audio-player .player-wrapper .detail {
    width: 500px;
    position: relative;
    text-align: left;
    vertical-align: top;
    padding-top: 5px;
}
.audio-player .player-wrapper .detail .program-meta {
    height: 22px;
}
.audio-player .player-wrapper .cover {
    width: 54px;
    height: 54px;
    padding: calc((70px - 54px) / 2);
    margin-left: 25px;
}
.audio-player .player-wrapper .detail .program-title,
.audio-player .player-wrapper .detail .podcaster,
.audio-player .player-wrapper .detail .channel-title {
    line-height: 1.3;
    display: inline-block;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audio-player .player-wrapper .detail .program-title {
    font-size: 13px;
    max-width: 400px;
}
.audio-player .player-wrapper .detail .podcaster {
    margin-left: 10px;
    font-size: 12px;
    max-width: 100px;
}
.audio-player .player-wrapper .detail .channel-title {
    max-width: 350px;
    color: #FF7C36;
    font-size: 12px;
}
.audio-player .player-wrapper .detail .progress {
    position: relative;
}
.audio-player .player-wrapper .detail .progress .time {
    font-size: 12px;
    color: #333;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 10px;
}
.audio-player .player-wrapper .detail .progress .time .time-elapsed {
    color: #E13430;
    width: 40px;
    display: inline-block;
}
.audio-player .player-wrapper .detail .progress .progress-bar {
    padding: 7px 0;
    height: 8px;
}
.audio-player .player-wrapper .detail .progress .progress-bar .progress-bar-total {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
}
.audio-player .player-wrapper .detail .progress .progress-bar .progress-bar-elapsed {
    position: absolute;
    border-radius: 2px;
    background-color: #E13430;
    height: 4px;
}
.audio-player .player-wrapper .detail .progress .progress-bar .progress-bar-elapsed .progress-bar-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #333;
    top: -3px;
    right: -5px;
}
.audio-player .player-wrapper .volume {
    margin-left: 30px;
}
.audio-player .player-wrapper .volume .volume-icon {
    display: inherit;
    width: 22px;
    height: 22px;
    margin: calc((70px - 22px) / 2) 0;
    background-image: url(/public/images/player/volume@2x.png);
}
.audio-player .player-wrapper .volume .volume-icon.muted {
    background-image: url(/public/images/player/volume-mute@2x.png);
}
.audio-player .player-wrapper .volume .volume-bar {
    padding: 6px 0;
    display: inherit;
    margin-bottom: calc(70px / 2 - 6px + 1px);
    position: relative;
    width: 90px;
}
.audio-player .player-wrapper .volume .volume-bar .volume-bar-full {
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-color: #9B9B9B;
}
.audio-player .player-wrapper .volume .volume-bar .volume-bar-current {
    position: absolute;
    height: 3px;
    border-radius: 2px;
    background-color: #ccc;
}
.audio-player .player-wrapper .volume .volume-bar .volume-bar-current .volume-bar-handle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background-color: #333;
    bottom: 0px;
    top: -2px;
    right: -3px;
}
.audio-player .player-wrapper .play-rate-view {
    display: inherit;
    height: 70px;
    width: 33px;
    margin: 0px 15px;
    position: relative;
}
.audio-player .player-wrapper .play-rate-view .rate-select {
    position: fixed;
    bottom: 70px;
    width: 80px;
    text-align: center;
    color: #333;
    line-height: 28px;
    padding: 5px 10px;
    background-color: #f8f8f8;
    border: 1px solid #e8e8e8;
}
.audio-player .player-wrapper .play-rate-view .rate-option {
    cursor: pointer;
    font-size: 13px;
}
.audio-player .player-wrapper .play-rate-view .rate-option:hover {
    color: #e13430;
}
.audio-player .player-wrapper .play-rate-view .play-rate-title {
    cursor: pointer;
    position: absolute;
    left: 0px;
    white-space: nowrap;
    line-height: 20px;
    color: #9B9B9B;
    max-width: 33px;
    font-size: 15px;
    margin: calc((70px - 20px)/2) 0 calc((70px - 20px)/2) 0;
}
.audio-player .player-wrapper .play-rate-view .play-rate-title:hover {
    text-decoration: none;
}
.audio-player .player-wrapper .action-buttons .share-btn,
.audio-player .player-wrapper .action-buttons .download-btn {
    cursor: pointer;
    width: 22px;
    height: 22px;
    margin: calc((70px - 22px) / 2) 3px;
    background: center no-repeat;
    background-size: cover;
    display: inline-block;
}
.audio-player .player-wrapper .action-buttons .share-btn {
    background-image: url(/public/images/player/share@2x.png);
}
.audio-player .player-wrapper .action-buttons .download-btn {
    background-image: url(/public/images/player/download@2x.png);
}
.audio-player .player-wrapper .action-buttons .share-btn:hover {
    background-image: url(/public/images/player/share-hover@2x.png);
    filter: brightness(0.5);
}
.audio-player .player-wrapper .action-buttons .download-btn:hover {
    background-image: url(/public/images/player/download-hover@2x.png);
}
.audio-player .player-wrapper .history-icon,
.audio-player .player-wrapper .playlist-icon {
    width: 22px;
    height: 22px;
    margin: calc((70px - 22px) / 2) 0;
}
.audio-player .player-wrapper .history-icon {
    margin-left: 12px;
    background-image: url(/public/images/player/history@2x.png);
}
.audio-player .player-wrapper .playlist-icon {
    margin-left: 12px;
    background-image: url(/public/images/player/playlist@2x.png);
}
.audio-player .player-wrapper .playlist-icon.active,
.audio-player .player-wrapper .playlist-icon:hover {
    background-image: url(/public/images/player/playlist-hover@2x.png);
}
.audio-player .player-wrapper .history-icon.active,
.audio-player .player-wrapper .history-icon:hover {
    background-image: url(/public/images/player/history-hover@2x.png);
}
.audio-player .playlist-wrapper,
.audio-player .history-wrapper {
    position: fixed;
    display: none;
    bottom: 70px;
    width: 100%;
    left: auto;
    right: auto;
}
.audio-player .active {
    display: block;
}

.actionButtons {
    display: none;
    line-height: 0;
    padding: 2px 0;
    vertical-align: middle;
}
.actionButtons .share-btn,
.actionButtons .download-btn,
.actionButtons .remove-btn {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: center no-repeat;
    background-size: cover;
    display: inline-block;
}
.actionButtons .share-btn {
    background-image: url(/public/images/player/share@2x.png);
}
.actionButtons .download-btn {
    background-image: url(/public/images/player/download@2x.png);
}
.actionButtons .remove-btn {
    background-image: url(/public/images/player/remove-btn@2x.png);
}

/* history */
.history {
    background-color: black;
    display: inline-block;
    width: 752px;
    margin-left: 82px;
    left: auto;
    right: auto;
    line-height: 1.2;
    position: relative;
}
.history .header {
    text-align: left;
    font-size: 18px;
    color: white;
    padding: 14px 30px;
    border-bottom: 1px solid #3D3D3D;
    position: inherit;
}
.history .header .header-text {
    border-bottom: 3px solid #E13430;
    padding-bottom: 12px;
}
.history .header .clear-all {
    display: inline-block;
    position: absolute;
    top: 16px;
    right: 36px;
}
.history .header .clear-all .clear-all-btn {
    width: 16px;
    height: 16px;
    background: center no-repeat;
    background-size: cover;
    display: inline-block;
    background-image: url(/public/images/player/remove-btn@2x.png);
}
.history .header .clear-all .clear-all-text {
    color: #9B9B9B;
    font-size: 12px;
    position: relative;
    top: -3px;
}
.history .content {
    height: 360px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-right: 5px;
}
.history .content .history-item {
    color: #9B9B9B;
    font-size: 14px;
    padding: 8px 0;
    text-align: left;
}
.history .content .history-item:hover {
    background-color: #303030;
    color: white;
    cursor: pointer;
}
.history .content .history-item:hover .action-buttons {
    display: inline-block;
}
.history .content .history-item:first-child {
    margin-top: 9px;
}
.history .content .history-item .playing-flag,
.history .content .history-item .program-name-wrapper,
.history .content .history-item .channel-name-wrapper,
.history .content .history-item .timestr,
.history .content .history-item .item-progress {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    padding: 2px 0;
}
.history .common-playing-flag {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    margin-right: 3px;
    background: center no-repeat;
    background-image: url(/public/images/player/playing-flag@2x.png);
    background-size: cover;
    visibility: hidden;
}
.history .content .history-item .program-name-wrapper {
    width: 267px;
    margin-right: 60px;
}
.history .content .history-item .timestr {
    width: 80px;
    margin-right: 25px;
}
.history .shrink-btn {
    width: 12px;
    height: 8px;
    background: center no-repeat;
    background-size: 12px 8px;
    background-image: url(/public/images/player/shrink-down-arrow@2x.png);
    position: absolute;
    top: 3px;
    right: 2px;
    padding: 20px;
    cursor: pointer;
}

/* playlist-collection */
.playlist-collection {
    display: inline-block;
    width: 649px;
    margin-left: 261px;
    left: auto;
    right: auto;
    line-height: 1.2;
    position: relative;
}
.playlist-collection .header {
    background-color: rgb(0, 0, 0);
    text-align: left;
    font-size: 18px;
    padding: 14px 30px;
    border-bottom: 1px solid #3D3D3D;
}
.playlist-collection .header .header-text-wrapper {
    display: inline-block;
    text-align: center;
}
.playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_ondemand .header-text {
    padding-bottom: 12px;
    color: white;
    border-bottom: 3px solid #E13430;
}
.playlist-collection .content {
    background-color: rgba(0, 0, 0, 0.90);
}
.playlist-collection .content .playlist {
    height: 360px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-right: 5px;
}
.playlist-collection .playlist-item .playing-flag,
.playlist-collection .playlist-item .program-name-wrapper,
.playlist-collection .playlist-item .channel-name-wrapper,
.playlist-collection .playlist-item .duration {
    height: 20px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
}
.playlist-collection .playlist-item {
    color: #9B9B9B;
    font-size: 14px;
    padding: 8px 0;
    text-align: left;
    line-height: 1.3;
}
.playlist-collection .playlist-item:hover {
    background-color: #303030;
    color: white;
    cursor: pointer;
}
.playlist-collection .playlist-item:hover .action-buttons {
    display: inline-block;
}
.playlist-collection .playlist-item:first-child {
    margin-top: 9px;
}
.playlist-collection .playlist-item .common-playing-flag {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    margin-right: 3px;
    background: center no-repeat;
    background-image: url(/public/images/player/playing-flag@2x.png);
    background-size: cover;
    visibility: hidden;
}
.playlist-collection .playlist-item.active .playing-flag {
    visibility: visible;
}
.playlist-collection .playlist-item .program-name-wrapper {
    width: 267px;
    margin-right: 60px;
}
.playlist-collection .playlist-item .program-name-wrapper .program-name {
    vertical-align: middle;
}
.playlist-collection .playlist-item .program-name-wrapper .playing-text {
    display: none;
    vertical-align: middle;
    background-color: #6CC149;
    color: white;
    font-size: 12px;
    padding: 1px 3px;
    border-radius: 3px;
}
.playlist-collection .shrink-btn {
    width: 12px;
    height: 8px;
    background: center no-repeat;
    background-size: 12px 8px;
    background-image: url(/public/images/player/shrink-down-arrow@2x.png);
    position: absolute;
    top: 3px;
    right: 2px;
    padding: 20px;
    cursor: pointer;
}
/* end audio-player */