body {
  color: var(--pls-font-color, #fff);
  /* DA-BUG-4E/5E: Use .env PLS_PRIMARY_FONT_FAMILY → CSS var set by applyNetworkTheme */
  font-family: var(--pls-font-family, Optima, 'Source Sans Pro', sans-serif);
  /* DA-BUG-4D/5D: doubled default font-size */
  font-size: var(--pls-font-size, 140%);
  font-style: var(--pls-font-style, normal);
  font-weight: var(--pls-font-weight, 400);
  z-index: 10;
}
/*CMW*/
#mobileSearchField{
  background-color: #fff;
  width: 100%;
  height: 40px;
  z-index: 1000;
  left:22% !important;
}
.mobileSearch input[type=search]{
    padding: 12px 20px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#mobileSearchFieldMessage {
  background-color: #999;
    color: white;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1000;
}
/*CMW*/
#remoteDataBody{
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 92%; /*!Important!*/
  margin-bottom: 50px;
  padding-bottom: 60px; /* DA-BUG-5F: ensure last item is reachable */
}
div.marquee {
    white-space: nowrap;
    overflow: hidden;
    /* DA-BUG-5I: ticker sits below controls, above channel list */
    margin: 6px 0;
}
div.marquee > div.marquee-text {
    white-space: nowrap;
    display: inline;
    width: auto;
}
/* option 2 */
.backgroundGradient{
  background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 69%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.4) 81%, rgba(0,0,0,0.4) 91%, rgba(0,0,0,0.2) 92%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,0,0,0.7)), color-stop(65%,rgba(0,0,0,0.7)), color-stop(66%,rgba(0,0,0,0)), color-stop(69%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,0.6)), color-stop(80%,rgba(0,0,0,0.6)), color-stop(81%,rgba(0,0,0,0.4)), color-stop(91%,rgba(0,0,0,0.4)), color-stop(92%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 65%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.4) 81%,rgba(0,0,0,0.4) 91%,rgba(0,0,0,0.2) 92%,rgba(0,0,0,0.2) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(45deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 65%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.4) 81%,rgba(0,0,0,0.4) 91%,rgba(0,0,0,0.2) 92%,rgba(0,0,0,0.2) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(45deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 65%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.4) 81%,rgba(0,0,0,0.4) 91%,rgba(0,0,0,0.2) 92%,rgba(0,0,0,0.2) 100%); /* IE10+ */
  background: linear-gradient(45deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 65%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.4) 81%,rgba(0,0,0,0.4) 91%,rgba(0,0,0,0.2) 92%,rgba(0,0,0,0.2) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#33000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.container a {font-size: 32px;}

/* -------------------------------------------------------
   DA-BUG-4C: Remote home — center control pad, larger buttons
   ------------------------------------------------------- */
.remote-home-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 65vh;
}

/* DA-BUG-4B: Connection indicator above control pad */
.connection-indicator {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 14px;
  color: var(--pls-font-color, #fff);
}

#remote_box{
  /* DA-BUG-4C: responsive sizing — 90vw on phones, max 420px */
  width: min(90vw, 420px);
  height: min(90vw, 420px);
  background-image: url("/img/remote/remote_button_inset.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto;
}

#top_row{
  padding-top: 5em;
  padding-bottom: 5px;
  text-align: center;
}
#middle_row{
  text-align: center;
}
#bottom_row{
  text-align: center;
  padding-top: 5px;
}

/* DA-BUG-4C: enlarged enter/arrow buttons */
#remote_enter img{
  width: 5.5em;
  height: 5.5em;
}
#remote_oval{
  background-image: url("/img/remote/remote_oval.png");
  background-size: 100% 100%;
  height: 6em;
  width: 11em;
  display: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.remote_wide_button img{
  width: 5.5em;
  height: 4em;
}
.remote_high_button img{
  width: 4em;
  height: 5.5em;
}

/* DA-BUG-4C: action links below control pad */
.remote-action-links {
  text-align: center;
  width: 90%;
  margin: 18px auto 0;
}
.remote-action-links a {
  display: block;
  margin: 10px auto;
  width: 90%;
  font-size: 1.2em;
  padding: 6px 0;
  text-align: center;
}

#remote_logo, #remote_guide, #network_link{
  position: absolute;
  text-align: center;
  width: 100%;
  margin-bottom: 28%;
}
#remote_logo{
  bottom: 5%;
}
#remote_logo img{
  max-width: 90%;
}
#remote_guide{
  bottom: 2%;
  font-size: 3.2em;
  margin: 0 5%;
  width: 80vw;
  color:white;
}
#fullbutton { display: none; }
#logo_remote {
  position: absolute;
  bottom: 0px;
}
#titleContainer{
  padding: 0 4%;
}
#titleRemoteContainer{
  padding: 0 4%;
}

/* DA-BUG-4D: doubled font sizes for titles */
#networkTitle {
  font-family: var(--pls-font-family, Optima, 'Source Sans Pro', sans-serif);
  font-weight: var(--pls-font-weight, 600);
  color: var(--pls-font-color, #fff);
  font-size: 1.6em;
  text-align: center;
  display: contents;
  align-items: center;
}
#channelRemoteTitle, #channelRemoteDataTitle {
  font-family: var(--pls-font-family, Optima, 'Source Sans Pro', sans-serif);
  font-weight: var(--pls-font-weight, 300);
  color: var(--pls-font-color, #fff);
  font-size: 1.1em;
  text-align: right;
  width: 100vh;
  left: 16%;

}

.logo_data_mobile, .logo_mobile_remote{
    
    margin-top: 1%;
    display: inline-flex;
    background: white;
    margin-right: 20px;
    align-items: center;

}

#network_link{
  bottom: 15%;
  color: var(--pls-font-color, #fff);
  font-size: 3.2em;
  text-decoration: none;
  display: block;
  margin: 0 5%;
  width: 80vw;
  
}
#remote_table {position: relative; top: 0px; left: 0px; height:100%; overflow:auto}
#thumbnail {width: 100%;}
.premium{
  text-align: center;
  font-size: 1.25em;
  color: #F6CB32;
  display: none;
  text-decoration: none;
}

.titleRemoteContainer{
    width: 100%;
    height: 100%;
    align-items: center;

}
/* -------------------------------------------------------
   DA-BUG-5: Remote Data (now-playing + channel list) controls
   ------------------------------------------------------- */

/* DA-BUG-5C: video control buttons enlarged, centered */
.remote-data-controls {
  width: 100%;
  margin: 8px 0;
}
.remote-control-table {
  width: 100%;
  table-layout: fixed;
}
.remote-ctrl-img {
  width: 2.5em;
  height: 2.5em;
}

/* DA-BUG-5C/5D/5E: channel buttons — block layout (no position:absolute), .env colors,
   taller for fat-finger tap targets */
.remote-channel-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.7em 0.7em 0.7em 22%;
  margin: 4px 0;
  position: relative;
  font-family: var(--pls-font-family, Optima, 'Source Sans Pro', sans-serif);
  font-size: 2em;
  font-weight: var(--pls-font-weight, 600);
  color: var(--pls-font-color, #fff);
  text-align: left;
  text-decoration: none;
  min-height: 2.8em;
  line-height: 2em;
  /* DA-BUG-5E: channel button background and border from .env via CSS vars */
  background-color: var(--pls-guide-channel-button-background-color, rgba(0, 0, 0, 0.5));
  border-left: var(--pls-guide-channel-button-border-left, 9px solid rgba(0, 0, 0, 0.65));
}
.remote-channel-logo {
  min-width: 32px;
  max-width: 36px;
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 5px;
}

/* DA-BUG-5G: Guide button — full-width, not position:absolute */
.remote-guide-btn {
  display: block;
  text-align: center;
  width: 99%;
  margin: 10px auto;
  padding: 8px 0;
  font-size: 3.2em;
  text-decoration: none;
  color:white;
  font-weight:600;
}

@-ms-viewport{
width: 320px;
}
@media (min-width: 480px) and (max-width: 480px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}