.nowPlayingInfoContainer { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row } .nowPlayingPageTitle { margin: 0 0 .5em .5em } .nowPlayingPositionSliderContainer { margin: .7em 0 .7em 1em } .nowPlayingInfoButtons { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap } .nowPlayingInfoControls, .nowPlayingTime { display: -webkit-box; display: -webkit-flex } .nowPlayingPageImageContainer { width: 20%; margin-right: .25em; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0 } @media all and (min-width:50em) { .nowPlayingPageImageContainer { width: 16% } } .nowPlayingInfoControls { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center } .nowPlayingPageImage { bottom: 0; left: 0; right: 0; width: 100%; -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; border: .1em solid #222; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none } @media all and (orientation:portrait) and (max-width:50em) { .nowPlayingInfoContainer { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -webkit-flex-direction: column !important; flex-direction: column !important; -webkit-box-align: center; -webkit-align-items: center; align-items: center } .nowPlayingPageTitle { text-align: center; margin: .5em 0 .75em } .nowPlayingPositionSliderContainer { margin: .7em 1em } .nowPlayingInfoButtons { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center } .nowPlayingPageImageContainer { width: auto; margin-right: 0 } .nowPlayingInfoControls { margin-top: 1em; max-width: 100% } .nowPlayingPageImage { width: auto; height: 36vh } } @media all and (orientation:portrait) and (max-width:40em) { .nowPlayingPageImage { height: 30vh } } .nowPlayingTime { display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 0 1em } .nowPlayingSecondaryButtons { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center } @media all and (min-width:50em) { .nowPlayingSecondaryButtons { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end } } @media all and (min-width:80em) { .nowPlayingPageImageContainer { margin-right: .75em } } .nowPlayingNavButtonContainer { width: 30em } .smallBackdropPosterItem .cardOverlayInner>div { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden } .playlistIndexIndicatorImage { -webkit-background-size: initial initial !important; background-size: initial !important; background-image: url(images/ani_equalizer_white.gif) !important } .hideVideoButtons .videoButton { display: none } .nowPlayingVolumeSliderContainer { width: 6em } @media all and (max-width:34em) { .btnNowPlayingFastForward, .btnNowPlayingRewind, .playlist .listItemMediaInfo { display: none !important } }