::-webkit-scrollbar {
	  width: 7px;
	  height: 7px;
	}
	::-webkit-scrollbar-button {
	  width: 0px;
	  height: 0px;
	}
	::-webkit-scrollbar-thumb {
	  background: #000728;
	  border: 0px none #ffffff;
	  border-radius: 50px;
	}
	::-webkit-scrollbar-thumb:hover {
	  background: #ffffff;
	}
	::-webkit-scrollbar-thumb:active {
	  background: #000000;
	}
	::-webkit-scrollbar-track {
	  background: #666666;
	  border: 0px none #ffffff;
	  border-radius: 50px;
	}
	::-webkit-scrollbar-track:hover {
	  background: #666666;
	}
	::-webkit-scrollbar-track:active {
	  background: #333333;
	}
	::-webkit-scrollbar-corner {
	  background: transparent;
	}


	#infofooter{
		width: 100%;
		height: 8px;
		margin-top: -40px;
		background-color: #dedede;
	}
	

	#infodiv{
		position: absolute;
		width: 500px;
		height: 280px;
		background-color: #fff;
		z-index: 6;
		visibility: hidden;
		border-radius: 10px;
		display: inline-block;
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;


	}
	#icondiv{
		width: 150px;
		margin-top: 0px;
		/*background-color: #a1c;*/
		float: left;
	}

	#content{
		width: 100%;
		height: 250px;
		display: inline-block;
	}

	#close{
		height: 30px;
		width: 100%;

	}
	#closebutton{
		height: 20px;
		width: 20px;
		background-color: #fd5754;
		position: absolute;
		right: 5px;
		top: 5px;
		border:0px solid #dedede;
		border-radius: 10px;
		outline: none;
		background-image: url(img/close-red.png);
		background-size: 20px 20px;
		background-repeat: no-repeat;
		background-position: 0px 0px;
		overflow: hidden;
		color: #ffffff;
		transition: 0.4s;
	}



	#iconimg{
		width: 100%;

	}

	#watch{
		width: 100%;
		height: 34px;
		margin-top: 10px;
		background-color: #ffffff;
		color: #A169AC;
		border:2px solid #A169AC;
		background-image: url(img/play-blue.png);
		background-size: 25px 25px;
		background-repeat: no-repeat;
		background-position: 9px 3px;
		padding-left:20px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 20px;
		border-radius: 17px;
		outline: none;
	}

	#watch:hover{		
		background-color: #2a89fb;
		color: #ffffff;
		background-image: url(img/play-white3.png);
		
	}

	#showInfoDiv{
		width: 300px;
		height: 100%;
		margin-top: 0px;
		/*background-color: #1ac;*/
		float: left;
		padding-left: 20px;
		box-sizing: border-box;

	}
	#infoShowName, #infoShowTime, #infoShowDuration, #infoShowCategory{
		margin-left: 0px;	
		color: #666666;
	}


	html,body{
		height: 100%;
		width: 100%;
		padding:0px;
		margin:0px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		background-color: #000;
		overflow-x: hidden;
		display: block;
	}

	#epg{
		margin-top: 0px;
		width: 80%;
		position: absolute;
		background: #00000000;
		margin-left: 20%;
		float: right;
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 50px;
	}

	#channels{
		margin-top: 0px;
		padding-top: 50px;
		width: 20%;
		background: #000000;
		position: absolute;
		min-width: 300px;
		float: left;
		z-index: 1;
		border-right: 2px solid #000;
	}

	.channel{
		width: 100%;
		height: 110px;
		background: rgba(255,255,255,0.04);
		margin-top: 2px;
	}

	.channel:hover{
		background: #0000005e;
	}
	.channel-info{
		width: 100%;
		height: 100%;
		display: inline-block;
	}

	.chan-logo{
		height: 60px;
		width: 90px;
		margin-top:25px; 
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
		float: left;
	}
	.chan-logo img{
		height: 100%;
		width: 100%;
	}

	.chan-info-text{
		height: 100px;
		width: 225px;		
		margin-top:5px; 
		margin-bottom: 5px;
		float: left;
		overflow: hidden;
  		white-space: nowrap;
	}
	.chan-info-text h2{
		margin-left: 10px;
		margin-top: 30px;
		font-size: 18px;
		color: #aaaaaa;
	}
	.chan-info-text h5{
		margin-left: 10px;		
		margin-top: -15px;
		color: #aaaaaa;
		font-style: italic !important; 
		text-transform: capitalize !important;
	}
	 .chan-info-text   h4{
		margin-left: 10px;		
		margin-top: -10px;
		color: #555555;
	  text-transform:capitalize  !important;;
		font-size:15px;
		font-weight:normal
	}

	.row{
		height: 110px;
		width: 14400px;
		background-color: #00000000; 
		margin-top: 2px;
	}
	
	.row-in{
		height: 110px;
		width: 100%;
		display: inline-block;
	}

	.show{
		margin-left: 2px;
		margin-right: 2px; 
		height: 100%;
		background-color: #000000ce;
		float: left;		
		color: #a1a1a1;
		box-sizing: border-box;
	}
	.show:hover{
		margin-left: 2px;
		margin-right: 2px; 
		height: 100%;
		background-color: #0417288e;
		float: left;		
		color: #a1a1a1;
		box-sizing: border-box;
	}
	.showInside{
		width: 100%;
		height: 100%;
		border: 1px solid #222222;
		padding-left: 12px; 
		overflow: hidden;
  		white-space: nowrap;
  		box-sizing: border-box;
	}

	.showInside h3{
		margin-top: 32px;
		margin-bottom: 0px;
		font-size: 0.9em;
		 
	}

	.showInside h5{
	 
		margin-top: 5px;
		margin-bottom: 0px;
		font-size:12px;
		font-weight:normal;
		 
		color: #666666 !important;
	}



	.gap{
		margin-left: 2px;
		margin-right: 2px; 
		height: 100%;
		background-color: #f1592200;
		float: left;
	}

	.category{
		
	}



	#timeBar{
		width: 2px;
		background-color: rgba(241,89,34,0.5);
		position: absolute;
		margin-top: -50px;
		z-index: 3;
	}

	#timeline{
		margin-top: -50px;
		height: 50px;
		width: 14400px;
		background-color: #000000;		
		position: fixed;
		overflow: hidden;
		margin-left: -50px;
		padding-left: 50px;
		z-index: 2;
	}
	#timeline2{
		height: 50px;
		width: 14400px;
	}
	#hour-img{
		height: 100%;
		width: 100%;
		height: 20px;
		display: inline-block;
	}
	#hour-img img{
		float: left;
	}




	.timeText{
		width: 300px;
		height: 30px;
		color: #ffa200;
		float: left;
		text-align: center;
	}

	#previous{
		width: 100px;
		height: 40px;
		position: fixed;		
		background-color: #11aacc3a;
		z-index: 100;
		bottom: 20px;
		left: 370px;
		color: #ffffff3a;
		font-weight: bolder;
		font-size: 18px;
		border: 0px;
		border-radius: 10px;
		outline: none;
	}

	#previous:hover{
		background-color: #1ac;
		color: #ffffff;
	}
	#previous:active{
		transform: translateY(1px);
	}

	#now{
		width: 100px;
		height: 40px;
		position: fixed;		
		background-color: #11aacc3a;
		z-index: 100;
		bottom: 20px;
		left: 62%;
		color: #ffffff3a;
		font-weight: bolder;
		font-size: 18px;
		border: 0px;
		border-radius: 10px;
		outline: none;
	}

	#now:hover{
		background-color: #1ac;
		color: #ffffff;
	}
	#now:active{
		transform: translateY(1px);
	}

	#next{
		width: 100px;
		height: 40px;
		background-color: #11aacc3a;
		position: fixed;
		z-index: 100;
		bottom: 20px;
		right: 10px;
		color: #ffffff3a;
		font-weight: bolder;
		font-size: 18px;
		border: 0px;
		border-radius: 10px;
		outline: none;		
  		
	}
	#next:hover{
		background-color: #1ac;
		color: #ffffff;
	}
	#next:active{
		transform: translateY(1px);
	}

	#dateIndicator{
		width: 300px;
		height: 0px;
		background-color: #dedede00;
		position: fixed;		
		z-index: 101;
		top: 100px;
		left: 50%;
		color: #ffa200;
		font-size: 50px;
		text-align:center;
	}
	
	#footer{
		visibility: hidden;
	}
/*
	#maindiv{
		width: 100%;
		height: 90%;
	}*/


	@media (max-width:768px)
	{


		#infodiv{
			
			width: 85%;
			max-width: 400px;
			height: 370px;
			background-color: #f6f6f6;
			z-index: 6;
			visibility: hidden;
			border-radius: 10px;
			display: inline-block;
			padding-left: 25px;
			padding-right: 25px;
			box-sizing: border-box;

		


		}

		#content{
			width: 100%;
			height: 250px;
			display: block;
		}

		#icondiv{
			width: 100%;
			margin-top: 0px;
			/*background-color: #a1c;*/
			height: 150px;
		}

		#iconimg{
			width: 100px;
			height: 100px;
			margin:auto;
			display:block;
		}

		#watch{
			width: 80%;
			height: 34px;margin: auto;
			margin-top: 10px;
			background-color: #2a89fb;
			color: #FFFFFF;
			border:0px solid #2a89fb;
			background-image: url(img/play-white3.png);
			background-size: 25px 25px;
			background-repeat: no-repeat;
			background-position: 9px 3px;
			padding-left:20px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 20px;
			border-radius: 17px;
			outline: none;
			
			display: block;
		}

		#watch:hover,#watch:active{
			width: 80%;
			height: 34px;
			margin-top: 10px;
			background-color: #2967cd;
			color: #FFFFFF;
			border:0px solid #2967cd;
			background-image: url(img/play-white3.png);
			background-size: 25px 25px;
			background-repeat: no-repeat;
			background-position: 9px 3px;
			padding-left:20px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 20px;
			border-radius: 17px;
			outline: none;
			margin: auto;
			display: block;
		}

		
		#showInfoDiv{
			width: 100%;
			height: 170px;
			margin-top: 0px;
			/*background-color: #1ac;*/
			padding-left: 0px;
			box-sizing: border-box;

		}
		#infoChanName,#infoShowName, #infoShowTime, #infoShowDuration, #infoShowCategory{
			margin-left: 0px;	
			color: #333333;
			text-align: center;
		}






		#timeBar{
			width: 2px;
			background-color: rgba(241,89,34,0.5);
			position: absolute;
			margin-top: -50px;
			z-index: 1000;
		}

		html,body{
			width: 100%;
			height:100.1%;
			padding:0px;
			margin:0px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			display: block;

			
		}
		body{

  			min-height: 100vh;

		}
		#maindiv{
			
			width: 100%;
			position: fixed;
			overflow-y: auto;
			overflow-x: hidden;
			bottom: 50px;
			top: 0px;
			-webkit-overflow-scrolling: touch;
		}
		#epg{	
			height: unset;
			position: absolute;
			margin-top: 0px;
			background: #00000000;
			margin-left: 150px;
			float: left;
			overflow-x: auto;
			overflow-y: hidden;
			padding-top: 50px;
			


		}
		#channels{
			min-width: 150px;
		}

		.channel{
			width: 100%;
			height: 70px;
		}

		.channel-info{
			width: 100%;
			height: 100%;
			display: inline-block;
		}

		.chan-logo{
			height: 50px;
			width: 50px;
			margin-top:5px; 
			margin-bottom: 5px;
			margin-left: 5px;
			margin-right: 5px;
			float: left;
		}
		.chan-logo img{
			height: 100%;
			width: 100%;
		}

		.chan-info-text{
			height: 50px;
			width: 90px;		
			margin-top:10px; 
			margin-bottom: 10px;
			float: left;
			overflow: hidden;
  			white-space: nowrap;
		}
		.chan-info-text h2{
			margin-left: 0px;
			margin-top: 5px;
			color: #878787;
			font-size: 15px;
		}
		.chan-info-text h4{
			margin-left: 0px;		
		
			color: #666666;			
			font-size: 12px;
		}

		.row{
			height: 70px;
			margin-top: 2px;
		}
		.row-in{
			height: 70px;
		}
		.show{
			margin-left: 2px;
			margin-right: 2px; 
			height: 100%;
		}

		.showInside{			
			padding-left: 12px; 
			overflow: hidden;
	  		white-space: nowrap;
		}

		.showInside h3{
			margin-top: 15px;
			margin-bottom: 0px;
			font-size: 15px;
			padding: 0px;
		}
		.showInside h5{
			margin-top: 2px;
			margin-bottom: 0px;			
			font-size: 11px;
		}
		#footer{
			background-color: #fff;
			display: block;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 50px; 
			display: inline-block;
			display: -webkit-flex;flex: 1;
			visibility: visible;
		}
		#next{
			visibility: hidden;

		}
		#previous{
			visibility: hidden;
		}
		#now{
			visibility: hidden;
		}

		#previous2{
			height: 100%;
			width: 33%;
			background-color: #000;	
			color: #dedede;		
			outline: none;
			float: left;
			-webkit-appearance: none;
			font-size: 20px;
			border-radius: 0px;
			border:1px solid #1f1f1f;
		}
		#previous2:active{
			transform: translateY(1px);
			background-color: #1f1f1f;
		}	
		#next2{
			height: 100%;
			width: 33%;
			background-color: #000;	
			color: #dedede;		
			outline: none;
			float: left;
			-webkit-appearance: none;
			font-size: 20px;
			border-radius: 0px;
			border:1px solid #1f1f1f;
		}
		#next2:active{
			transform: translateY(1px);
			background-color: #1b1b1b;
		}	

		#now2{
			height: 100%;
			width: 34%;
			background-color: #000;	
			color: #dedede;		
			outline: none;
			float: left;
			-webkit-appearance: none;
			font-size: 20px;
			border-radius: 0px;
			border:1px solid #1f1f1f;
		}
		#now2:active{
			transform: translateY(1px);
			background-color: #1b1b1b;
		}

		#dateIndicator{
			width: 100%;
			height: 0px;
			background-color: #dedede00;
			position: fixed;		
			z-index: 101;
			top: 100px;
			color: #ffa200;
			font-size: 50px;
			left: 0;
			text-align:center;
		}

	}

	@supports (-webkit-overflow-scrolling: touch) {
	  /* CSS specific to iOS devices */ 

	    #infodiv{
			
			width: 85%;
			max-width: 400px;
			height: 370px;
			background-color: #f6f6f6;
			z-index: 6;
			visibility: hidden;
			border-radius: 10px;
			display: inline-block;
			padding-left: 25px;
			padding-right: 25px;
			box-sizing: border-box;


		}



		#content{
			width: 100%;
			height: 250px;
			display: block;
		}

		#icondiv{
			width: 100%;
			margin-top: 0px;
			/*background-color: #a1c;*/
			height: 150px;
		}

		#iconimg{
			width: 100px;
			height: 100px;
			margin:auto;
			display:block;
		}

		#watch{
			width: 80%;
			height: 34px;margin: auto;
			margin-top: 10px;
			background-color: #2a89fb;
			color: #FFFFFF;
			border:0px solid #2a89fb;
			background-image: url(img/play-white3.png);
			background-size: 25px 25px;
			background-repeat: no-repeat;
			background-position: 9px 3px;
			padding-left:20px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 20px;
			border-radius: 17px;
			outline: none;
			
			display: block;
		}

		#watch:hover,#watch:active{
			width: 80%;
			height: 34px;
			margin-top: 10px;
			background-color: #2967cd;
			color: #FFFFFF;
			border:0px solid #2967cd;
			background-image: url(img/play-white3.png);
			background-size: 25px 25px;
			background-repeat: no-repeat;
			background-position: 9px 3px;
			padding-left:20px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 20px;
			border-radius: 17px;
			outline: none;
			margin: auto;
			display: block;
		}

		
		#showInfoDiv{
			width: 100%;
			height: 170px;
			margin-top: 0px;
			/*background-color: #1ac;*/
			padding-left: 0px;
			box-sizing: border-box;

		}
		#infoChanName,#infoShowName, #infoShowTime, #infoShowDuration, #infoShowCategory{
			margin-left: 0px;	
			color: #333333;
			text-align: center;
		}


	 	#timeBar{
			width: 2px;
			background-color: rgba(241,89,34,0.5);
			position: absolute;
			margin-top: -50px;
			z-index: 1000;
		}
	    html,body{
			width: 100%;
			height:80%;
			padding:0px;
			margin:0px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			display: block;
			overflow: hidden;
			position: initial;
			-webkit-overflow-scrolling: touch;
		}
		body{

			overflow: hidden;

		}

		#maindiv{
			
			width: 100%;
			position: fixed;
			overflow-y: auto;
			overflow-x: hidden;
			bottom: 50px;
			top: 0px;
			-webkit-overflow-scrolling: touch;
		}
		#epg{	
			height: unset;
			position: absolute;
			margin-top: 0px;
			background: #00000000;
			margin-left: 150px;
			float: right;
			overflow-x: auto;
			overflow-y: hidden;
			padding-top: 50px;
			


		}
		#channels{
			min-width: 150px;
		}

		.channel{
			width: 100%;
			height: 70px;
		}

		.channel-info{
			width: 100%;
			height: 100%;
			display: inline-block;
		}

		.chan-logo{
			height: 50px;
			width: 50px;
			margin-top:5px; 
			margin-bottom: 5px;
			margin-left: 5px;
			margin-right: 5px;
			float: left;
		}
		.chan-logo img{
			height: 100%;
			width: 100%;
		}

		.chan-info-text{
			height: 50px;
			width: 90px;		
			margin-top:10px; 
			margin-bottom: 10px;
			float: left;
			overflow: hidden;
  			white-space: nowrap;
		}
		.chan-info-text h2{
			margin-left: 0px;
			margin-top: 5px;
			color: #878787;
			font-size: 15px;
		}
		.chan-info-text h4{
			margin-left: 0px;		
			margin-top: -15px;
			color: #666666;			
			font-size: 12px;
		}

		.row{
			height: 70px;
			margin-top: 2px;
		}
		.row-in{
			height: 70px;
		}
		.show{
			margin-left: 2px;
			margin-right: 2px; 
			height: 100%;
		}

		.showInside{			
			
			padding-left: 12px; 
			overflow: hidden;
	  		white-space: nowrap;
		}

		.showInside h3{
		
			margin-top: 5px;
			margin-bottom: 0px;
			font-size: 15px;
			padding: 0px;
		}
		.showInside h5{
			margin-top: -2px;
			margin-bottom: 0px;			
			font-size: 11px;
		}

		#footer{
			background-color: #f6f6f6;
			display: block;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 50px; 
			display: inline-block;
			visibility: visible;
		}
		#next{
			visibility: hidden;

		}
		#previous{
			visibility: hidden;
		}
		#now{
			visibility: hidden;
		}

		#previous2{
			height: 100%;
			width: 33%;
			background-color: #000;	
			color: #dedede;		
			outline: none;
			float: left;
			-webkit-appearance: none;
			font-size: 20px;
			border-radius: 0px;
			border:1px solid #1f1f1f;
		}
		#previous2:active{
			transform: translateY(1px);
			background-color: #1b1b1b;
		}	
		#next2{
			height: 100%;
			width: 33%;
			background-color: #000;	
			color: #dedede;		
			outline: none;
			float: left;
			-webkit-appearance: none;
			font-size: 20px;
			border-radius: 0px;
			border:1px solid #1f1f1f;
		}
		#next2:active{
			transform: translateY(1px);
			background-color: #1b1b1b;
		}	

		#now2{
			height: 100%;
			width: 34%;
			background-color: #000;	
			color: #dedede;		
			outline: none;
			float: left;
			-webkit-appearance: none;
			font-size: 20px;
			border-radius: 0px;
			border:1px solid #1f1f1f;
		}
		#now2:active{
			transform: translateY(1px);
			background-color: #1b1b1b;
		}
		#dateIndicator{
			width: 100%;
			height: 0px;
			background-color: #dedede00;
			position: fixed;		
			z-index: 101;
			top: 100px;
			color: #ffa200;
			font-size: 50px;
			left: 0;
			text-align:center;
		}
	}