.tvGuideHeader, .tvguide { display: -webkit-box; display: -webkit-flex } .channelPrograms, .programContainer, .timeslotHeadersInner, .tvProgram { position: relative } .channelPrograms, .channelsContainer, .tvGuideHeader, .tvguide { -webkit-box-orient: vertical; -webkit-box-direction: normal } .guideChannelName, .guideChannelNumber, .guideProgramName, .guideProgramNameText { -o-text-overflow: ellipsis } .tvguide { display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: initial; -webkit-align-items: initial; align-items: initial } .tvGuideHeader { white-space: nowrap; width: 100%; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-shrink: 0; flex-shrink: 0; display: flex; contain: layout style paint } .layout-desktop .tvGuideHeader { margin-bottom: .5em } .guideHeaderDateSelection { font-size: 86%; padding: .4em 0 } .guide-headerTimeslots { display: -webkit-box; display: -webkit-flex; display: flex } .tvProgramSectionHeader { margin: 0 } .tvProgram { display: block; text-decoration: none; white-space: nowrap } .guideProgramIndicator { text-transform: uppercase; -webkit-border-radius: .25em; border-radius: .25em; margin-right: .5em; font-size: 82%; padding: .2em .25em; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; margin-left: 1em } .guide-channelTimeslotHeader { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center } .timeslotHeaders { white-space: nowrap; font-weight: 500; font-size: 120% } .programContainer { white-space: nowrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; contain: strict } .guideSpacer { width: .3em; -webkit-flex-shrink: 0; flex-shrink: 0 } .channelPrograms, .timeslotHeadersInner { width: 1800vw } @media all and (min-width:37.5em) { .channelPrograms, .timeslotHeadersInner { width: 1400vw } } @media all and (min-width:50em) { .channelPrograms, .timeslotHeadersInner { width: 1200vw } } @media all and (min-width:80em) { .channelPrograms, .timeslotHeadersInner { width: 810vw } } .timeslotHeader { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; text-indent: .25em; width: 2.0833333333333333333333333333333% } .guide-channelHeaderCell, .guide-channelTimeslotHeader, .programCell { color: inherit; cursor: pointer; vertical-align: middle; font-family: inherit; text-decoration: none; -webkit-box-align: center; text-align: left; overflow: hidden } .guide-channelHeaderCell, .guide-channelTimeslotHeader { padding: 0 !important; outline: 0 !important; width: 100%; font-size: inherit; -o-text-overflow: ellipsis; text-overflow: ellipsis; margin: 0 1px 0 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; contain: strict; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-border-radius: .12em; border-radius: .12em } .guide-channelHeaderCell { border-width: 1px 1px 1px 0; border-style: solid; width: 100%; height: 4.42em; contain: strict; position: relative; background: 0 0 } .guide-channelTimeslotHeader { border: 0 !important; border-right-color: transparent } .channelsContainer, .guide-channelTimeslotHeader { width: 24vw } @media all and (min-width:31.25em) { .channelsContainer, .guide-channelTimeslotHeader { width: 16vw } } @media all and (min-width:37.5em) { .channelsContainer, .guide-channelTimeslotHeader { width: 16vw } } @media all and (min-width:50em) { .channelsContainer, .guide-channelTimeslotHeader { width: 14vw } } @media all and (min-width:80em) { .channelsContainer, .guide-channelTimeslotHeader { width: 12vw } } .btnGuideViewSettings { margin: 0; -webkit-flex-shrink: 0; flex-shrink: 0 } .btnGuideViewSettingsIcon { font-size: 1.5em !important } .selectDateIcon { -webkit-flex-shrink: 0; flex-shrink: 0 } @media all and (max-width:50em) { .guideHdIcon, .liveTvProgram, .newTvProgram, .premiereTvProgram { display: none } } .channelPrograms, .programCell { border-style: solid; display: -webkit-box; display: -webkit-flex; contain: strict } .channelPrograms { white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; height: 4.42em; display: flex; -webkit-flex-direction: column; flex-direction: column; border-width: 1px 0 } .channelPrograms+.channelPrograms, .guide-channelHeaderCell+.guide-channelHeaderCell { margin-top: -1px } .channelPrograms-tv, .guide-channelHeaderCell-tv { height: 3em } .guide-channelTimeslotHeader, .timeslotHeader { background: 0 0 !important; height: 2.8em } .programGrid { padding-bottom: 4px; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1 } .programCell { background: 0 0; border-width: 0 0 0 1px; padding: 0 !important; width: 100%; font-size: inherit; position: absolute; top: 0; bottom: 0; display: flex; -webkit-align-items: center; align-items: center; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; margin: 0 !important } .channelsContainer, .guideProgramName, .programGrid { contain: layout style paint } .guide-programNameCaret, .guideProgramName { display: -webkit-box; display: -webkit-flex; -webkit-box-align: center } .guideProgramName { padding: 0 .7em; overflow: hidden; text-overflow: ellipsis; -webkit-align-items: center; align-items: center; display: flex; position: relative; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1 } .guide-programNameCaret { display: flex; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 200% } .guideProgramNameText { margin: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis } .guideProgramSecondaryInfo { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-top: .1em } .programIcon { margin-left: .5em; height: 1em; width: 1em; font-size: 1.6em; color: #ddd; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-box-flex: 0; -webkit-flex-grow: 0; flex-grow: 0 } .guide-programTextIcon { font-weight: 700; font-size: .9em; padding: .16em .3em; -webkit-border-radius: .25em; border-radius: .25em; margin-right: .35em; width: auto; height: auto } .guide-programTextIcon-tv { font-size: .74em } .guideChannelNumber { padding-left: 1em; max-width: 30%; text-overflow: ellipsis; overflow: hidden; font-weight: 400; margin: 0 } .guideChannelName { margin-left: auto; margin-right: 1em; text-overflow: ellipsis; overflow: hidden; max-width: 70% } .guideChannelImage { position: absolute; right: 8%; top: 15%; bottom: 15%; width: 40%; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; background-position: right center } @media all and (min-width:62.5em) { .guideChannelName { max-width: 40% } } @media all and (max-width:62.5em) { .guideChannelNumber { display: none } .guideChannelImage { width: 70% } } .channelsContainer { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-flex-direction: column; flex-direction: column } .guide-channelHeaderCell, .programCell { outline: 0 !important } .seriesTimerIcon, .timerIcon { color: #c33 !important } .seriesTimerIcon-inactive { color: inherit !important; opacity: .7 } .guideOptions { -webkit-flex-shrink: 0; flex-shrink: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center } @media all and (max-width:50em), all and (max-height:37.5em) { .tvGuideHeader { padding-left: 0 } } .guideRequiresUnlock { margin: 1em auto; text-align: center; padding: 1em; -webkit-flex-shrink: 0; flex-shrink: 0 } .noRubberBanding { padding-bottom: 7em } .guideDateTabsSlider { text-align: center } .guide-date-tab-button { padding: .3em .7em !important; margin: 0 .3em !important; font-weight: 400 } .guide-date-tab-button.emby-tab-button-active { border-color: transparent !important } .guide-date-tab-button.emby-button-tv:focus { -webkit-border-radius: .15em !important; border-radius: .15em !important; -webkit-transform: none !important; transform: none !important }