.nowPlayingBarInfoContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    overflow: hidden
}

.nowPlayingBar {
    text-align: center;
    will-change: transform;
    contain: layout style;
    -webkit-transition: -webkit-transform .2s ease-out;
    -o-transition: transform .2s ease-out;
    transition: transform .2s ease-out
}

.nowPlayingBar-hidden {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.nowPlayingBarTop {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 4.2em;
    position: relative;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.mediaButton,
.nowPlayingBarUserDataButtons .btnUserItemRating {
    vertical-align: middle;
    margin: 0;
    text-align: center
}

.mediaButton {
    font-size: 120%
}

.nowPlayingBar .nowPlayingImage {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    height: 70%;
    width: 4.2em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.nowPlayingBarText {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: left;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-size: 92%;
    margin-right: 2.4em;
    margin-left: 1em
}

.nowPlayingBarCenter {
    vertical-align: middle;
    text-align: center;
    z-index: 2;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute
}

.nowPlayingBarPositionContainer {
    position: absolute !important;
    left: 0;
    top: -.56em;
    right: 0;
    z-index: 1
}

.headroom--unpinned .nowPlayingBarPositionContainer,
.noMediaProgress .nowPlayingBarPositionContainer {
    display: none
}

.nowPlayingBarRight {
    position: relative;
    margin: 0 .5em 0 auto;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.nowPlayingBarCurrentTime {
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    padding-left: 1.5em
}

.nowPlayingBarVolumeSliderContainer {
    margin-right: 2em
}

.nowPlayingBarUserDataButtons {
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em
}

.nowPlayingBarPositionSlider::-webkit-slider-thumb {
    width: 1.2em !important;
    height: 1.2em !important
}

@media all and (max-width:87.5em) {
    .nowPlayingBarUserDataButtons {
        display: none
    }
}

@media all and (max-width:68.75em) {

    .nowPlayingBar .muteButton,
    .nowPlayingBar .unmuteButton,
    .nowPlayingBarVolumeSliderContainer {
        display: none !important
    }
}

@media all and (max-width:50em) {
    .nowPlayingBarCenter {
        display: none !important
    }

    .toggleRepeatButton {
        display: none
    }
}

@media all and (min-width:50em) {
    .nowPlayingBarRight .playPauseButton {
        display: none
    }

    .nowPlayingBarInfoContainer {
        max-width: 40%
    }
}