/* Copyright 2022 Kunsh
           
[+] - Star 🌟 Before Copying this 😢  
[+] - Follow me and get some new APIs and Repository 😅
[+] - EveryOne can Use this Freely Here !!
[+] - DO NOT sell anything or don't buy anyone like this its free 
[+] - DO NOT remove Credit After Copying 😈
 */


	/* layout css */
	html, body {font-family:'Jockey One', 'Dosis','Berkshire Swash','Bungee Shade','arial';background-color:#000;overflow:hidden;margin:0; padding:0;height:100%}
	
    section {display:flex;flex-direction:column;height:100%;position:relative!important}
	main {box-sizing:border-box}
	nav {overflow-y:scroll;scroll-behavior:smooth;background:#606060}
    
	nav ul li {padding:0;vertical-align:middle;line-height:1.8em}
	.thumbimg {background:#242424}  
	
	@media only screen and (orientation: landscape) {
        main {width:calc(85%);height:calc(100%)}
        nav {width:calc(15%);height: calc(100% - 100px);position:absolute;top:100px;right:0}
		aside{right:175px}

		.active {height: 16vh;background-size: cover;background-image: url("../img/currentlyPlaying.jpg");background-repeat: no-repeat}

	
		/*float top*/
		.active .thumbimg{position: fixed;top:0;z-index: 4;width: calc(15% - 18px);height:16vh}		

		nav ul li {display:flex;flex-wrap:wrap}
		.thumbimg {width:calc(100% - 10px);height:16vh}
		/*.active img {width:calc(100% - 10px)!important;height:80px}*/
		.active img {width:100%!important;height: 16vh;}

		#menu li {outline:none !important}
		#menu li:focus:not(.active) {cursor:pointer;border-right:10px solid #fff}
		#menu li:focus:not(.active) .thumbimg {width:100%}
    }

    @media (orientation:portrait) {
        main {height:25%}
        nav {height:75%}
    	aside{right:0!important}

        nav ul li {display:inline-block}
       .thumbimg {width:240px;height:166px}
       .active img {width:223px;height:146px}
    }

	.nochnl{width:100%;height:100px;background: #61A5C2;
		border-bottom:1px solid #606060;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/*aside*/
    aside{position:absolute;top:0;right:15%;float:top;width:50px;height:50px;padding:10px;margin:10px;border-radius:50%}
    
	ul {padding:0;margin:0;list-style:none;}
    aside .searchbutt {margin:0;vertical-align:middle}

	aside .searchbutt {width:50px;height:50px;padding:0;margin:0;border:1px solid yellow;background: rgba(196, 113, 237, .2);border-radius:50%}
	
	aside .searchbutt:hover, aside .searchbutt:active {cursor:pointer;border:1px solid yellow;background:yellow}

	
	aside .searchbox  {
		color: #000;
		display: block;
		padding: 2px;
		border-radius: 5px;
		margin: 0 0 30px;
		display:none
	}
	aside .show {display:block}

	aside .searchbox input:active,
	aside .searchbox input:hover{cursor:pointer}

	aside .searchbox {padding:6px;margin:0;position:absolute;float:top;right:0;text-align:right}
	  
	aside .searchbox span {
		display: flex;
		padding: 2px;
		border-radius: 5px;
		margin:0;
		background: rgba(229, 232, 114, .8)
	}

	aside .searchbox input[type="text"] {
		border: none;
		color:#000;
		width: 160px;
		background: transparent;
		margin: 0;
		padding: 7px 8px;
		font-size: 1.8em;
		color: inherit;
		border: 2px solid transparent;
		border-radius: inherit;
	}
	aside .searchbox input[type="text"]::placeholder {
		color: #ffff00;
	}

	aside .searchbox input[type="text"]:focus {
		box-shadow: 0 0 3px 0 #ffff00;
		border-color: #ffff00;
		outline: none;
	}
	
	aside #filterList {	}
	
	aside ul li {
		color:#000;
		cursor:pointer;
		text-align:left;
		padding:8px;
		margin:1px;
		border-radius: 5px;
		background: rgba(229, 232, 114, .8);
		white-space: nowrap;
	}
	aside ul li:hover {background:yellow}

	aside ul .filterChannel {
		background: yellow;
	}
	#infoz{ position:absolute;top:100px;left:0;
				float:top;z-index:999;
				padding:50px;color:red;font-size: 5em;
				
			}

#currentInfo { position:absolute;top:10px;left:10px;
				float:top;z-index:99;
				color:yellow;
			}

#currentInfo li {;
				display: inline-block;
				float:left;
				clear:both;
				padding:10px; display:inline;
				border-radius: 5px;
				color:#000;margin:1px;
				font-size:2em;
				background: rgba(229, 232, 114, .8)
			}

#currentInfo li + li{font-size:1.5em}







	

	
	/* navigation */
	nav ul {padding:0;margin:0;list-style:none;}
	#menu {background: #12c2e9;background: -webkit-linear-gradient(to bottom, #f64f59, #c471ed, #12c2e9);background: linear-gradient(to bottom, #f64f59, #c471ed, #12c2e9);}

	#menu li {margin:0;cursor:pointer; color:yellow;vertical-align:middle}
	#menu li:hover:not(.active) {background:#fff;cursor:pointer}



	
	.active:befo//re {content:"Active Channel";position:absolute;left:10px;padding:10px}
	.active img{background-color:yellow;border:10px solid yellow}
	/*.active img:hover:not(.active) {border-right:10px solid #fff}*/

	/*keyboard_navigate*/
	.selected img{border-right:10px solid blue}

	.hide {display:none!important}
	.notavailable {text-decoration:line-through}

	.thumbtitle {display:block;width:140px;hei//ght:80px;padding:4px;over/flow:hidden; text-ove/rflow: ellipsis; white-sp/ace: nowrap;display: flex;justify-content: left;align-items: center;}
	.thumbtitle {display:none}
	

	.fullScreen{display:fullscreen;}

	/*https://stackoverflow.com/questions/3899865/can-you-display-html5-video-as-a-full-screen-background*/
	@media (min-aspect-ratio: 16/9) {
		#vidZ{width: 100%;height: auto;	}
	  }
	  @media (max-aspect-ratio: 16/9) {
				#vidZ{  width: auto; height: 100%; }
	  }

	/* VideoJS Player overrides */
		/* VideoJS Player overrides */
		#myvideo {background-size:cover;background-size:100% 100%!important; height:100%;width:100%;margin:0;padding:0}

		#vidZ{height:100%;width:100%;margin:0;padding:0}
		#vidZ video{object-fit:initial;background-size:cover;background-size:100% 100%;margin:0;padding:0}
		.vjs-post//er {background-size: cover !important}
		.vjs-pos//ter {display: block!important}
		.vjs-http-source-selector > .vjs-menu > .vjs-menu-content > .vjs-selected  .vjs-menu-item-text {border:2px solid red!important}

		.video-js {width:100%!important;height:100%!important}
		.video-player {position:relative!important;width:100%!important;height:auto!important}
	
		.video-js {background-color:transparent!important}
		.video-js .vjs-volume-panel.vjs-volume-panel-horizontal {width:10em!important}	
		.video-js .vjs-volume-panel .vjs-volume-control {opacity:1;width:100%!important}
	

		.video-js .vjs-modal-dialog {border: 10px solid red}


		.vjs-error .vjs-error-display .vjs-modal-dialog-content {
			font-size: 3.8em!important;
			margin: 0 4em;
			color: yellow!important;
			width:80%;
			font-family: 'Jockey One'!important;
			/*Jockey One''Dosis','Berkshire Swash','Bungee Shade'*/
		}
		.vjs-error .vjs-error-display:before {
			/* color: #fff; */
			cont/ent: "X";
			fon/t-family: 'Arial'!important;
			font-size: 6em!important;
		}
		.vjs-live .vjs-progress-control {display: flex!important}
		.video-js .vjs-live-control {border: 1px solid red;display:none!important}
		
		.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
		.video-js:not(.vjs-live) .vjs-seek-to-live-control {display:inline-block}


		.video-js .vjs-seek-to-live-control {display: inline-block!important}
		
		.vjs-paused.vjs-has-started .vjs-big-play-button {display:block!important}

		.vjs-playback-rate .vjs-playback-rate-value {line-height: 3.6!important}
		.vjs-icon-cog:before {font-size: 1.8em!important}
		.video-js .vjs-volume-panel .vjs-volume-control {opacity:1!important}

		.video-js .vjs-time-control{display:block;}


		.vjs-menu-button-popup .vjs-menu {left:-1em !important}
		.vjs-menu-button-popup .vjs-menu { wid//th: 16em;}
		.video-js.vjs-max-quality-selector .vjs-max-quality-selector-button .vjs-menu li.vjs-selected sup {text-shadow: none!important}


		.video-js .vjs-big-play-button {
			font-size: 5em!important;
			line-height: 3em!important;
			height: 3em!important;
			width: 3em!important;
			border: .03em solid #fff;
			border-radius: 2em;
			top: 40%!important;
			left: 6%!important;
		}
		
		.video-js .vjs-big-play-button .vjs-icon-placeholder:before {font-size:2em!important}	
	
		.vjs-fullscreen-control.vjs-button	{font-size:2em!important}
		.vjs-default-skin.vjs-paused .vjs-control-bar{display:block}

	::-webkit-scrollbar-thumb {background-color:yellow;}
	::-webkit-scrollbar-corner {background:0 0;}
	::-webkit-scrollbar {width:8px;height:8px;background:0 0;}