.videoPage{
	width: clamp(86%,1330px,97%);
	margin: 0px 0px 10px 0px;
	height: auto;
	padding:7px 6px;
	background-color:inherit;
	color: inherit;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 13px;
	/* border: 1px solid crimson; */
}



.titleTags{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	height: auto;
	gap: 8px 0px;
	/* border: 1px solid rgb(0, 233, 39); */
}


.titleTags  h2{
	font-size: 1.3em;
	font-weight: bolder;
	font-family:inherit;
	color: inherit;
	max-width: calc(100% - 25px);
	/* border: 1px solid rgb(163, 167, 192); */
}



.tagsContainer{
	position: relative;
	z-index: 1;
	/* border: 1px solid cyan; */
}


.arrowScroll{
	display: none;
	position: absolute;
	top:0;
	right: 0;
	width: 18px;
	height: 100%;
	color: rgb(8, 6, 6);
	font-size: 1.9rem;
	font-weight: bolder;
	font-variant: small-caps;
	line-height: 70%;
	cursor: pointer;
	text-align: center;
	background-color: rgba(240, 229, 229, 0.979);
	z-index: 3;
}

.leftArrow{
	left: 0;
}



.titleTags ul{
	display: flex;
	position:relative;
	justify-content: flex-start;
	overflow-x: scroll;
	scrollbar-width: none;
	list-style: none;
	gap: 5px;
	z-index: 2;
	/* border: 1px solid rgb(141, 247, 2); */
}


.titleTags ul::-webkit-scrollbar{
	display: none;
}



.titleTags ul li{
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.99rem;
	font-weight: lighter;
	border-radius: 3px;
	padding: 3px 7px;
	color: var(--color);
	background-color: var(--tagsBg);
	cursor: pointer;
	white-space: nowrap;
}


#catt{
	background-color: rgb(76, 35, 172);
	color: white;
	border-radius: 1px;
}


#starr{
	background-color: rgb(58, 52, 83);
	color: white;
	border-radius: 1px;
}




.videoPlayerBlock{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	max-height: 555px;
	/* border: 2px dotted rgb(27, 4, 230); */
}



.videoContainer {
	display: block;
	width: 74.2%;
	aspect-ratio: 16/9;
	/* border: 2px solid rgb(0, 4, 255); */
}



/* .interaction */


.interaction{
	display: flex;
	justify-content: flex-start;
	position: relative;
	width: 100%;
	height: 40px;
	color: inherit;
	font-size: 13px;
	font-weight: bold;
	background-color: var(--videoButtons);
}

.subInteraction{
	width: calc(100% - 40px);
    height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	gap: 5px;
	overflow: hidden;
}


.secondInteraction{
	position: absolute;
	background-color: var(--body-bgColor);
	right: 0px;
	bottom: 43px;
	width: 170px;
	height: auto;
	box-shadow: 0 1px 10px 0 var(--shadow);
}


.secondInteraction button{
	width: 100%;
	height: 40px;
	padding: 5px 2px;
	color: inherit;
    font-size: 13px;
	font-weight: bold;
}



.interaction .interr{
	display: flex;
	height: 100%;
	align-items: center;
	font-weight: bold;
	font-size: 13px;
	border: none;
	color: inherit;
	padding: 5px 8px;  
	/* border: 1px solid cadetblue; */
}

.interaction .interr:hover{
	background-color: rgba(128, 126, 126, 0.534);
}


.interaction p{
	color: inherit;
	display: flex;
	align-items: center;
	background: none;
	border-radius: 5px;
	padding: 5px 7px;
	width: auto;
}


.interaction .threeDot{
	width: 45px;
	height: 100%;
	font-size: 1.5rem;
	padding: 3px 5px 3px 6px!important;
	color: inherit;
}

.interaction .threeDot:hover{
	background: rgba(136, 132, 132, 0.24);	
}

.shareContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10;
	display: grid;
	/* justify-content: center; */
	place-items: center;
	background-color: rgba(0, 0, 0, 0.555);
}


.shareContent{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 20px;
	width: 400px;
	height: 200px;
	border-radius: 3px;
	background-color: var(--body-bgColor);
}

.shareCopy{
	width: 100%;
	height: 40px;
	border: 1px solid var(--search-border);
	border-radius: 3px;
	background-color: black;
	display: flex;
	justify-content: space-between;
}

.shareCopy p{
	color: white;
	overflow: auto;
	white-space: nowrap;
	font-weight: lighter;
	font-size: 0.9rem;
	width: calc(100% - 70px);
	height: 100%;

}

.shareCopy p::-webkit-scrollbar{
	display: none;
}

.shareCopy button{
	color: var(--theme-color);
	font-weight: bold;
	width: 60px;
	height: 100%;
	border: 2px solid var(--theme-color);
	/* background-color: violet; */

}

.shareSocial{
	display: flex;
	justify-content: space-evenly;

}
.shareSocial button{
	display: block;
	color: inherit;
	width:auto;
	height: auto;
	background-color: rgba(159, 159, 170, 0);
	/* border: 1px solid crimson; */
}





/* recmmandation */


.similarContainer{
	width: 100%;
	height: auto;
	padding-top: 15px;
	/* border: 1px solid cadetblue; */
}



.recommendation{
	display: grid;
    grid-template-columns: repeat(auto-fill, [col-start] minmax(200px, 1fr) [col-end]);
	gap: 20px 5px;
	width: 100%;
	height:auto;
	padding: 5px 0;
	margin: 0 0 15px 0;
	/* border: 2px solid rgb(235, 231, 5); */
}




.similarContainer .moreSimilar{
	color: inherit;
	display: block;
	padding: 10px 30px;
	border-radius: 5px;
	margin: auto;
	font-size: 1rem;
	border: 2px solid var(--theme-color);
}


/* bottomads */

.bottomAds{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;

	/* border: 2px solid rgb(7, 248, 248); */
}


.bottomAds img{
	max-width: 100%;

}





.passionBlock{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	width: 24.3%;
	height: 100%;
	max-height: 100%;
	color: inherit;
	/* border: 2px solid rgb(88, 238, 1); */
}

.passionBlock div {
	position: relative;
	width: 100%;
	aspect-ratio: 6/5;
	line-height: 0;
}

.passionBlock a {
	position: absolute;
	width: 100%;
	inset: 0;
	height: 100%;
	z-index: 1;
}


.passionBlock div img{
	object-fit: contain ;
	width: 100%!important;
	aspect-ratio: 6/5;
	height: 100%;
}



/* comments */

.comments{
	width: 100%;
	height: auto;
	/* border: 2px solid crimson; */
}

.commentsArea{
	width: 100%;
	/* border: 2px dotted purple; */
}

.commentsArea .oneComment{
	width: 100%;
	height: auto;
	display: flex;
	margin: 0 0 40px 0;
	/* border: 1px solid blue; */
}


.oneComment .imageContainer{
	display: flex;
	justify-content: center;
	gap: 5px;
	width: 60px;
	/* border: 2px solid rgb(0, 255, 13); */
}


.oneComment .imageContainer div{
	width: 40px;
	height: 40px;
	border-radius: 20px;
	border: 1px solid springgreen;


}



.oneComment .commentAndOthers{
	/* padding: 10px  0 0 5px; */
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* border: 2px solid rgb(243, 240, 245); */

}

.oneComment .commentAndOthers p:nth-child(1){
	font-weight: bold;
	text-decoration: underline;
	margin-bottom: 5px;
}




.likesResponse{
	/* border: 1px solid crimson; */
	margin:5px 0 0 0 ;
}


.likesResponse button{

	color: rgba(136, 133, 133, 0.932);
}






/* OVERLAY PLAYER */

.playerOverlay{
    display: flex;
    justify-content: center;
	align-items: flex-start;
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100%;
    color: inherit;
    z-index: 200000;
    padding: 10px 0;
    background: var(--overlayBg);
	overflow:auto;
}
  
  
.overlayContent{
    display: flex;
    position: relative;
    flex-direction: column;
	width:clamp(86%,1350px,97%);
    height:auto;
	min-height: 96vh;
    color: inherit;
	gap: 10px;
    padding: 5px 10px 12px 10px;
    border-radius:3px;
    background: var(--body-bgColor);
}

  
.videoPlayerBlockO{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	max-height: 555px;
	/* border: 1px solid crimson; */
}


.videoContainerO{
	display: block;
    width: 74.2%;
	aspect-ratio: 16/9;
}


.videoPlayerBlockO .passionBlock{
	width: 24.5%;
	height: unset;
}



.playlistLoader{
    display: flex;
	flex-direction: column;
    position: relative;
    border-radius: 1px;
    width: 100%;
	height: 230px;
   
}


.playlistHead{
	display: flex;
	align-items: center;
	height: 27px;
	padding: 0 8px;
	background-color:var(--playlistBorder);
	font-size: 0.9em;
	/* border: 2px solid yellow; */

}


.playlistLoaderList{
    display: flex;
	position: relative;
    height:100% ;
	width: 100%;
    gap: 10px;
    padding: 5px 5px 5px 5px;
    overflow: auto;
	scrollbar-width: none;
	border: 2.6px solid var(--playlistBorder);
}
  

.playlistLoaderList .videoContent{
	height:auto;
	width: 195px;
	border-radius:2px;
	border: 2px solid var(--search-border)
}

.playlistLoaderList .videoContent .videosTitle {
	padding: 2px 0;
}

.playlistLoaderList .videoContent .videoBlock img {
   pointer-events: none;
}

.playlistLoaderList .videoContent .videosTitle p {
	font-size: 0.9em;
	margin: 0px 20px 5px 0 ; 
}



.OverlayIcon{
    position:  absolute;
    top: 25px;
    left: 40%;
    z-index: 10;
    width: 50px ;
    height: 50px;
    display: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.993);
    -webkit-box-shadow: 1px 2px 14px 2px rgba(255,255,255,0.61); 
    box-shadow: 1px 2px 14px 2px rgba(255,255,255,0.61);
    /* border: 2px solid white; */
}


.activeOvid{
	pointer-events: none;
}


.activeOvid img{
    -webkit-filter: grayscale(100%)!important;
    filter: grayscale(100%)!important;
	/* filter: blur(5px); */
}

.activeOvid .OverlayIcon{
    display: block!important
}


.activeOvid span svg {
	fill: var(--theme-color);
}




@media screen and (min-width: 700px) {
	
	.playerOverlay::-webkit-scrollbar{
		width: 5px;
	}

	.playerOverlay::-webkit-scrollbar-thumb{
		background-color: var(--theme-color);
		z-index: 10000;
	}
	
}



.playlistLoaderList::-webkit-scrollbar {
	display: none;

}
  

  
.overlayClose{
    color: var(--color);
    font-size: 1.5rem;
    line-height: 0%;
    position: absolute;
	color: var(--theme-color);
    top: 0px;
    right:0px;
    width: 30px;
    height: 30px;
    z-index: 21;
	/* background-color: rgba(134, 138, 139, 0.801); */
	border-bottom-left-radius: 3px;
	border-top-right-radius: 3px;
    /* border: 3px solid rgb(247, 247, 247); */
}


.PlaylistLarr,.PlaylistRarr{
	display: block;
	position: absolute;
	width: 35px;
	height:35px;
	top: 50%;
	background-color:var(--playlistArrowBg);
	font-size: 2.5rem;
	text-align: center;
	border-radius: 50%;
	color: black;
	z-index: 50;
}

.PlaylistLarr{
	left: 8px;
	display: none;
}

.PlaylistRarr{
	right: 8px;
	display: none;
}




/* #my-player{
	line-height: unset!;
}
#my-player_html5_api{
	position: relative!important;
} */



/* .video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 2.5em!important;
} */

.video-js .vjs-slider {
  
    background-color: rgb(68, 67, 65)!important;
}

.video-js .vjs-volume-level:before {
    position: absolute;
    font-size: 1.6em!important;
    
}

.vjs-slider-horizontal .vjs-volume-level:before {
    top: -0.387em!important;
}


/* .vjs-control .vjs-mouse-display{
	display: none!important;
} */

.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal{
	width: 7em!important;
}


.vjs-volume-bar.vjs-slider-horizontal {
    width: 6em!important;
   
}


.video-js .vjs-control {
  
    align-items: center!important;
  
}


.vjs-play-control span::before{
	top: 5px !important;
}

.vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal {
    width: 7em!important;
   
}


.video-js .vjs-time-tooltip{
	outline: 3px solid rgb(255, 255, 255)!important;
	border-radius: 0px!important;
	top: -110px!important;
	font-size: 1em!important;
	line-height: 9;
	box-shadow: rgba(0, 0, 0, 0.164) 10px -30px 0px -11px inset;

	text-shadow: 0px 3px 1px rgba(0, 0, 0, 0)!important;
	/* right: -80px!important; */
}

.vjs-progress-control .vjs-mouse-display {
    /* visibility: hidden; */
	background-color: white!important;
	color: white;
	width: 3px!important;
   
    /* transition: visibility 1s,opacity 1s,font-size 0s!important; */
}

.video-js .vjs-progress-holder {
    flex: auto;
    transition: all 0s!important;
    height: 0.3em;
}

.video-js .vjs-progress-holder .vjs-load-progress div{
	display: none!important;

}




#my-player .vjs-control-bar{
	position:absolute;
	bottom: -1px;
	width: 100%;
	/* display: flex; */
	align-items: flex-end;
	height: 5.5em;
	padding-top: 4px;
	background: linear-gradient(180deg, rgba(138,138,138,0) 0%, rgba(0,0,0,0.7878501742493873) 100%);
	/* border: 1px solid crimson; */
}


#my-player .vjs-control-bar .vjs-progress-control{
	position: absolute;
	top: -15px;
	width: 100%;
	height: 50%;
}

#my-player .vjs-progress-holder {
	height: 0.4em;
}



#my-player .vjs-control-bar .vjs-play-progress {
	background-color: var(--theme-color)!important;
}



.video-js .vjs-play-progress:before {
		top: -0.15em!important;
}

.vjs-current-time,.vjs-duration,.vjs-time-divider{
	display: block!important;
}

.vjs-play-progress .vjs-time-tooltip, .vjs-play-progress:before {
	display: none!important;
	visibility: hidden;
}
.vjs-play-progress:hover .vjs-play-progress:before{
	/* visibility: visible; */
}

/* .video-js .vjs-progress-control:hover .vjs-play-progress:before{
	visibility: visible;
	display: block!important;
} */


.vjs-time-control,.vjs-time-divider {
	display: flex!important;
	align-items: center;
	height: 100%;
	font-size: 1.5em!important;

}


.video-js .vjs-play-control {
	cursor: pointer;
	display: flex!important;
	justify-content: center;
	align-items: center;

}

.vjs-button>.vjs-icon-placeholder:before{
	position: relative;
	top: 0;
	left: 0;
	font-size: 2.8em!important;
	line-height: 41px!important;
}



.video-js .vjs-play-control{
	order: 1;
	margin: 0 0 0 10px;
	/* border: 1px solid rgb(90, 20, 220); */
}

.video-js .vjs-play-control .vjs-icon-placeholder {
	height: 100%!important;
}


.video-js .vjs-current-time {
	padding-right: 4px!important;
	order: 2;
	/* border: 1px solid rgb(37, 220, 20); */
}


.video-js .vjs-time-divider {
	padding-left: 0em!important;
	padding-right: 0em!important;
	min-width: initial!important;
	order: 3;
	/* border: 1px solid rgb(214, 238, 2); */
}

.video-js .vjs-duration{
	order: 4;
	padding-left: 4px!important;
	/* border: 1px solid rgb(20, 173, 220); */
}

.video-js .vjs-volume-panel{
	order: 5;
	/* border: 1px solid rgb(220, 20, 20); */
}

.video-js .vjs-mute-control .vjs-icon-placeholder:before, .vjs-icon-volume-high:before {
	line-height: 38px!important; 
}

.vjs-playback-rate{
	order: 6;
	display: none!important;

	/* border: 1px solid rgb(197, 20, 220); */
}

.vjs-fullscreen-control{
	order: 7;
	margin-left: auto!important;
	/* border: 1px solid rgb(37, 220, 20); */
}






/* big play button */

.vjs-big-play-button{
	border: none!important;
	border-radius: 5px!important;
	font-size: 4.5em!important;
	background-color: rgb(29 29 29 / 62%)!important;
}

.vjs-big-play-button:hover .vjs-icon-placeholder:before{
	color: var(--theme-color)!important;
}