/* Custom styles for the video player */
        body {
            font-family: 'Inter', sans-serif;
            displayk: flex;
            flex-directionk: column;
            min-height: 100vh;
            background-color: #1a202c;
            color: white;
            padding: 0;
            align-items: flex-start;
			overflow:hidden;
        }
.help_input{ display:none; }
        /* Responsive styles for screens larger than 700px */
        @media (min-width: 701px) {
            body {
                padding: 1rem;
                align-items: flex-start;
            }
        }

        .video-container {
            position: relative;
            max-widthk: 900px;
            width: 100%;
			max-height:65vh;
            background-color: #000;
            transition: aspect-ratio 0.3s ease-in-out;
            max-heightk: 90vh;
        }
        
        #videoPlayer {
            width: 100%;
            height: 100%;
        }

        .controls-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
            padding: 1rem;
            opacity: 0;
            transition: opacity 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .video-container:hover .controls-overlay,
        .video-container.playing .controls-overlay {
            opacity: 1;
        }

        .progress-bar-container {
            width: 100%;
            height: 8px;
            background-color: rgba(255, 118, 195, 0.2);
            border-radius: 9999px;
            cursor: pointer;
        }

        .progress-bar {
            height: 100%;
            background-color: #FF76C3;
            border-radius: 9999px;
            transition: width 0.1s linear;
        }
        
        .controls-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .control-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            color: #FF76C3;
            transition: transform 0.2s ease;
        }

        .control-button:hover {
            transform: scale(1.1);
        }

        .volume-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .volume-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 60px;
            height: 4px;
            background: rgba(255, 118, 195, 0.5);
            outline: none;
            border-radius: 9999px;
            cursor: pointer;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            background: #FF76C3;
            border-radius: 50%;
            cursor: pointer;
        }

        .volume-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background: #FF76C3;
            border-radius: 50%;
            cursor: pointer;
        }

        .icon {
            width: 24px;
            height: 24px;
            fill: #FF76C3;
        }

        /* Fullscreen styles */
        .video-container.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            max-width: unset;
        }

        /* Responsive styles for smaller screens */
        @media (max-width: 700px) {
            .video-container {
                width: 100%;
                margin: 0;
                border-radius: 0;
            }
        }

.close_forYou_vidBtn{display:none;}
#mob_videos_list_output{display:none}
#videos_list_output{display:block}

.main_header_title
{
float:left;width:100%;height:40px;line-height:40px;margin-bottom:10px;margin-top:20px;font-size:1.1em;font-family: serif;text-align:center;
color:#505252;
}
.close_playerBtn
{
left:1%;width:35px;height:35px;background:#fff;border-radius:50%;cursor:pointer;position:fixed;top:15px;color:red;font-size:0.9em;
border:0px;outline:none;font-weight:500;z-index:3;
}
.close_playerBtn:hover{background:red;color:#fff;}
.card_div
{
float:right;width:26%;height:100vh;margin-bottomk:30px;margin-topk:0px;background:#FFF;border-radiusk:10px;
  display: flex;
  flex-wrap: wrap;
justify-content: space-around;
   overflow:auto;
   position:absolute;
   right:0px;bottom:0px;
}
.single_trend_div
{
float:left;width:80%;height:270px;margin-bottom:15px;margin-top:15px;border-radius:10px;text-decoration:none;background:#1a202c;	
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.single_trend_div:hover{border:1px solid #acfa79;background:#000;}
.single_trend_div:active{border:1px solid #fa6388;}
.trend_img_div
{
float:left;width:100%;height:175px;margin-leftk:1%;display:flex;justify-content:center;align-items:center;border-radius:10px 10px 0 0;
}
.trend_img
{
float:left; max-width:99%;max-height:99%;border-radiusk:10px 10px 0 0;
}
.play_icon_span
{
float:right;width:45px;height:45px;margin-top:-100px;margin-right:40%;border-radius:50%;display:flex;justify-content:center;align-items:center;		
background-image: linear-gradient(to right, #fff, #fff);
}
.play_icon_span:hover{background-image: linear-gradient(to right, #FF76C3, #DAF7A6);}
.play_icon
{
width:20px;height:20px;
}
/*.trend_song_title
{
float:left;width:96%;height:30px;line-height:30px;margin-left:2%;font-size:1em;font-weight:bold;color:#fff;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background:orange;
}*/
.vidName_reco
{
float:left;width:96%;height:30px;line-height:30px;margin-left:2%;font-size:0.9em;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;	
}

.main_view_div
{
float:left;width:100%;height:50px;line-height:50px;margin-leftk:2%;background:#fff;margin-top:10px;border-top:1px solid #ededed;border-radiusk:0 0 10px 10px;
color:#F54927;font-size:0.8em;	
}
.com_icon
{
float:right;width:40px;height:40px;margin-top:5px;margin-right:1%;
}
.comt_output
{
float:right;height:40px;line-height:40px;margin-top:5px;margin-right:1%;	
}
.view_output
{
float:left;height:40px;line-height:40px;margin-left:1%;margin-top:5px;	
}
.single_view_div
{
float:left;width:100%;height:50px;line-height:50px;margin-leftk:2%;background:#A9EBC3;margin-top:10px;border-top:1px solid #ededed;border-radius:0 0 10px 10px;
color:#F54927;font-size:0.8em;displayk:none;
}
.forYou_vid
{
width:100px;height:35px;line-height:35px;margin-topk:10px;margin-left:30%;backgroundk:#F54927;color:#fff;cursor:pointer;border-radius:10px;font-weight:bold;
background-image: linear-gradient(144deg,#AF40FF, #F54927 50%,#00DDEB);
}
.forYou_vid:hover{
background-color: #cf245f;background-image: linear-gradient(to bottom right, #00DDEB, #A9EBC3, #5B42F3);
}
.shell_main_play_div
{
float:left;width:69%;height:97.2vh;background:red;position:fixed;		
}
.main_play_div
{
float:left;width:100%;max-height:76vh;background:#000;
}

.main_wallAd
{
float:left;width:100%;height:20vh;margin-top:1vh;background:#fff;color:#000;left:0px;positionkk:fixed;bottomk:1vh;
}
.vid_nameLebal
{
float:left;width:98%;margin-left:1%;margin-bottom:8px;backgroundk:purple;font-weight:600;font-size:0.9em;	
}

.commentDiv
{
float:left;width:100%;height:80vh;bottom:0px;background:#fff;position:fixed;display:none;	
}
.sub_commentDiv
{
float:left;width:63.8%;margin-leftK:1%;background:#fff;	
}
.freeSpace
{
float:right;width:32%;height:77vh;margin-right:2%;margin-top:10px;background:#ededed;border-radius:10px;	
}
.comment_dispDiv
{
float:left;width:100%;height:72vh;background:#fff;overflow:auto;border-radius:10px;	
}
.singleComm_dispDiv
{
float:left;width:98%;margin-left:1%;background:#f5f5f5;margin-bottom:5px;border-radius:10px;	
}
.com_home
{
float:left;width:63.8%;background:#fff;position:absolute;	
}
.com_home_position
{
float:left;width:63.8%;height:50px;margin-bottom:10px;
}
.close_commDisp
{
float:right;width:35px;height:35px;margin-right:2%;margin-top:5px;margin-bottom:5px;border-radius:50%;cursor:pointer;color:red;border:1px solid red;positionk:absolute;rightk:5%;topk:5px;	
}
.vidComm_count
{
float:left;max-width:70%;height:40px;line-height:40px;margin-left:2%;color:#000;font-size:0.9em;	
}
.comProfile
{
float:left;width:45px;height:45px;margin-left:1%;margin-top:5px;background:red;border-radius:50%;	
}
.comUsername
{
float:left;min-width:60%;max-width:80%;height:30px;line-height:30px;margin-left:1%;backgroundk:pink;color:#505252;font-size:0.9em;font-weight:bold;	
}
.commentOutput
{
float:left;min-width:50%;max-width:80%;margin-left:1%;backgroundk:green;color:#000;font-size:0.8em;		
}
.comOptionBtn
{
float:right;width:30px;height:30px;margin-right:1%;margin-top:5px;backgroundk:green;cursor:pointer;	
}
.comment_inptDiv
{
float:left;width:98%;heightk:45px;margin-left:1%;bottom:0px;positionK:absolute;backgroundk:red;
}
.commentInput
{
float:left;width:86%;height:37px;line-height:37px;color:#000;font-size:0.9em;padding:5px;border-radius:20px;border:0px;outline:none;background:#E8FFF2;text-align:center;
letter-spacing: 0.5px;	
}
.comment_sendBtn
{
float:right;width:40px;height:35px;line-height:35px;margin-right:1%;margin-top:5px;border-radius:50%;text-align:center;background:#000;color:#fff;cursor:pointer;	
}
.commentErorr
{
float:left;width:86%;height:20px;line-height:10px;color:#000;font-size:0.9em;padding:5px;backgroundk:#E8FFF2;text-align:center;
letter-spacing: 0.5px;	
}

@media screen and (max-width: 900px) 
{
.main_home_div
{
height:70px;
}
.main_header_div
{
margin-top:5px;
}
.main_search_div
{
float:left;width:94%;margin-left:3%;
}
.ser_input
{
width:75%;
}
.search_result
{
float:left;width:96%;margin-left:2%;
border-radius:10px;display:none;overflow:auto;
}
.menu_shell_div
{
width:100%;display:none;background-color: rgba(117, 0, 0, 0.4);	
}
.menu_div
{
width:60%;min-width:0%;height:100%;
}
.menu_clocing_div
{
float:right;width:38%;height:100%;display:block;
}
.menu_btn
{
width:70%;margin-left:15%;font-weight:bold;backgroundk:transparent;
}

.single_trend_div
{
float:left;width:93%;
}
.#trend_img_div
{
height:150px;width:100%;
}


.sub_cb_video_player_div
{
width:100%;height:480px;display:flex;justify-content:center;align-items:center;	
}
.right_ad_div{display:none;}
.cb_video_lebal
{
width:75%;	
}
.positioning_div{margin-bottom:0px;}

}
@media screen and (max-width: 800px) 
{
.shell_main_play_div
{
width:60%;

}
.card_div
{
float:right;width:30%;
}
.#single_trend_div
{
float:left;width:23%;height:240px;margin-leftk:1%;
}	
  .#video-container {
height:auto;
			max-height:90vh;
			}
	
}
@media screen and (max-width: 700px) 
{
	
.shell_main_play_div
{
width:100%;height:auto;background:purple;position:relative;	

}	
.card_div
{
width:100%;position:fixed;displayk:none;
}
#mob_videos_list_output{display:none}
#videos_list_output{display:none}
.close_forYou_vidBtn
{
left:1%;width:35px;height:35px;color:#fff;background:#E33B62;border-radius:50%;cursor:pointer;position:fixed;top:15px;font-size:1em;
border:none;outline:none;font-weight:500;z-index:3;display:block;
}
.close_forYou_vidBtn:hover{background:#5C0013;color:#fff;}
	
.single_trend_div
{
float:left;width:70%;height:340px;margin-leftk:1%;
}
.trend_img_div
{
height:250px;width:100%;backgroundk:purple;
}
.sub_cb_video_player_div
{
width:100%;height:360px;display:flex;justify-content:center;align-items:center;	
}
.main_play_div
{
float:left;width:100%;overflowk:auto;backgroundk:yellow;	
position:sticky;
top:0px;
}


.main_wallAd
{
float:left;width:98%;height:300px;margin-left:1%;color:#000;displayk:none;
}

.sub_commentDiv
{
float:left;width:100%;margin-left:0%;
}
.com_home
{
width:100%;
}
.com_home_position
{
width:100%;height:50px;
	
}
@media screen and (max-width: 600px) 
{
.main_header_title
{
float:right;width:95%;height:40px;line-height:40px;margin-leftk:3%;margin-bottom:20px;margin-top:30px;font-size:1.3em;font-familyk: serif;font-weight:bold;
border-radius:10px 10px 0 0;	
}
.single_trend_div
{
/*float:left;width:40%;height:210px;margin-leftk:2.5%;*/
float:left;width:90%;height:310px;
}	
.trend_img_div
{
float:left;width:100%;height:230px;	
}
	
}

@media screen and (max-width: 300px) 
{
.single_trend_div
{
float:left;width:90%;height:230px;
}
.trend_img_div
{
float:left;width:100%;height:150px;	
}	
	
}