.navbar{
	display:flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 50px;
	padding: 0;
	background: var(--nav-bgColor);
	color: inherit;
	font-family: Arial, Helvetica, sans-serif;
	z-index: 10;
}


.laptopNav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: clamp(87%,1330px,97%);
	/* border: 1px solid crimson; */
}


.mobileNav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 98%;
	/* border: 1px solid purple; */
}


.laptopNavLeft{
	display: grid;
	grid-template-columns: 40px 165px 1fr;
	align-items: center;
	width:70%;
	gap: 0 5px;
	max-width: 700px;
	/* border: 1px dotted rgb(1, 238, 187); */
}


.laptopNavRight{
	display:flex;
	justify-content: flex-end;
	gap: 15px;
	align-items: center;
	width: 30%;
	/* border: 1px dotted rgb(34, 241, 6); */
}

.forRight{
	display: flex;
	
	justify-content: flex-end;
	margin-left: auto;
	align-items: center;
	width: auto;
	gap: 4px;
	/* border: 1px solid black; */
}


/* burger button */


.burgerMenu{
	display: grid;
	position: relative;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 3px;
	cursor: pointer;
	color: inherit;
	/* border: 1px solid rgb(13, 201, 248); */
}



.menuBurger{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	position: absolute;
	top: 50px;
	left: 0;
	width: 200px;
	height:auto;
	padding: 5px 3px ;
	color: inherit;
	background-color: var(--body-bgColor);
	border: 2px solid var(--theme-color);
	border-radius: 3px;
	box-shadow: 0 1px 10px 0 var(--shadow);
}




.burgerContainer{
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	width: 38px;
	height: 38px;
	gap: 6px;
	border-radius: 50%;
	background-position: center;
	position: relative;
	background: rgba(114, 108, 108, 0);
	/* border: 1px solid crimson; */
}



.burger{
	border-radius: 3px;
	width: 27px;
	height: 2px;
	background-color: var(--pagi-border);
	transform:  translateY(0px) rotate(0deg);
	/* transition: transform 150ms linear; */
}


.cross div:nth-child(1){
	transform: translateY(7.5px) rotate(45deg);  
}


.cross div:nth-child(2){
	transform:  rotate(-45deg);
}
  

.cross div:nth-child(3){
	transform: translateY(-10px);
	opacity: 0;
}



.menuBurger li{
	display: flex;
	border-radius: 2px;
	gap: 13px;
	padding: 9px 4px;
	align-items: center;
	width: 100%;
	cursor: pointer;
	z-index: 1;
	font-size: 1rem;
	/* border-bottom: 1px solid rgba(219, 215, 215, 0.473); */
}



/* .menuBurger li:hover{
	color: var(--theme-color);
} */


.logo{
	font-weight: bold;
	text-align: start;
	font-size: 32px;
	
	/* padding:  1px  0 ; */
	height: 36px;
	/* border: 1px solid yellow; */
}

.logo a {
	/* display: block; */
   width: 100%;
   height: 100%;
   /* border: 1px solid crimson; */
}


.maxx{
  	color: var(--theme-color);
}


.navMobile{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	/* border: 1px solid black; */
}

.activeNavMobile{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
}


.showSearch{
	background-color: rgba(184, 16, 16, 0);
	width: 24px;
	height: 24px;
	border-radius: 0px;
}


.unknow{
	width: 25px;
	height: 25px;
	border: 1px solid black;
	outline: none;
	background-color: cyan;
}


/* search bar */


.searchSubmit{
	position: relative;
	padding: 0;
	margin: 0;
	height: 35px;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2rem;
	/* padding: 0 10px; */
	/* width: 80%; */
	/* border: 1px solid rgb(21, 202, 30);   */
}


.searchSubmit form {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	border-radius: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2rem;
	/* border: 1px solid rgba(73, 72, 72, 0.747); */
}



.search{
	color: inherit;
	width: 85%; 
	height: 100%;
	margin: 0;
	padding: 6px 5px 5px 7px;
	font-size: 1rem;
	border-radius: 4px 0px 0px 4px;
	background: var(--body-bgColor);
	font-family: Arial, Helvetica, sans-serif;
	/* border: 1.6px solid var(--search-border) ; */
	border-top: 1.6px solid var(--search-border)  ;
	border-left:  1.6px solid var(--search-border) ;
	border-bottom:  1.6px solid var(--search-border) ;
}

.search::-webkit-search-cancel-button{
	-webkit-appearance: none;
    height: 15px;
    width: 15px;
    border-radius:3px;
	border: 1px solid white;
    /* background: var(--theme-color); */
}


.submit{ 
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background: var(--body-bgColor);
	height: 100%;
	border-radius: 0px 4px 4px 0px;
	width: 15%;
	cursor: pointer;
	border-top: 1.6px solid var(--search-border );
	border-bottom: 1.6px solid var(--search-border);
	border-right: 1.6px solid var(--search-border);
	/* border:1px inset crimson; */
}

.submit::before{
	content: '';
	position: absolute;
	width: 1px ;
	height: 70%;
	background-color: var(--search-border);
	top: 5px;
	left: 0;
	z-index: 1000;
}


.searchSubmit:focus-within .search{
	border-top: 1.6px solid rgb(23, 207, 240)  ;
	border-left:  1.6px solid rgb(23, 207, 240) ;
	border-bottom:  1.6px solid rgb(23, 207, 240) ;
	outline: none;
}

.searchSubmit:focus-within .submit{
	border-top: 1.6px solid rgb(23, 207, 240);
	border-bottom: 1.6px solid rgb(23, 207, 240);
	border-right: 1.6px solid rgb(23, 207, 240);
} 


.datalist{
	background-color:var(--datalistBg);
	position: absolute;
	width: 100%;
	border-radius: 2px;
	top: 40px;
	color: #000;
	font-size: 1.1rem;
	box-shadow: 0 0px 3px 1px var(--shadow);
	padding: 8px 0px;
}



.datalist ul li{
   /* border: 1px solid black; */
   padding: 6px 8px;
}

.datalist ul li:hover{
 background-color: #E4ECFA;
 cursor: pointer;
}




.mobileSearch{
	width: 100%;
	height: 80%;
	display: grid;
	grid-template-columns: 40px 1fr ;
	align-items: center;
	gap: 2px;
	/* border: 2px dotted black; */
}

.closeSearch{  
	height: 100%;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0);
}



/* settings area */


.settings{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 35px;
	height: 40px;
	/* border: 1px solid white; */
}


.settingsIcon{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30PX;
	height: 30PX;
	background-color: rgba(255, 255, 255, 0);
	cursor: pointer;
	transition: transform 100ms ease-in-out;
	/* border:1px solid rgb(36, 212, 174); */
}



.settingsArea{
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	position: absolute;
	right: 0px;
	top:  40px;
	width: 260px;
	height: auto;
	border-radius: 5px;
	padding: 5px 10PX;
	background-color: var(--optionsColor);
	box-shadow: 0 1px 10px 0 var(--shadow);
}


.settingsTitle{
	border-bottom: 2px solid rgb(99, 96, 96);	
	padding: 3px 0;
	text-align: center;
	margin-bottom: 10px;
}


.toggleContainer{
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: auto;
	width: auto;
	margin: 6px;
}


.toggleSwitch{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrap{
	width:auto;
	height: 25px;
	display: flex;
	justify-content: space-evenly;
	color: inherit;
	gap: 5px;
}
  
.wrap button{
	font-size: 13px;
	padding: 0px 5px;
	color: inherit;
	border: 2px solid  var(--pagi-border);
	border-radius: 2px;
}



/* login signup */

.memberBox{
	position: relative;
	display: flex;
	align-items: center;
    line-height: 0;
	gap: 10px;
	padding: 0;
}




.login{
	color: inherit;
	font-weight: bold;
}

.signUp{
	border-radius: 4px;
	background:var(--theme-color);
	padding: 5px 16px;
	color: #fff;
	font-weight: bold;
	border: 1.6px solid var(--body-bgColor);
}


@media screen and (max-width: 700px) {
	.memberBox{
		position: relative;
		display: flex;
		align-items: center;
		line-height: 0;
		gap: 10px;
		padding: 0;
		width: 27px;
		height: 27px;
		border-radius: 50%;
	}
	
	.navLog{
		width: 100%;
		height: 100%;	
		border-radius: 50%;
	}

	.mobileSearch{
		/* border: 1px solid cadetblue; */
		display: grid;
		grid-template-columns: 40px 1fr;
		width: 99%;
	}

	.mobileSearch .closeMv{
		color: inherit;
		font-size: 1.5em;
		height: 100%;
		/* border: 2px solid rgb(255, 60, 0); */
	}



}


/*  videoList  HOMEPAGE */

.anne{
	/* border: 2px solid cadetblue; */
}


.anne .videoBlock img{
	width: 100%;
   
}

.anneBlock{
	padding: 5px 0 0 0;
}

.anneBlock p{
	margin: 0px 5px 5px 5px ;  
	padding: 5px 0 0 0 ;
	font-size: 1rem;
	height: auto;
	color: inherit;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	white-space:normal;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-height: 43px;
	display: block;
	display: -webkit-box;
	
}



.infoA{
	text-align: center;
	color: #aaa;
}

.infoA span{
	background-color: rgba(245, 181, 4, 0.959);
	color: black;
	padding: 0px 5px;
	font-weight: bold;
	font-size: 0.8em;
    border-radius:2px;
	margin-right: 5px;
}


.videosListContainer{
	display: flex;
	flex-direction: column;
	width: clamp(86%,1330px,97%);
	margin: 0px 0px 10px 0px;
	padding: 6px 6px 0 6px;
	/* border: 1px solid cadetblue; */
}



.videosList{
    display: grid;
    grid-template-columns: repeat(auto-fill, [col-start] minmax(250px, 1fr) [col-end]);
	width: 100%;
	height: auto;
	padding: 0 0 0 0;
	gap: 25px 5px;
	margin: 8px 0 0 0;
	/* border: 1px solid rgb(100, 237, 111);  */
}


.videoContent{
	position: relative;
	width: auto;
	height:auto;
	padding: 0;
	
}


.videoBlock{
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	cursor: pointer;
	/* border: 1px solid cadetblue; */
}


.buttonContainer{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	width: 30px;
	height: auto;
	right: 1px;
	top: 3px;
	gap: 3px 0;
	z-index: 6;
	opacity: 0;
	/* outline: 1px solid cadetblue; */
}


.videoBlock:hover .buttonContainer{
   opacity: 1;
}

.buttonContainer button{
	width: 26px;
	height: 26px;
	border-radius: 2px;
	background-color:rgba(37, 37, 37, 0.63);
}

.buttonContainer button:hover{
  	background-color: black;
}


.previewContainer{
	width: 100%;
	aspect-ratio: 16/9;
	line-height: 0;
}


.videoPreview{
	position: absolute;
	width: 100%;
	height: 100%;
}


.posterImg{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	/* opacity: 0;     */
	z-index: 5;
	bottom: 100%;
}



/* ******title ********/

.videosTitle{
	padding: 5px 0 0 0 ;
	position: relative;
}

.titleOptionsBlock{
	position: absolute;
	right: -2px;
	top: 1px;
	width: 28px ;
	height: 28px;
}


.videosTitle .toggOptions{
    position: relative;
    line-height: 0;
    top: 3px;
    right: 0;
    width: 100%;
    padding: 0 0 1px 0px;
    height: 100%;
    border-radius: 50%;
    color: var(--theme-color);
    /* text-align: center; */
    font-size: 1.5rem;
    opacity: 0;
    font-weight: bold;
	/* border: 1px solid crimson; */
}



.videosTitle .toggOptions::after{
    content: "";
    display: block;
    position: absolute;
    border-radius: 4em;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    box-shadow: 0 0 0px 5px var(--color);
    z-index: 7;
}

.videosTitle .toggOptions:active:after{
	box-shadow: 0 0 0 0 var(--color);
	position: absolute;
	border-radius: 4em;
	left: 0;
	top:0;
	opacity: 1;
	transition: 0s;	
}

.videoContent:hover .videosTitle .toggOptions{
	opacity: 1;
}

.titleOptions{
	position: absolute;
	width: 200px;
	height: auto;
	top: 40px;
	right: 5px;
	background-color: var(--optionsColor);
	box-shadow: 0 0px 4px 0px var(--shadow);
	z-index:11;
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	padding: 5px  0;
}


.titleOptions button{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 13px;
    color: inherit;
	font-size: 1rem;
	text-align: start;
}



.titleOptions p{
	border-bottom: 1.6px solid var(--search-border);
	padding: 0 0 4px 0!important;
	width: 100%;
}

.videosTitle p{
	margin: 0px 28px 5px 0 ;  
	padding: 5px 0 0 0 ;
	font-size: 1rem;
	height: auto;
	color: inherit;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	white-space:normal;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-height: 43px;
	display: block;
	display: -webkit-box;
	/* border: 1px solid rgb(253, 11, 64); */
}


.videosInformations{
	overflow: hidden;
	white-space: nowrap;  
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	/* border: 1px dotted springgreen; */
  
}


.videosInformations div{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #aaa;
}


.views,.date{
	font-size: 0.9rem;
	margin: 0 2px;
	color: inherit;
}

.quality,.type{
	padding: 3px 7px;
	margin: 0 2px;
	border-radius: 2px;
}


.lenghtContainer{
	position: absolute;
	right: 2px;
	bottom: 2px;
	overflow: hidden;
}


.lenght{
	pointer-events : none;
	position: relative;
	font-size: 12px;
	font-weight: bolder;
	font-family:  Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
	text-align: center;
	color: white;
	padding:3px 6px;
	border-radius: 2px;
	z-index: 6;
	background: linear-gradient(132deg, rgba(22, 18, 18, 0.342) 0%, rgba(19, 19, 20, 0.685) 97%);

}


.videoBlock:hover .lenght{
  	opacity: 0;
}


.quality{
	color: inherit;
	font-size: 10px;
	height: 80%;
}


.type{
	color: inherit;
	font-size: 10px;
	height: 80%;
	text-decoration: underline;
	/* background-color: rgb(117 114 114 / 35%); */
}


/* HISTORY PAGE */


.historyHead{
	display: flex;
	width: 100%;
	justify-content: space-between;
	/* border: 1px solid springgreen; */
}

.historyHead h1{
	font-size: 1rem;
	padding: 3px 0px;
}


.historyHead button{
	border-radius: 5px;
	padding: 6px 10px;
	margin: 0 0 0 3px;
	color: inherit;
	border: 2px solid var(--pagi-border);
	font-size: 0.8rem;
	font-weight: bold;
}



/* PLAYLIST PAGE */


.playlist{
	display: grid;
	grid-template-columns: repeat(5,19.7%);
	justify-content: space-between;
	width: 100%;
	height: auto;
	padding: 3px 3px 3px 3px;
	gap: 20px 0;
	margin: 5px 0 0 0;
	border: 2px solid springgreen;
}

.playlist .createNewPlaylist{
	border: 1px dotted rgb(12, 141, 66);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:  1rem;
	color: springgreen;
	font-weight: 100!important;
	cursor: pointer;

}

.playlist .createNewPlaylist:hover{
  	background-color: rgba(180, 177, 177, 0.185);
}

.playlist div{
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--nav-bgColor);
	/* border: 1px solid crimson; */
}



.playlist div h1{
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(5,5,5,0.6281863087031687) 100%);
	position: absolute;
	width: 100%;
	font-size: 1.3rem;
	padding: 1px 5px  9px 5px;
	color: #ffffff;
	z-index: 1;
	/* border: 2px solid blue; */
}

.playlist div img{
	position: absolute;
	width: 50%;
	aspect-ratio: 16/9;
	user-select: none;
}


.addPlaylistOverlay{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(19, 19, 19, 0.801);
	z-index: 1000;
}



.toggPlaylist{
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	position: relative;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 250px;
	padding: 0 0 3px 0;
	border-radius: 5px;
	background: var(--nav-bgColor);
	/* background-color: var(--body-bgColor); */
	box-shadow: 0 1px 10px 0 var(--shadow);
	z-index: 1000
}



.toggPlaylist .toggButtonContainer{
	background-color: var(--body-bgColor);
	gap: 10px;
	padding:10px 6px;
	display: flex;
	flex-direction: column;
	overflow: auto;
	min-height: 85%;
}


.toggPlaylist p{
	color: inherit;
	width: 100%;
	padding: 9px 4px;
	border-bottom: 2px solid rgb(204, 203, 203);
	text-align: center;
}


.toggPlaylist div:nth-child(1){
	position: relative;
	display: flex;
}

.toggPlaylist  .loader {
	margin: 0px auto;
}


.overlayPlaylistClose{
	position: absolute;
	right: 6px;
	top: 7px;
	color: red;
	font-size: 1rem;
	border-radius: 10px;
	padding: 3px 8px;
}



.toggPlaylist .toggButtonContainer button{
	font-size: 1rem;
	border: 1px solid rgb(192, 186, 186);
	width: 100%;
	height: 40px;
	border-radius: 10px;
	padding: 9px 0;
	color: inherit;
}

.toggPlaylist button:hover{
  	background-color: rgba(175, 174, 174, 0.664);
}

.toggPlaylist .toggButtonContainer::-webkit-scrollbar-thumb{
	background:var(--theme-color); 
	border-radius: 2px;
}
  
.toggPlaylist .toggButtonContainer::-webkit-scrollbar {
	width: 10px;
}
  
.toggPlaylist .toggButtonContainer::-webkit-scrollbar-track {
	background: var(--body-bgColor); 
	border-radius:0px;
}


.createPlaylistAlone{
	background-color: var(--body-bgColor);
	display: flex;
	align-items: center;
	justify-content: center;
 
}
.createPlaylistAlone form{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}

.createPlaylistAlone form input{
	border: 2px solid springgreen;
	padding: 9px 4px;
	border-radius: 4px;
	text-align: center;
	background-color: rgb(44, 44, 44);
	color: white;
}

.createPlaylistAlone form button{
	border: 2px solid springgreen;
	padding: 9px 4px;
	border-radius: 4px;
	width: 100%;
	background-color: springgreen;
}

.createPlaylistAlone form input:focus{
  	outline: none;
}


/* FOOTER */

footer{
	/* margin: 10px 0 0 0; */
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	background:var(--footer-bgColor);
}

footer .footerContainer{
	width: clamp(86%,1330px,97%);
	display: flex;
	flex-direction: column;
	padding: 30px 10px 20px 10px;
	gap: 20px 0;
	color: #7a7a7c;
}


footer p{
	font-size: 0.8rem;
	text-align: center
}


footer hr{
  	border: 1px solid rgb(59, 57, 57);
}


footer .footerContainer ul {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}


footer ul li{
  	font-size: 1rem;
}


footer .footerBottom{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:  0 20px;
}


.footerBottom img{
  	width: 50px;
}


.legalContent{
  	width: 90%;
}


/* AGE VERIFICATION */

.ageVerification{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(37, 38, 43, 0.342);
	z-index: 1000;
	display: grid;
	place-items: center;
	top: 0;
	/* border: 1px solid cadetblue; */
}

.conditionConsent{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	max-width: 500px;
	height: auto;
	background-color: var(--body-bgColor);
	border-radius: 5px;
	padding: 15px 10px;
	text-align: center;
	box-shadow: 0 1px 10px 0 var(--shadow);
	margin: 5px 9px;
}

.conditionConsent p{
	/* margin-bottom: 5px; */
}


.conditionConsent p:nth-child(1){
	font-weight: bold;
	font-size: 1.5rem;
}

.conditionConsent button{
	display: block;
	width: 200px;
	height: 60px ;
	background-color: var(--theme-color);
	color: white;
	margin: 0 auto;
	border-radius: 4px;
	font-weight: bolder;
}