/*CSS for specific kinds of elements*/
span {
  margin: auto;
}
table {
  border-spacing: 0;
}
th, td {
  padding: 0;
}

/*CSS for overarching elements*/
html {
  height: 100%;
  background-color: black;
}
body {
  height: 100%;
  margin: 0;
  overflow-y: hidden;
}
div.container.text-center {
  height: 100%;
}
#wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#wrapper.schedule {
  flex-direction: row;
}

/*CSS for Video Area*/
#video-area {
  display: flex;
  flex-grow: 2;
  height: 0;
}
#video-area.schedule {
  height: 100%;
  flex-grow: 1;
}
#video-area.schedule.hidden {
  display: none;
}
#video-section {
  display: flex;
  flex-grow: 2;
  width: 0;
}
.video-display {
  flex-grow: 2;
  max-width: 100%;
  width: 0;
}
.video-display.full {
  width: 100%;
  height: 100%;
}
#video-sidebar {
  flex-grow: 1;
  width: 0;
  overflow-y: scroll;
}

/*CSS for Sidebar*/
.video-agenda-link {
  display: block;
}

/*CSS for Info Bar*/
#info-bar {
  display: flex;
}
#video-info {
  overflow: auto;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-grow: 2;
  width: 0;
  padding: 3px 0 3px 0;
}
#video-info-title {
  margin: auto auto auto 1em;
}
#video-info-logo {
  flex-grow: 0;
  max-height: 49px;
  width: auto;
  height: auto;
  display: inline-block;
  margin: auto 5px auto 5px;
}
label.shareLabel {
  margin-top: 1em;
  margin-bottom: 0.3em;
  display: block;
}
label.shareInnerLabel {
  margin: 0 0.5em;
}
#shareModalDirect,
#shareModalOld,
#shareModalEmbed {
  display: flex;
}
input.shareText {
  flex-grow: 1;
}
.SocialMediaShareButton {
  display: inline-block;
  margin: auto 3px;
}
.socialIcon {
  width: 32px;
  height: 32px;
  margin: auto;
}
#browsing-menu {
  flex-grow: 1;
  width: 0;
  display: inline-flex;
  flex-direction: column;
  min-width: 17.4em;
}
#browsing-menu-button-section {
  overflow:auto;
  display:flex;
  align-items:stretch;
  flex-direction:row;
  flex-grow: 1;
}
.browsing-menu-button {
  display: inline-flex;
  width: 100px;
  flex-grow: 2;
  padding: 0 2px 0 2px;
}
.browsing-menu-button > span {
  margin-top: 5px;
  margin-bottom: 5px;
}
#browsing-menu-search {
  display: flex;
}
#browsing-menu-search > input {
  flex-grow: 1;
  width: 0;
}
#browsing-menu-search > Button {
  flex-shrink: 0;
}
#search-button-icon {
  height: 1em;
  width: auto;
}

/*CSS for Browsing Section*/
#browsing-section {
  height: 40%;
  display: flex;
  flex-direction: column;
  position: relative;
}
#browsing-section-hidden {
  display: none;
}
#browsing-spinner {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
}
#browsing-spinner.hidden {
  display: none;
}
#browsing-section.schedule {
  height: 100%;
  flex-grow: 1;
  min-width: 26.4em;
  width: 0;
}
#browsing-section-hidden.schedule {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  flex-grow: 1;
  min-width: 26.4em;
  width: 0;
}
#schedembedBackButton,
#backButton {
  display: inline-block;
  padding: 0.5em;
  padding-right: 0;
  width: 1.2em;
}
#browsing-label-area {
  position: relative;
}
#browsing-label {
  display: inline-block;
  padding: 0.5em;
}
#browsing-hide-button {
  flex-grow: 1;
}
#browsing-items-container {
  overflow-y: auto;
  height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#browsing-items {
  flex-grow: 1;
}
.browsing-item {
  width: 120px;
  padding: 11.5px;
  display: inline-block;
  vertical-align: top;
}
.browsing-item-icon {
  max-width: 120px;
  max-height: 67.5px;
  width: auto;
  height: auto;
}
.browsing-item-icon-container {
  width:120px;
  height:67.5px;
  margin-bottom: 0.25em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.browsing-item-title,
.browsing-item-description {
  margin: 0;
}
.browsing-item-description {
  font-size: 0.75em;
}
.browsing-item-info-button {
  float: right;
}
#info-thumb-container {
  width: 240px;
  height: 135px;
  position: relative;
  margin-right: 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#info-thumb {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}
#info-thumb-cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  visibility: hidden;
}
#info-thumb-container:hover > #info-thumb-cover {
  visibility: visible;
}
#info-thumb-cover-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#info-modal-section-wrapper {
  display: flex;
  flex-direction: row;
}
.info-row {
  display: table-row;
}
.info-text {
  display: table-cell;
  padding: 0.5em;
  padding-top: 0;
}
#info-modal-section-table {
  flex-shrink: 1;
}
.info-modal-section {
  white-space: normal;
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
  vertical-align: top;
  flex-shrink: 2;
}
@media(max-width: 750px) {
  #info-modal-section-wrapper {
    flex-direction: column;
  }
  .info-modal-section {
    margin: 0;
  }
  #info-modal-section-table {
    margin-top: 1em;
  }
}
#live-table {
  width: 100%;
  table-layout: fixed;
  text-overflow: ellipsis;
}
.live-item {
  position: relative;
  padding-left: 4px;
}
.plusButton {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  line-height: 1em;
  margin: 0;
  padding: 0;
}
.live-time-item {
  max-width: 0;
  width: 7.69%;
}
.live-date-item {
  white-space: nowrap;
}
.live-date-item > span {
  display: inline-block;
  width: calc(100% - 1em);
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-date-item.single > span {
  width: calc(100% - 2em);
}
#live-schedule-scale {
  padding-left: 5px;
  padding-top: 5px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal.show {
  display: block;
}
.modalContent {
  margin: 15% auto;
  padding: 20px;
  border: 1px solid;
  width: 80%;
}
.modalCloseButton {
  float: right;
}
.modalContent.infoModal {
  min-height: 135px;
}
/*
#live-date-picker {
  display: flex;
  width: calc(100% - 1px - 6em);
  margin-left: 6em;
}
.live-row {
  display: inline-flex;
  width: calc(100% - 1px - 6em)
}
.live-row-label {
  display: inline-block;
  width: 6em;
  height: 6em;
  vertical-align: top;
}
.live-item {
  display: inline-block;
  border: black 1px solid;
  border-right: 0px;
  overflow: hidden;
  height: 6em;
}
.live-date-item {
  display: inline-block;
  border: black 1px solid;
  height: 1em;
  flex-grow: 1;
  text-align: center;
  overflow: hidden;
}
.live-time-item {
  display: inline-block;
  border: black 1px solid;
  width: 0;
  height: 1em;
  flex-grow: 1;
  text-align: center;
  overflow: hidden;
}
*/
.arrowButton {
  margin: 0;
  padding: 0;
}

/*???*/
.top-menu-bar {
  display: inline-flex;
  flex-grow: 1;
}
.top-menu-bar > span {
  flex-grow: 1;
  display: inline-flex;
}
.top-menu-bar > span > input {
  flex-grow: 1;
}
.sidebar-item-text {
  display: inline-block;
  width: calc(100% - 90px);
  height: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-item-text > span:nth-of-type(2){
  font-size: 0.75em;
}
.sidebar-item-text > span:nth-of-type(3){
  font-size: 0.625em;
}
.paginatorDiv {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.paginatorDiv > button {
  width: 32px;
  height: 32px;
}

/* LIST SCHEDULE ******************************************/

#listwrapper {
  display: flex;
  flex-grow: 1;
  height: 0;
}

/*Sidebar*/
#channelTabs {
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0.2em;
  overflow-y: auto;
  max-width: 7.5em;
}

.channelTab {
  margin-bottom: 0.33em;
  text-align: center;
}

.channelTab > p {
  margin: 0.33em 0;
}

.channelThumb {
  width: 100%;
}

/*Main Container*/
#scheduleContainer {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  flex-grow: 1;
  width: 0;
}

#header,
#searchBar,
#scheduleHeader {
  flex-shrink: 0;
}

#chanHeader {
  text-align: left;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  display: inline-flex
}

#dateHeader {
  text-align: right;
  margin: auto 0.5em auto 0;
  display: inline-block;
}

#chanLabel {
  margin-left: 0.5em;
  margin-right: 0.67em;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#playText {
  margin: 0;
}

#listPlayButton {
  vertical-align: middle;
  padding: 0.33em;
}

#searchBar {
  display: flex;
  padding: 2px;
}

#searchBarInput {
  flex-grow: 1;
}

#searchBarButton {
  height: 1.5em;
}

#scheduleHeader {
  padding-bottom: 0.33em;
  padding-top: 0.33em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
}

#scheduleBackButton,
#scheduleForwardButton {
  padding: 0;
  vertical-align: middle;
  padding-bottom: 0.2em;
  width: 1em;
}

#scheduleButtonPlaceholder {
  display: inline-block;
  width: 1em;
}

#scheduleHeaderLabel {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
  margin-right: 0.5em;
  width: 11em;
  text-align: center;
}

#scheduleHeaderLabel.schedule {
  width: 7.5em;
}

#schedule {
  width: 100%;
  overflow-y: auto;
  flex-grow: 1;
}

.scheduleItem {
  display: table-row;
}

.scheduleItemName,
.scheduleItemStart,
.scheduleItemEnd,
.scheduleItemClass {
  display: table-cell;
  padding: 3px 0.5em;
}

.scheduleItemName {
  width: 99%;
}

.scheduleItemStart,
.scheduleItemEnd,
.scheduleItemClass {
  white-space: nowrap;
}

@media(max-width:599px) {
  #info-bar {
    flex-direction: column;
  }
  #video-info,
  #browsing-menu {
    width: initial;
  }
  .browsing-menu-button {
    width: 80px;
  }
  .browsing-menu-button > span {
    font-size: initial;
  }
  #browsing-section {
    flex-grow: 1;
  }
  #browsing-section-hidden.schedule {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    flex-grow: 1;
    min-width: 26.4em;
    width: 0;
  }
  #video-area.hidden {
    display: none;
  }
  #listwrapper {
    width: 100%;
    flex-direction: column;
  }
  #channelTabs {
    white-space: nowrap;
    overflow-y: initial;
    overflow-x: auto;
    max-width: initial;
  }
  .channelTab {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0.33em;
  }
  .channelTab > p {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .channelThumb {
    display: none;
  }
  #playText {
    display: none;
  }
  #scheduleContainer {
    width: initial;
    height: 0;
  }
  #scheduleHeaderLabel {
    width: 7.5em;
  }
  #listPlayButton {
    padding-left: 0.67em;
    padding-right: 0.67em;
  }
}