*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    /* font-family: 'poppins',sans-serif ; */
  }
 
  body {
    /* background-image: url('123.jpg'); */
    background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-bottom: 0px;
    margin-top: 0px;
}
  header{
    /* display: flex; */
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    /* background-color: transparent; */
    background-color: #0EA5E9;
    color: white;
    padding:5px 3px;
  }
  
  /* header nav a{
    color: white;
    margin-right: 220px;
    font-weight: 500;
  }
  */
  
  header div.sign-in-up button{
    background-color: #75cfb8;
    font-size: 16px;
    font-weight: 550;
    padding: 4px 33px;
    border: 2px solid #000;
    border-radius: 10px;
    outline: none;
    margin-left: 19px;
    cursor: pointer;
  }
  
  header div.sign-in-up button:last-child{
    background-color: #fa9579;
  }
  /* check whether this new code work or not */
  /* @media (min-width: 768px) {
  div.popup-container {
    width: 60%;
  }
} */
    /* above is the new code */
  div.popup-container{
    position: fixed;
    justify-content: center;
    /* top:0%;
    left:0%; */
    top: -15%;
    left: -20%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    display: none;
    pointer-events: auto;

  }
  
  div.popup-container.show {
    display: none;
  }
  
 
  
  div.popup-container div.popup{
    background-color: #f0f0f0;
    width: 350px;
    border-radius: 5px;
    padding: 20px 25px 30px 25px;
  }
  
  div.popup-container div.popup h2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    color: #30475e;
  }
  
  div.popup-container div.popup h2 button{
    border: none;
    background-color: transparent;
    outline: none;
    font-size: 18px;
    font-weight: 550;
    color: #797775;
  }
  
  div.popup-container div.popup input{
    width: 100%;
    margin-bottom: 15px;
    background-color: transparent;
    background: transparent;        
    /* above background change if login clicked and turn into black  */
    border: 1px solid #ccc;
    color: black;
    /* border-bottom: 2px solid #30475e; */
    border-radius: 0;
    padding: 5px;
    font-weight: 50;
    font-size: 14px;
    outline: none;
  }
    
  #message{
    position: 80%;
    align-items: 2px;
    color:black;
    font-size: 13px;
    padding: 8px;
    margin-bottom: 10px;
    display: none;
  }
  div.popup-container div.popup label input[type=checkbox]{
    width: 15px;
    height: 12px;
    margin: left;
    margin-left:auto;
    overflow: hidden;
   }

  div.popup-container div.popup button.login-btn,div.popup-container div.register button.register-btn, div.forgot button.reset-btn{
    font-weight: 550;
    font-style: 15px;
    color: white;
    background-color: #305d77;
    padding: 4px 10px;
    border: none;
    outline: none;
    margin-top: 5px;
  }
  div.popup-container div.popup div.forgot-btn button{
    border: none;
    background-color: transparent;
    outline: none;
    font-weight: 450px;
    cursor: pointer; 
    
  }    
  
  div.popup-container div.register{
    background-color: #edeef7;
  }
  
  div.popup-container div.register h2, div.popup-container div.forgot h2{
    color: #fa9579;
  }
  
  div.popup-container div.register input,   div.popup-container div.forgot input{
    border-bottom-color: #fa9579;
    width: 100%;
    margin-bottom: 15px;
    background-color: transparent;
    background: transparent;        
    /* above background change if login clicked and turn into black  */
    border: 1px solid #ccc;
    color: black;
    /* border-bottom: 2px solid #30475e; */
    border-radius: 0;
    padding: 5px;
    font-weight: 50;
    font-size: 14px;
    outline: none;
    /* code for register popup form */
  }
  
  div.popup-container div.register button.register-btn,  div.popup-container div.forgot button.reset-btn{
    background-color: #fa9579;
  }
  
  div.user{
    color: #30475e;
    background-color: #75cfb8;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: 500;
    position: absolute;
  }
  div.user a{
    color: #30475e;
  }

   /* add a green color and a checkmark when the requrements are right
    */
    .valid{
      color:green;
    }
    .valid:before{
      position:relative;
      left:-35px;
      content: "✔";
    }
    /* Add a red text color and an "x" icon when the requirements are wrong */
    .invalid {
      color: red;
    }
    
    .invalid:before {
      position: relative;
      left: -35px;
      content: "✖";
    }
    /* .fa{
      margin-right: 10px;
    }
    .eye{
      margin-right:100%;
      right: 100%
    }
    #hide1{
      display: none;
    } */
    .eye{
      position: relative;
      right: -90%;
      transform: translate(0,-50%);
      top:57%;
      cursor: pointer;
      margin-top: -25px;

    }
    .fa{
      font-size: 20px;
      color: #7a797e;
    }
    /* for place holder */
    /* Fallback style for older browsers */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: gray;
  font-style: arial;
}
::-moz-placeholder { /* Firefox 19+ */
  color: gray;
  font-style: arial;
}
:-ms-input-placeholder { /* IE 10+ */
  color: gray;
  font-style: arial;
}
:-moz-placeholder { /* Firefox 18- */
  color: gray;
  font-style: arial;
}

 /* dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd */

 /* for live broad caste */
/*
#wrapper{width:85%;margin:auto}
#nav{width:100%;height:50px;font-size:16px}
#body_pannel{width:100%;float:left;height:100%;background:url(../images/body_bg.png) repeat;padding-bottom:20px}
#body_pannel .add1{width:75%;height:90px;margin:auto}.tv_palyer{margin-left:10px;float:left;width:100%;height:500px}
.tvText{margin:auto;height:40px;margin-top:20px;font-size:18px;color:#a1a1a1;width:80%;text-align:justify;font-size:xx-small}iframe{border:0}
#right_pannel{width:60%;float:right;margin-top:15px;margin-right:15px}#right_pannel .tv_palyer{height:500px}
#right_pannel .channelButton{height:200px;padding:0;width:100%;margin:auto;margin-bottom:5px}
#right_pannel .channelButton ul{margin:0;padding:0;list-style:none}
#right_pannel .channelButton ul li{background:url(../images/chanel-bg.png) no-repeat;width:90px;height:32px;line-height:28px;text-align:center;float:left;display:block;margin:0 6px 6px 0}
#right_pannel .channelButton ul li a:link,#right_pannel .channelButton ul li a:visited{color:#e7e7e7;text-decoration:none}
#right_pannel .channelButton ul li a:hover{color:#ffae00;text-decoration:none}#right_pannel .righPanel{width:100%;margin-top:5px;height:250px;margin-bottom:10px}
#right_pannel .righPanel .banner{width:100%;height:250px;float:left;margin-right:10px;margin-left:15px}
#left_panel{width:40%;float:left;margin-top:15px;margin-bottom:20px;margin-left:15px}
#left_panel .left_add1{width:40%;height:250px;margin-top:20px}
#left_panel .box_div{width:40%;height:80px;padding-top:20px}
#left_panel .chatBox{width:40%;height:390px;margin-top:10px}
#tabContent{background-color:#fff;float:left;width:98%}
#tabContent ul{margin:0;padding:0;list-style:none;float:left;margin:20px;margin-right:10px;margin-bottom:0}
#tabContent ul li{width:104px;height:130px;float:left;margin-right:20px;margin-bottom:15px}
#tabContent ul li a{color:#000;text-decoration:none}.channel_logo{width:104px;height:86px;border:#ccc solid 2px}.channel_logo:hover{opacity:.8}.channelName{width:106px;font-size:18px;text-align:center}.channelHeading a{text-decoration:none;color:#fff}.channelHeading h1{margin:auto;margin-top:20px;font-size:24px;text-align:left}#footer{height:87px;margin:auto;width:110p%;background:url(../images/t4tvfooter.png) no-repeat;margin-left:-25px}#footer .footer_content{text-align:center;color:#ccc;margin:auto;margin-top:5px;float:left;width:80%}#footer .footer_content a{text-decoration:none;color:#eba101}#footer .footer_content a:hover{text-decoration:underline}#searh_pannels{width:90%;height:70px;background:url(../images/search_bg.jpg)repeat-x;margin-left:38px;margin-top:30px;float:left;border-top-right-radius:7px;border-top-left-radius:7px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;-moz-border-radius-topleft:7px;-moz-border-radius-topright:7px;-moz-border-radius-bottomleft:7px;-moz-border-radius-bottomright:7px;-webkit-border-top-left-radius:7px;-webkit-border-top-right-radius:7px;-webkit-border-bottom-left-radius:7px;-webkit-border-bottom-right-radius:7px;-moz-box-shadow:0 1px 12px #000;-webkit-box-shadow:0 1px 12px #000;box-shadow:0 1px 12px #000}#searh_pannels .caption{font-size:18px;width:60px;margin:25px 10px 20px;color:#fff;float:left;text-align:right}.searchField{width:60%;float:left;margin-top:20px;height:30px;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;border:0;color:#000;padding-left:10px}.searchField:focus{background-color:#eba101;color:#fff;border:#333 solid 1px}.searchbutton{width:113px;height:45px;float:right;background:url(../images/search.png) no-repeat;margin-right:-12px;margin-top:10px;border:0;cursor:pointer}.scheduleBody{width:90%;margin:auto}.scheduleBody p{font-size:16px}font{color:#414040;font-weight:bolder}.time{width:100%;height:100px;float:left;margin-top:20px;margin-right:60px}.schedulResult{background-color:#fff;padding:20px;border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border:1px solid #242424;margin-top:-3px}.highlight{background-color:#eba101;font-weight:700;color:#000}.tabs_viewAll{text-decoration:none;margin:4px 20px 10px 10px;float:right;color:#2f2d2e}.tabs_viewAll:hover{text-decoration:underline}.heading{padding:5px;text-align:center;color:#fff;background:url(../images/menu_bg.png) repeat-x;border-top-right-radius:8px;border-top-left-radius:8px;border-bottom-right-radius:0;border-bottom-left-radius:0;-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:0;-moz-border-radius-bottomright:0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0}.heading h2{margin:0}.left_menu{border:1px solid #242424;background-color:#fff;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px}.left_menu ul{margin:0;padding:0;list-style:none;float:left}.left_menu ul li a{display:block;float:left;padding:10px 0 10px 19px;text-align:left;width:270px;border-bottom:dotted 1px #000;color:#000;text-decoration:none}.left_menu ul li a:hover{display:block;float:left;padding:10px 0 10px 20px;text-align:left;width:270px;background:url(../images/menu_bg.png) repeat-x;border-bottom:dotted 1px #000;color:#fff;text-decoration:none}#pagenation_pannel{width:350px;height:30px;margin:auto}#pagenation_pannel ul{margin:0;padding:0;list-style:none}#pagenation_pannel ul li a{display:block;padding:5px 7px;float:left;margin-left:10px;background-color:#ccc;text-decoration:none;color:#000;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px}#pagenation_pannel ul li .current,#pagenation_pannel ul li a:hover{display:block;padding:5px 7px;float:left;margin-left:10px;background-color:#242424;text-decoration:none;color:#fff;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px}.watchit{width:auto;height:auto;background:rgba(0,0,0,.44);padding-bottom:20%;color:#fff;margin:auto;margin-top:20px;margin-left:20px;margin-bottom:20px;border-top:1px solid rgba(64,64,64,.87);border-bottom:1px solid rgba(64,64,64,.87)}.clkplay{width:auto;height:auto;margin:auto;margin-top:20%;text-align:center}.playit{width:60px;height:55px;margin:auto;cursor:pointer}.playit img{width:60px;height:55px}.playittxt{margin:5px;font-size:14px;color:#ddd}.footer1{width:auto;text-align:center;color:#ddd;font-size:13px;padding:0 0 10px}.sec_d{color:#ddd;padding:50px 0 0 10px}.ch_shows{color:#ddd;padding:0 0 0 10px;margin:5px 0 0;font-size:12px}#chat_rules{font-size:14px}
 */

 
/* 
---------------------------------------------------------------------------- */
/* for live button page */

/* 
  /* .live_page {
      background-color: #333;
      padding: 10px 0;
      
  }


  .live_page_nav {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
  }

  .live_page_nav li {
      display: inline-block;
      margin: 0 10px;
  }

  .live_page_nav li a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 8px 16px;
      transition: background-color 0.3s;
  }


  .live_page_nav li.active a {
      background-color: #4CAF50;
      border-radius: 4px;
  }

 
  .live_page_nav li a:hover {
      background-color: #ddd;
      color: black;
      border-radius: 4px;
  }



 
 */
 /* live video position  */

/* for table */
table {
  width: 100%;
}

th, td {
  width: 50%;
}

/* for sport live page  */

*{box-sizing: border-box}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}