/* Variables that are overwritten in the theme specific vars and settings files */
/* --- */
.mychannels {
  /**
  * Simple reset of element margin and padding
  */
  /* HTML5 display-role reset for older browsers */
}

.mychannels html,
.mychannels body,
.mychannels object,
.mychannels iframe,
.mychannels h1,
.mychannels h2,
.mychannels h3,
.mychannels h6,
.mychannels p,
.mychannels a,
.mychannels img,
.mychannels q,
.mychannels s,
.mychannels small,
.mychannels strong,
.mychannels var,
.mychannels u,
.mychannels center,
.mychannels ul,
.mychannels li,
.mychannels form,
.mychannels label,
.mychannels article,
.mychannels aside,
.mychannels details,
.mychannels figure,
.mychannels figcaption,
.mychannels footer,
.mychannels header,
.mychannels menu,
.mychannels nav,
.mychannels section,
.mychannels time,
.mychannels video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: baseline;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.mychannels hr {
  margin: 0;
  padding: 0;
}

.mychannels article,
.mychannels aside,
.mychannels details,
.mychannels figcaption,
.mychannels figure,
.mychannels footer,
.mychannels header,
.mychannels main,
.mychannels menu,
.mychannels nav,
.mychannels section {
  display: block;
}

.mychannels body {
  line-height: 1;
}


.mychannels ul {
  list-style: none;
}


.mychannels q {
  quotes: none;
}


.mychannels q:before,
.mychannels q:after {
  content: "";
  content: none;
}

.mychannels svg {
  vertical-align: baseline;
}

.mychannels .button,
.mychannels input[type=button],
.mychannels input[type=submit] {
  height: auto;
  line-height: normal;
}

.mychannels {
  position: relative;
  /* disable subtitles of the popcorn and use builtin VTT */
}

.mychannels .mychannels-video__time-indicator {
  font-family: inherit;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

@keyframes mychannelsFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mychannelsFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.mychannels .mychannels-inline-playlist {
  max-width: 1024px;
  border-radius: 5px;
  background: #f6f6f6;
  overflow: hidden;
  color: #222;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
}

.mychannels .mychannels-inline-playlist__video {
  position: relative;
  padding-top: 56.25%;
}

.mychannels .mychannels-inline-playlist__player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.mychannels .mychannels-inline-playlist__content {
  padding-top: 15px;
  padding-right: 15px;
  padding-left: 15px;
}

.mychannels .mychannels-inline-playlist__title {
  font-family: Stag, Georgia, Cambria, Times New Roman, Times, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1428571429;
  margin: 0 0 10px 0;
  padding: 0;
}

.mychannels .mychannels-inline-playlist__description {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2352941176;
  overflow: hidden;
}

.mychannels .mychannels-inline-playlist__divider {
  margin-top: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.mychannels .mychannels-inline-playlist__list {
  position: relative;
  z-index: 0;
}

.mychannels .mychannels-inline-playlist__list-control {
  display: none;
  position: absolute;
  opacity: 0;
  z-index: 1;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  width: 50px;
  height: 80px;
  background: #1313f1;
  border: none;
  outline: 0;
  cursor: pointer;
  transition: opacity 0.35s ease;
}

.mychannels .mychannels-inline-playlist__list-control--is-visible {
  opacity: 1;
}

.mychannels .mychannels-inline-playlist__list-control svg {
  height: 60px;
  fill: #fff;
}

.mychannels .mychannels-inline-playlist__list-control--previous {
  left: 0;
}

.mychannels .mychannels-inline-playlist__list-control--previous svg {
  transform: rotate(-90deg);
}

.mychannels .mychannels-inline-playlist__list-control--next {
  right: 0;
}

.mychannels .mychannels-inline-playlist__list-control--next svg {
  transform: rotate(90deg);
}

.mychannels .mychannels-inline-playlist__items {
  display: flex;
  z-index: 0;
  overflow-x: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

.mychannels .mychannels-inline-playlist__item {
  position: relative;
  min-width: 40%;
  margin-left: 15px;
}

.mychannels .mychannels-inline-playlist__item:last-child {
  margin-right: 15px;
}

.mychannels .mychannels-inline-playlist__item--is-selected::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -100%, 0);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid rgba(0, 0, 0, 0.75);
}

.mychannels .mychannels-inline-playlist__item--is-selected .mychannels-inline-playlist__visual::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
}

.mychannels .mychannels-inline-playlist__item--is-selected .mychannels-inline-playlist__label {
  display: block;
}

.mychannels .mychannels-inline-playlist__item--is-selected .mychannels-inline-playlist__item-time,
.mychannels .mychannels-inline-playlist__item--is-selected .mychannels-inline-playlist__item-title {
  opacity: 0.5;
}

.mychannels .mychannels-inline-playlist__pressable {
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  text-align: left;
}

.mychannels .mychannels-inline-playlist__visual {
  position: relative;
  padding-top: 75%;
  overflow: hidden;
}

.mychannels .mychannels-inline-playlist__label {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #1313f1;
  color: #fff;
  padding: 6px 18px;
  border-radius: 5px;
  z-index: 1;
  font-family: Stag, Georgia, Cambria, Times New Roman, Times, serif;
  font-weight: 500;
  font-size: 17px;
}

.mychannels .mychannels-inline-playlist__item-title {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2352941176;
  height: 63px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Stag, Georgia, Cambria, Times New Roman, Times, serif;
  font-weight: 500;
  font-size: 17px;
}

.mychannels .mychannels-inline-playlist__item-time {
  font-family: Stag, Georgia, Cambria, Times New Roman, Times, serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2352941176;
}

.mychannels .mychannels-inline-playlist__thumbnail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.mychannels .mychannels-inline-playlist__banner {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mychannels .mychannels-inline-playlist__banner svg {
  vertical-align: top;
}

.mychannels .mychannels-inline-playlist__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  height: 50px;
  width: 50px;
}

.mychannels .mychannels-inline-playlist__play .mychannels__playbutton {
  transform: scale(1.1);
}

.mychannels .mychannels-inline-playlist__play .mychannels__playbutton .mychannels__playbutton_arrow {
  fill: #fff;
}

.mychannels .mychannels-inline-playlist__play .mychannels__playbutton .mychannels__playbutton_circle {
  fill: #1313f1;
}

.mychannels .mychannels-inline-playlist--sm .mychannels-inline-playlist__list-control {
  display: block;
}

.mychannels .mychannels-inline-playlist--md .mychannels-inline-playlist__title {
  font-size: 28px;
}

.mychannels .mychannels-inline-playlist--md .mychannels-inline-playlist__item {
  min-width: 26.6666666667%;
}

@keyframes mychannelsFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mychannelsFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.mychannels .pe__container__player ::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  line-height: 1.5;
}

@media screen and (max-width: 576px) {
  .mychannels .pe__container__player ::cue {
    /* fluid font size for subtitles when on small screen
     https://css-tricks.com/snippets/css/fluid-typography/ */
    font-size: calc(17px + 6 * (100vw - 576px) / 680);
  }
}

.mychannels .pe__container__subtitles {
  display: none;
}

.mychannels .pui__root .pui__icon {
  font-family: "player-ui-icons-rounded";
}

.mychannels .pui__root .pui__startplay {
  background: #1313f1;
}

.mychannels .pui__root .pui__overlay__title__wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  height: 100px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

.mychannels .pui__root .pui__overlay__title {
  transition: all 0.15s ease;
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  display: -webkit-box;
  max-width: calc(100% - 9em);
  font-family: Stag, Georgia, Cambria, Times New Roman, Times, serif;
  font-size: 22px;
  max-height: 52px;
  line-height: 1.1818181818;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mychannels .pui__root .pui__startplay {
  /*
   * By default we disable startplay, cause own overlay is used
   * 'Skins' can enable by using 'flex' and disable overlay if needed
   */
  display: none;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  transform: scale(1.25);
}

.mychannels .pui__root .pui__overlay__playbutton_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mychannels .pui__root .pui__overlay__playbutton_wrapper .mychannels__playbutton {
  height: 60px;
  width: 60px;
  transform: scale(1);
  transition: transform 0.35s;
}

.mychannels .pui__root .pui__overlay__playbutton_wrapper .mychannels__playbutton .mychannels__playbutton_arrow {
  fill: #fff;
}

.mychannels .pui__root .pui__overlay__playbutton_wrapper .mychannels__playbutton .mychannels__playbutton_circle {
  fill: #1313f1;
}

@media (max-width: 767px) {
  .mychannels .pui__root .pui__overlay__title {
    max-width: calc(100% - 6em);
    font-size: 15px;
    max-height: 41.25px;
  }
}

.mychannels .pui__root {
  font-family: StagSans, Arial, Helvetica Neue, Helvetica, "sans-serif";
}