.flex-container {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-color: #121212;
    color: #ffffff;
    padding-bottom: 1rem;
  }
  .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}

  .video-js {
    /* The base font size controls the size of everything, not just text.
       All dimensions use em-based sizes so that the scale along with the font size.
       Try increasing it to 15px and see what happens. */
    font-size: 14px;
    /* The main font color changes the ICON COLORS as well as the text */
    color: #ffffff;

    outline: none;
  }
  video {
    outline: none;
  }

  /* .video-js .vjs-menu-button-inline:hover,
  .video-js .vjs-menu-button-inline:focus,
  .video-js .vjs-menu-button-inline.vjs-slider-active,
  .video-js.vjs-no-flex .vjs-menu-button-inline {
    width: 8em;
    transition: none;
  } */

  .video-js .vjs-big-play-button {
    font-size: 3em;
    line-height: 3em;
    height: 3em;
    width: 3em;
    border: 0.06666em solid #fff;
    border-radius: 1.5em;
    left: 50%;
    top: 50%;
    transform: translateX(-1.5em) translateY(-1.5em);
    z-index: 1;
    background-color: #262626;
  }
  .vjs-big-play-button .vjs-icon-placeholder:before {
    font-size: 2.5em;
  }
  /* Show the BigPlayButton when video is paused */
  /* .vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block !important;
  } */

  .video-js .vjs-menu-button-inline {
    position: absolute;
    left: 0;
    bottom: 0;
    transition: none;
  }

  .video-js .vjs-menu-button-inline:before {
    width: 0;
  }

  .vjs-menu-button-inline .vjs-menu {
    left: 0;
  }

  .video-js .vjs-volume-panel .vjs-volume-control {
    opacity: 1;
  }
  .video-js .vjs-volume-menu-button {
    width: 8em;
  }
  .video-js .vjs-volume-menu-button .vjs-menu-content:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .video-js .vjs-volume-menu-button .vjs-menu-content .vjs-volume-bar {
    display: inline-block;
    vertical-align: middle;
  }
  .video-js .vjs-mute-control {
    display: none;
  }
  .video-js .vjs-volume-panel {
    transform: none;
    position: absolute;
    left: 1em;
    top: calc(50% - .15em);
  }
  .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
    transition: none;
    width: 5em;
    height: auto;
  }

  .video-js .vjs-control.vjs-play-control {
    position: absolute;
    left: calc(50% - 2em);
    outline: none;
  }

  .video-js .vjs-control-bar {
    /* IE8 - has no alpha support */
    background-color: #262626;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: transparent;

    background-position-y: -2em;
  }

  .video-js .vjs-control-bar {
    justify-content: flex-end;
    background-color: transparent;
    width: auto;
    left: 0.5em;
    right: 0.5em;
    bottom: 0;
    border-radius: 0;
    z-index: 1;
  }
  .video-js .vjs-control-bar:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 6em;
    top: -3em;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.025), rgba(0,0,0,0.65));
    z-index: -1;
  }
  .video-js .vjs-control-bar:hover .vjs-progress-control {
    opacity: 1;
    top: -2em;
  }
  .video-js .vjs-control-bar .vjs-menu {
    z-index: 2;
    /* height: 100%; */
    position: relative;
  }

  .video-js.vjs-fullscreen .vjs-control-bar {
    bottom: 1em;
  }

  .video-js .vjs-next-btn,
  .video-js .vjs-back-btn {
    position: absolute;
    left: calc(50% - 6em);
    top: 0;
    z-index: 1;
    outline: none;
  }
  .video-js .vjs-next-btn {
    left: calc(50% + 2em);
  }
  .video-js .vjs-back-btn .vjs-icon-placeholder,
  .video-js .vjs-next-btn .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .video-js .vjs-back-btn .vjs-icon-placeholder:before {
    content: '';
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODUiIHZpZXdCb3g9IjAgMCA4MCA4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+MTBzIGJhY2s8L3RpdGxlPjxwYXRoIGQ9Ik0xNS4xOTcgMTQuNDc4bDMuMjY4IDEuNzUzQzkuNDk1IDIyLjc5IDMuNjYyIDMzLjM4OCAzLjY2MiA0NS4zNTNjMCAxOS45MTMgMTYuMTQzIDM2LjA1NiAzNi4wNTYgMzYuMDU2IDE5LjkxNCAwIDM2LjA1Ny0xNi4xNDMgMzYuMDU3LTM2LjA1NiAwLTE4LjI0LTEzLjU0Ny0zMy4zMDgtMzEuMTI3LTM1LjcxM3Y0Ljg2N3MuMDA4Ljk2OC0uMzA1IDEuMTAzYy0uNDI1LjE4My0xLjA0LS4yMjQtMS4wNC0uMjI0TDMxLjQyOCA5LjA1cy0uODE4LS4zODctLjgxOC0uNzRjMC0uNDIzLjgxNi0uNzk4LjgxNi0uNzk4TDQzLjYuODk4cy4zNjgtLjI2NC43NzItLjA0OGMuMjkuMTU0LjI3Ni44MjMuMjc2LjgyM1Y2LjI0YzE5LjQ1IDIuNDI2IDM0LjUwNyAxOS4wMDMgMzQuNTA3IDM5LjExMiAwIDIxLjc4LTE3LjY1NiAzOS40MzctMzkuNDM3IDM5LjQzN0MxNy45MzggODQuNzkuMjgyIDY3LjEzLjI4MiA0NS4zNWMwLTEyLjUxIDUuODMtMjMuNjUgMTQuOTE1LTMwLjg3NCIgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
  }
  .video-js .vjs-next-btn .vjs-icon-placeholder:before {
    content: '';
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODUiIHZpZXdCb3g9IjAgMCA4MCA4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+MTBzIGZvcndhcmQ8L3RpdGxlPjxwYXRoIGQ9Ik02NC4yNCAxNC40NzhsLTMuMjcgMS43NTNjOC45NzMgNi41NiAxNC44MDUgMTcuMTU3IDE0LjgwNSAyOS4xMjIgMCAxOS45MTMtMTYuMTQzIDM2LjA1Ni0zNi4wNTcgMzYuMDU2LTE5LjkxMyAwLTM2LjA1Ni0xNi4xNDMtMzYuMDU2LTM2LjA1NiAwLTE4LjI0IDEzLjU0Ny0zMy4zMDggMzEuMTI3LTM1LjcxM3Y0Ljg2N3MtLjAxLjk2OC4zMDQgMS4xMDNjLjQyNS4xODMgMS4wNC0uMjI0IDEuMDQtLjIyNEw0OC4wMSA5LjA1cy44MTctLjM4Ny44MTctLjc0YzAtLjQyMy0uODE3LS43OTgtLjgxNy0uNzk4TDM1LjgzNy44OThzLS4zNy0uMjY0LS43NzItLjA0OGMtLjI5LjE1NC0uMjc2LjgyMy0uMjc2LjgyM1Y2LjI0QzE1LjMzNiA4LjY2NS4yOCAyNS4yNDIuMjggNDUuMzVjMCAyMS43OCAxNy42NTYgMzkuNDM3IDM5LjQzNiAzOS40MzdTNzkuMTU1IDY3LjEzIDc5LjE1NSA0NS4zNWMwLTEyLjUxLTUuODMtMjMuNjUtMTQuOTE1LTMwLjg3NCIgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
  }
  .video-js .vjs-next-btn > .vjs-control-text,
  .video-js .vjs-back-btn > .vjs-control-text {
    height: 100%;
    width: 100%;
    clip: unset;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-js .vjs-home-btn .vjs-icon-placeholder:before {
    font-family: FontAwesome;
    content: '"\f10d"';
  }
  .video-js .vjs-home-btn .vjs-icon-placeholder:before {
    font-family: FontAwesome;
    content: '\f015';
  }
  .video-js .vjs-latest-btn .vjs-icon-placeholder:before {
    content: 'L';
  }
  .video-js .vjs-share-btn .vjs-icon-placeholder:before {
    content: 'Share';
    font-size: 1.25em;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    border-radius: 4px;
    height: 2em;
    margin-top: .25em;
  }

.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: url('/images/arrows-angle-expand.svg');
    font-family: 'VideoJS';
}
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: url('/images/arrows-angle-contract.svg');
    font-family: 'VideoJS';
}

  .video-js .vjs-info-btn .vjs-icon-placeholder:before,
  .video-js .vjs-programmes-btn .vjs-icon-placeholder:before {
    content: 'Programmes';
    font-size: 1.25em;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    border-radius: 4px;
    height: 2em;
    margin-top: .25em;
  }
  .video-js .vjs-info-btn .vjs-icon-placeholder:before {
    content: 'Channel Info';
  }

  .video-js .vjs-current-time {
    display: block;
    position: absolute;
    left: 0;
    top: -2em;
  }

  /* Slider - used for Volume bar and Progress bar */
  .video-js .vjs-slider {
    background-color: #2e2e2e;
    background-color: rgba(46, 46, 46, 0.8);
    border-radius: 0;
    margin: 0;
  }

  .video-js .vjs-remaining-time {
    position: absolute;
    right: 0;
    top: -2em;
    text-align: right;
  }

  /* The slider bar color is used for the progress bar and the volume bar
     (the first two can be removed after a fix that's coming) */
  .video-js .vjs-volume-level,
  .video-js .vjs-play-progress,
  .video-js .vjs-slider-bar {
    background: #ffffff;
    border-radius: 0;
  }
  .video-js .vjs-play-progress {
    color: #ededed;
    background: #ededed;
  }
  .video-js .vjs-play-progress:before {
    transition: width .1s ease-out, height .1s ease-out;
    content: "";
    top: -0.2em;
    border: 0;
    background: radial-gradient(#ffffff 33%, #ededed);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-shadow: #000 0 0 2px;
  }
  .video-js .vjs-play-progress:hover:before {
    width: 1.1em;
    height: 1.1em;
    border: 1px solid transparent;
  }
  .video-js .vjs-progress-control {
    position: absolute;
    left: 4em;
    right: 4em;
    width: calc(100% - 8em);
    padding: 0;
    top: -2em;
    border-radius: 0;
    z-index: 0;
  }
  .video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1em;
  }
  .video-js .vjs-progress-control .vjs-mouse-display {
    background: #ffffff;
    font-size: 1em;
  }

  .video-js .vjs-time-tooltip {
    font-size: 1em;
  }
  .video-js .vjs-time-tooltip:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-top-color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.8);
    border-width: .8em;
    right: 25%;
    margin-left: -.8em;
  }

  .video-js .vjs-mouse-display .vjs-time-tooltip:before {
    border-top-color: #000000;
    border-top-color: rgba(0, 0, 0, 0.8);
  }

  .video-js .vjs-play-progress,
  .video-js .vjs-load-progress {
    height: 0.5em !important;
    border-radius: 0;
  }

  .video-js .vjs-progress-holder {
    height: 0.5em;
  }

  /* The main progress bar also has a bar that shows how much has been loaded. */
  .video-js .vjs-load-progress {
    /* For IE8 we'll lighten the color */
    background: #3a3a3a;
    /* Otherwise we'll rely on stacked opacities */
    background: rgba(46, 46, 46, 0.5);
    border-radius: 0;
    height: 0.5em !important;
  }

  /* The load progress bar also has internal divs that represent
     smaller disconnected loaded time ranges */
  .video-js .vjs-load-progress div {
    /* For IE8 we'll lighten the color */
    background: #3a3a3a;
    /* Otherwise we'll rely on stacked opacities */
    background: rgba(46, 46, 46, 0.75);
    border-radius: 0;
    height: 0.5em !important;
  }

  .vjs-loading-spinner {
    border: none;
    opacity: 0;
    visibility: hidden;
    animation: vjs-spinner-fade-out 2s linear 1;
    animation-delay: 2s;
  }
  .vjs-loading-spinner:before, .vjs-loading-spinner:after {
    border: none;
  }
  .vjs-loading-spinner:after {
    /* background-image: url(https://assets.nflxext.com/en_us/pages/wiplayer/site-spinner.png); */
    /* background-image: url(../images/spinner.svg);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%; */
    overflow: hidden;
    width:100%;
    height:100%;
    background: url(../images/refresh.png) no-repeat center center;
    background-size: 100%;
  }

  .vjs-seeking .vjs-loading-spinner:after,
  .vjs-waiting .vjs-loading-spinner:after {
    animation: vjs-spinner-spin 1.1s linear infinite, vjs-spinner-fade 1.1s linear 1 !important;
    animation-delay: 2s;
  }

  .vjs-seeking .vjs-loading-spinner,
  .vjs-waiting .vjs-loading-spinner {
    opacity: 1;
    visibility: visible;
    animation: vjs-spinner-fade-in 2s linear 1;
    animation-delay: 2s;
  }

  .video-js .vjs-play-control {
    align-self: center;
  }

  .video-js .vjs-captions-button {
    align-self: center;
    order: 9;
  }

  .video-js .vjs-fullscreen-control {
    align-self: flex-end;
    order: 10;
  }

  .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    margin-bottom: 1.30em;
    background-color: #2B333F;
  }

  .vjs-controls-disabled .vjs-big-play-button,
  .vjs-has-started .vjs-big-play-button,
  .vjs-using-native-controls .vjs-big-play-button,
  .vjs-error .vjs-big-play-button {
    display: none !important;
  }

  .video-js .vjs-watermark-content {
    max-width: 10vw;
  }
  .vjs-watermark-content img {
    width: 100%;
    height: auto;
  }
  .video-js .vjs-watermark-top-left {
    top: 1em;
    left: 1em;
  }

  /* ported from previous template */
  .player-container {
    position: relative;
    width: 70%;
    height: auto;
    float: left;
    padding: 1rem;
    background-color: #121212;
  }
  .embed-video {
    position: relative;
  }

  /* The side navigation menu */
  .vjs-sidenav {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    max-width: 30%;
    background: rgba(0, 0, 0, .7);
    transition: all 275ms cubic-bezier(0.5, 0.08, 0, 1);
    z-index: -1;
    visibility: hidden;
    -ms-overflow-style: none;
    overflow: auto;
  }

  .sidenav-open {
    overflow: auto;
    overflow: -moz-hidden-unscrollable;
    opacity: 1;
    visibility: visible;
    left: 0;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
  }

  .vjs-sidenav::-webkit-scrollbar {
    width: 0;
  }

  .vjs-sidenav::-webkit-scrollbar-track-piece {
    background-color: transparent;
    border-radius: 6px;
    -webkit-border-radius: 6px;
  }

  /* The navigation menu links */
  .guideinfo {
    background-color: black;
    width: 100%;
    text-align: center;
  }

  .channeltitlecaption {
    color: white;
    text-align: center;
    font-size: 1.5rem;
    padding: 1rem;
  }

  .channelschedule,
  .programmelist {
    padding: 0 10px;
  }

  /* .sidenav-channels>div>button:nth-child(odd) {
    background-color: rgb(128, 128, 128);
  }
   */
  .programmelist {
    margin: 0 auto;
    overflow-y: scroll;
    height: 100%;
  }

  .vjs-sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

  /* When you mouse over the navigation links, change their color */
  .vjs-sidenav a:hover {
    color: #f1f1f1;
  }

  /* Position and style the close button (top right corner) */
  .vjs-sidenav .closebtn {
    position: absolute;
    right: 0;
    z-index: 100;
    font-size: 32px;
    padding: 0px 14px;
    line-height: 30px;
    text-align: center;
  }

  /*
      Only show the infoheader after playback has begun and only when paused or when the user is
      interacting with the player.
    */
  .video-js.vjs-paused.vjs-has-started .vjs-infoheader,
  .video-js.vjs-user-active.vjs-has-started .vjs-infoheader {
      display: flex;
      /* animation: vjs-spinner-fade-in 2s linear 1;
      animation-delay: 2s; */
  }

  .vjs-infoheader {
    display: none;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #FFFFFF;
    padding: 1rem 0;
    text-align: center;
  }

  .infoheader-content {
    position: relative;
    width: 65%;
    margin: 0 auto;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    padding: 0 1rem;
    font-size: 18px;
  }

  .infoheader-content h1 {
    text-align: center;
    font-size: 1.5rem;
  }

  /*
      Only show the infoheader after playback has begun and only when paused or when the user is
      interacting with the player.
    */
    .video-js.vjs-paused.vjs-has-started .vjs-custom-buttons,
    .video-js.vjs-user-active.vjs-has-started .vjs-custom-buttons {
      display: block;
    }

  .vjs-company-panel,
  .vjs-info-panel,
  .vjs-share-panel {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(4em + 34px);
    z-index: 1;
  }

  .vjs-company-panel .video-overlay,
  .vjs-info-panel .video-overlay,
  .vjs-share-panel .video-overlay {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    overflow: hidden;
    color: #FFFFFF;
    padding: 1em;
    position: relative;
    width: 30vw;
    min-height: 30vh;
  }
  .vjs-company-panel .video-overlay,
  .vjs-info-panel .video-overlay {
    width: 65%;
    height: 95%;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
  }

  .vjs-share-panel .socialbtn-wrapper {
    padding: .5rem 1rem;
    display: flex;
    justify-content: space-evenly;
  }
  .video-overlay > .contact-number,
  .video-overlay > .web-link {
    display: block;
    padding: .5rem 0;
    color: white;
    font-size: medium;
  }

  .video-overlay address {
    font-size: medium;
    display: block;
    font-style: italic;
  }
  .info-panel-content h2 {
    text-align: center;
    font-size: x-large;
  }
  .info-panel-content .channel-description {
    padding: .5em 0;
    width: 100%;
    margin: 0 auto;
    text-align: justify;
    white-space: unset;
    font-size: medium;
    overflow: inherit;
  }
  .info-panel-content .img-panel {
    float: left;
    margin-right: .5rem;
  }
  .info-panel-content .address {
    padding: .5em 0;
    width: 100%;
    margin: 0 auto;
    text-align: justify;
    white-space: unset;
    font-size: medium;
  }

  .info-panel-content .img-panel a {
    display: inline-block;
    vertical-align: top;
    padding: .5rem;
  }

  .info-panel-content .img-panel a > img {
    max-height: 11vw;
    margin: 0 auto;
  }

  .socialbtn-wrapper .socialbtn {
    font-size: 2em;
    margin: 0;
    text-align: left;
  }

  .vjs-share-panel .embedshare {
    text-align: center;
    font-size: 1.2rem;
  }
  .vjs-share-panel .embedtext {
    color: #121212;
  }

  .video-js .close-button {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 1rem;
    height: 1rem;
    opacity: 1;
    margin: 0;
  }

  .video-js .close-button:hover {
    opacity: .6;
  }

  .video-js .close-button:before,
  .video-js .close-button:after {
    position: absolute;
    left: calc(1rem / 2 - 1px);
    content: ' ';
    height: calc(1rem + 1px);
    width: 2px;
    background-color: #fedd01;
    top: 0;
  }

  .video-js .close-button:before {
    transform: rotate(45deg);
  }

  .video-js .close-button:after {
    transform: rotate(-45deg);
  }

  .vjs-control.vjs-button {
    outline: none;
  }

  .vjs-icon-play:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before,
  .video-js .vjs-play-control .vjs-icon-placeholder:before {
    font-size: 3em;
    line-height: 1;
  }
  .video-js .vjs-company-btn {
    position: absolute;
    width: 8em;
    height: 2em;
    top: 1em;
    right: 1em;
    border: 1px solid white;
    border-radius: 4px;
    line-height: normal;
    font-size: 1.25em;
    /* background-image: linear-gradient(to bottom, rgba(0,0,0,0.025), rgba(0,0,0,0.65)); */
    background-color: rgba(0,0,0,0.035);
    z-index: 1;
    vertical-align: middle;
    padding: 0;
    outline: none;
  }
  .video-js .vjs-company-btn:hover {
    background-color: white;
    color: black;
  }

  .proglistcell {
    cursor: pointer;
    color: white;
    background-color: rgba(96, 96, 96, 0.9);
    position: relative;
    margin: .5rem 0;
    box-sizing: border-box;
  }

  .proglistcell.active {
    border: 2px solid #fedd01;
  }

  .playicon:after {
    font-family: "Font Awesome 5 Free";
    content: "\f04b" !important;
    font-weight: 900;
    display: block;
    position: absolute;
    font-size: 2rem;
    color: black;
  }

  .proglistcell .plduration {
    max-width: 384px;
    overflow: hidden;
    font-size: 1rem;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    padding: .25rem;
    z-index: 2;
  }

  .proglistcell img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }

  .plinner {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #7f7f7f;
    background: rgba(0, 0, 0, 0.4);
    font-size: 1em;
    width: 100%;
    padding: .25em;
  }

  .channels-menu-title {
    text-align: center;
    color: #FFFFFF;
    position: relative;
    max-width: 100%;
    background-color: black;
    border-bottom: solid 1px white;
    text-align: left;
    padding: 1rem;
    margin: 0;
  }

  .top-channel-title:hover,
  .top-channel-title:focus,
  .top-channel-title {
    color: white;
    text-decoration: none;
  }

  .back-button {
    margin-right: .5rem;
  }

  /* Scroll bar styling */
  .wb-scroll::-webkit-scrollbar {
    width: 10px;
    /* background-color: rgba(0,0,0,0.3); */
  }

  .wb-scroll::-webkit-scrollbar-thumb {
    background-color: #F5F5F5;
    border: 2px solid #555555;
  }

  .top-left-logo {
    position: absolute;
    text-align: center;
    top: 0;
    font-size: 3rem;
    vertical-align: middle;
  }

  .top-left-logo img {
    max-height: 3rem;
    display: inline-block;
  }

  .title-content {
    text-align: right;
    display: inline-block;
    width: 100%;
    font-size: 2rem;
  }

  .hero {
    height: auto;
    width: 15%;
    float: left;
    padding: 1rem;
    color: white;
    text-align: center;
    position: relative;
  }

  .hero > .description {
    margin-bottom: .5rem;
  }

  .programme-description {
    margin: .5rem 0;
    font-size: 1rem;
  }

  .watch-holder {
    text-align: center;
    position: relative;
  }

  .watch-channel {
    display: block;
    color: white;
    border-color: black;
    font-size: 1.2rem;
  }

  .fa-1 {
    font-size: 1em;
  }

  .btn-holder .btn,
  .video-js .player-btn {
    border: 1px solid white;
    border-radius: 2px;
    background-color: transparent;
    color: #fff;
    outline: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    text-decoration: none;
  }
  .btn-holder>.btn.service-btn {
    display: inline-block;
    background-color: #121212;
    font-size: 1.2rem;
    width: 100%;
    margin-bottom: 1rem;
  }

  .video-js .copy-btn {
    width: 30%;
    margin-right: 0;
    margin-left: 1rem;
    background-color: #000;
  }

  .vjs-home-btn.vjs-control.vjs-button,
  .vjs-latest-btn.vjs-control.vjs-button {
    width: 2em;
  }
  .vjs-share-btn.vjs-control.vjs-button {
    width: 4em;
  }

  .vjs-programmes-btn.vjs-control.vjs-button {
    position: absolute;
    left: calc(50% - 14em);
    width: 8em;
  }
  .vjs-info-btn.vjs-control.vjs-button {
    position: absolute;
    left: calc(50% + 6em);
    width: 8em;
  }

  .vjs-mobile-menu-button .vjs-icon-placeholder:before {
    font-family: FontAwesome;
    content: "\f0c9";
  }

  .container, .btns-holder {
    width: 100%
  }
  .btns-holder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: .5em;
  }
  .btn.info-btns {
    border: 1px solid white;
    border-radius: 2px;
    background-color: transparent;
    color: #fff;
    outline: none;
    font-size: 1em;
    min-width: 10em;
    flex-grow: 1;
  }

  .info-btns:hover {
    background-color: white;
    color: black;
  }

  .bottom-container {
    padding: 0 1% 0 1%;
  }

  @media (max-width: 992px) {
    .info-btns {
        width: 100%;
        margin: 0 10px;
    }
    .btns-holder > .info-btns:first-of-type {
        margin-bottom: .5em;
    }
  }

  @media (max-width: 808px) {
    .vjs-home-btn.vjs-control.vjs-button {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .vjs-control.vjs-button {
      font-size: small;
    }
    .vjs-infoheader {
      margin-top: 0;
    }
    .channel-title, .info-panel-content h2 {
      font-size: large;
    }
    .infoheader-content {
      width: 100%;
      border-radius: 0;
    }
    .infoheader-content h1 {
      margin-top: 0;
    }

    .vjs-share-panel .video-overlay {
      margin-top: 6em;
      width: inherit;
      padding: 0em;
    }
    .player-container,
    .hero,
    .right-section {
      width: 100% !important;
    }
    .bottom-container {
      width: 100% !important;
    }

    .textdisplay {
      font-size: 0.5em;
      white-space: initial;
      text-align: center;
    }
    .channeltitlecaption {
      font-size: 1rem;
    }
    .channeltitlecarousel {
      font-size: .8rem;
    }
    .player-container,
    .hero {
      width: 100% !important;
      padding: 1rem;
    }
    .hero > .description {
      margin-bottom: .5rem;
    }
    .hero > a {
      text-decoration: none;
      display: inline-block;
      margin-bottom: .5rem;
    }

    .btn-holder {
      position: relative !important;
      bottom: 0 !important;
    }

    .title-content {
      font-size: 1.5rem;
      text-align: center;
    }

    .top-left-logo {
      position: relative;
      font-size: 2rem;
    }
    .top-left-logo img {
      max-height: 2rem;
    }

    .vjs-next-btn.vjs-control.vjs-button,
    .vjs-back-btn.vjs-control.vjs-button {
      display: none;

    }
    .vjs-info-btn.vjs-control.vjs-button {
      left: calc(50% + 2em);
    }
    .vjs-programmes-btn.vjs-control.vjs-button {
      left: calc(50% - 10em);
    }
    .video-js .vjs-company-btn {
      width: 2em;
    }
  }
  @media(max-width: 700px) {
    .vjs-share-btn.vjs-control.vjs-button {
      display: none;
    }
  }
  @media(max-width: 580px) {
    .container-fluid>.row>div {
      padding: 0;
    }
    .player-container, .hero {
      padding: 1rem .5rem;
    }
    .vjs-control.vjs-button {
      font-size: smaller;
    }
    .video-js .vjs-info-btn .vjs-icon-placeholder:before {
      content: 'Info';
    }
    /* .vjs-info-btn.vjs-control.vjs-button {
      width: 4em;
    } */
    .vjs-company-panel .video-overlay,
    .vjs-info-panel .video-overlay,
    .vjs-share-panel .video-overla {
      width: 100%;
      height: auto;
      min-height: unset;
      padding: .5rem;
    }
    .channel-title, .info-panel-content h2 {
      font-size: small;
    }
    .info-panel-content .channel-description {
      font-size: smaller;
    }
  }

  @media(max-width: 460px) {
    .vjs-company-panel, .vjs-info-panel, .vjs-share-panel {
      bottom: 3em;
    }
    .vjs-latest-btn.vjs-control.vjs-button {
      display: none;
    }

    .video-js .vjs-control-bar>.vjs-info-btn,
    .video-js .vjs-control-bar>.vjs-programmes-btn,
    .video-js .vjs-control-bar>.vjs-share-btn {
      display: none !important;
    }

    .video-js .player-btn {
      font-size: 0.5em;
    }

    .vjs-custom-buttons {
      font-size: 1.2em;
    }

    .vjs-paused.vjs-has-started .vjs-big-play-button {
      display: none !important;
    }
    .vjs-infoheader {
      margin-top: 0;
    }
  }

  @media(max-width: 320px) {
    .vjs-info-btn.vjs-control.vjs-button {
      display: none;
    }
  }

  @keyframes vjs-spinner-fade-in {
    0% {
      opacity: 0;
      visibility: visible;
    }
    100% {
      opacity: 1;
      visibility: visible;
    }
  }
  @keyframes vjs-spinner-fade-out {
    0% {
      opacity: 1;
      visibility: visible;
    }
    100% {
      opacity: 0;
      visibility: visible;
    }
  }

  @keyframes vjs-spinner-spin {
    100% {
      -webkit-transform: rotate(-360deg);
              transform: rotate(-360deg); } }

  @-webkit-keyframes vjs-spinner-spin {
    100% {
      -webkit-transform: rotate(-360deg); } }