html, body{
margin: 0px;
padding:0px;
top: 0px;
bottom:0px;
left:0px;
right:0px;
font-family: "Google Sans Flex", sans-serif;
background:#FFFFFF;
height:100%;
width:100%;
}

a{
text-decoration: none;
color:#666666;
}

#logout{
background:linear-gradient(#ff6347, #ff0000);
color:#FFFFFF;
}

textarea, select{
font-family: "Google Sans Flex", sans-serif;
}

div {
-webkit-tap-highlight-color: transparent;
}



.dvload {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
display:none;
}
@keyframes l2 {to{transform: rotate(1turn)}}

#commentloader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
}
@keyframes l2 {to{transform: rotate(1turn)}}
    
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.loading-pulse {
animation: pulse 1.5s infinite ease-in-out;
}

#div2 {
width:500px;
height:97%;
background:#FFFFFF; 
position:relative;
z-index:50;
display:flex; 
justify-content:center; 
align-items:center; 
}

#viddiv{
overflow-y: auto;
overflow-x: hidden;
scroll-snap-type: y mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
position:absolute;
z-index:100;
}

#viddv{
overflow-y: auto;
overflow-x: hidden;
scroll-snap-type: y mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
position:absolute;
z-index:100;
}

.videodiv {
width:350px;
height:100%;
border-radius: 15px;
aspect-ratio: 9 / 16;
scroll-snap-align: start;
scroll-snap-stop: always;
inset:0;
margin:auto;
display:flex;
background:#000000;
justify-content:center;
align-items:center;
flex-shrink:0;
position:relative;
}


#divload{
width:350px; 
height:100%;
background:#CCCCCC; 
position:absolute; 
border-radius:15px; 
flex-shrink:0;
display:block;
z-index:100;
inset:0; 
margin:0 auto;
}

.myvideo{
border-radius:15px;
background:#000000;
object-position:center; 
width: 100%;
height: 100%;
}

.progress{
bottom:0px; 
left:0px;
right:0px;
width:95%;
margin:0 auto;
}
    
.textdiv{
bottom:25px; 
font-size:10pt; 
}
    
.navmenu{
width:fit-content; 
height:fit-content; 
right:-60px;
bottom:0px; 
line-height:1.0;
position:absolute; 
z-index:1000; 
display:flex;
}
    
#dv2{
width:500px;
display:none;
height:65px; 
background:#000000; 
justify-content:center; 
align-items:center; 
gap:40px;
text-align:center;
position:relative;
}
  
#divloadmenu{  
width:50px;
height:fit-content; 
bottom:0; 
right:-60px; 
}
    
.pfdiv{
width:150px; 
height:150px; 
margin-right:15px;
}
    
.pfdv{
display:flex; 
justify-content:flex-start;
flex-direction:row;
margin-top:0px;
}
    
.profilevid{
width:16.5%;  
height:225px;  
border-radius:15px; 
border:5px #FFFFFF solid;
box-sizing: border-box;
}

.textdiv{
padding:20px;
box-sizing:border-box;
border-radius:0 0 15px 15px; 
bottom:0;
}


#searchdiv{
width:77.5%; 
background:#FFFFFF; 
scrollbar-width:5px;
box-sizing:border-box;
position:absolute; 
}

.searchvid{
width:16.5%;  
height:225px; 
border-radius:15px; 
border:3px #FFFFFF solid;
box-sizing: border-box;
}

#prfbio{
width:400px;
font-size:12pt;
padding:0px;
margin-top:10px;
box-sizing:border-box;
line-height:1.3;
}

#prfxx{
width:100%;
margin-top:10px;
}

#profilediv{
width:77.5%; 
height:100%;
display:none; 
z-index:250;
top:0px;
bottom:0px;
right:0px;
position:absolute;
background:#FFFFFF; 
overflow-y:auto;
}

#pdtop{
width:77.5%; 
}
 
.prfd{
font-size:12pt;
}

.imgpf{
width:20px;
height:20px;
flex-shrink:0;
margin-right:2.5px;
}

#srdv{
width:100%;
}

.arbk{
left:0;
}

    
#logindv{
min-height:300px; 
width:500px;
border-radius:10px;
justify-content:center;
align-items:center;
}

.sv2{
display:block; 
font-size:8pt;
line-height:2.0;
width:fit-content;
color:#CCCCCC;
}
    
#editprofilediv{
height:550px; 
width:500px;
border-radius:10px;
display:flex;
justify-content:center;
align-items:flex-start;
flex-wrap:wrap;
background:#FFFFFF; 
overflow:auto; 
scrollbar-width:none;
}
 
#commentdiv{
width:375px; 
height:100%; 
right:0px;
position:relative;
background:FFFFFF; 
box-shadow: 0 0 2px 2px #DBDBDB; 
box-sizing:border-box; 
flex-shrink:0; 
display:none; 
justify-content:center; 
align-items:center;
}
    
.menuicon{
fill: #333333; 
cursor:pointer;
}


.icondv{ 
width:50px; 
height:50px; 
cursor:pointer;
flex-shrink:0;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#footer{
display:none;
width:100%; height:60px; justify-content:center; align-items:center; gap:40px;
}
    
#header{
padding:10px; 
box-sizing:border-box; 
background:transparent;
width:350px;
height:55px; 
position:absolute; 
top:0; 
display:flex; 
justify-content:start; 
align-items:center; 
z-index:100;
gap:10px;
}
 
#postform {
width:300px;
}  

.micon{
display:flex; 
cursor:pointer; 
justify-content:flex-start; 
align-items:center; 
gap:5px; 
height:fit-content;
border-radius:30px;
font-size:10pt; 
color:#222222; 
font-weight:500;
background:linear-gradient(#F2F2F2,#CCCCCC);
padding:10px;
}

.msvg{
fill:#333333; 
width:17.5px;
height:17.5px;
stroke-width:0.5;
}

.loader {
width: 50px;
aspect-ratio:1;
border-radius: 50%;
border: 2px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
}
@keyframes l2 {to{transform: rotate(1turn)}}

.cloader {
width: 20px;
aspect-ratio:1;
border-radius: 50%;
border: 1px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
}
@keyframes l2{to{transform: rotate(1turn)}}

.profileloader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
}
@keyframes l2{to{transform: rotate(1turn)}}

select{
padding-top:5px;
}

input{
font-weight:normal;
outline: none;
background-color:#FFFFFF;
}

input:focus{
background-color:#FFFFFF;
outline: none;
}

button{
font-weight:normal;
color:#FFFFFF;
background:linear-gradient(#0d98ba,#0072bb);
}

.icon{
border-radius:100%; 
background:rgba(102,102,102,0.75);
cursor:pointer;
margin-bottom:2.5px;
width:30px;
height:30px;
padding:10px;
}

.div1{
width:300px; 
z-index:10; 
display:flex;
position:fixed; 
left:0px; 
height:100%; 
padding:20px; 
top:0px; 
bottom:0px;  
box-sizing:border-box;
}


#nextprev{
display:block;
}

#div1cancel{
display:none;
}

    
#commentdvx, #commentdvy{
width:375px; 
}

#result, #postresult{
width:250px; 
}


#font2{
font-weight:800;
font-size:35pt; 
}

progress{
width:95%; 
background-color:rgba(102,102,102,0.5); 
}
progress::-moz-progress-bar {
background-color: rgba(102,102,102,0.5);
}
    
progress::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
}


#profilecancel {
margin:0px;
}


.morediv{
width:100%; 
height:100%; 
position:fixed; 
left:0px; 
top:0px; 
bottom:0px; 
background:rgba(0,0,0,0.75); 
z-index:1000; 
display:none; 
justify-content:center; 
align-items:flex-end;
}

#moredv{
height:fit-content; 
width:500px;
background:#FFFFFF; 
border-top-right-radius:25px; 
border-top-left-radius:25px; 
font-size:10pt; 
display:flex; 
justify-content:center; 
align-items:center;
flex-direction:column;
}

.morespan{
width:100%; 
height:50px; 
display:flex; 
justify-content:flex-start; 
align-items: center; 
font-weight:500;
color:#666666;
gap:10px;
cursor:pointer;
flex-wrap:wrap;
}

.rmorespan{
width:120px; 
height:fit-content;
background:#000000; 
color:#FFFFFF; 
padding:10px; 
border-radius:30px; 
position:absolute;
text-align:center;
}

#sharedv{
width:500px; 
min-height:100px;   
padding:20px;
box-sizing:border-box;
}
 
#divload{
display:block;  
}   

#sfont{
font-size:25pt;
height:60px; 
}
  
#searchinput{
font-size:12pt;
height:40px; 
}
   
#messagediv{
width:350px; 
height:100%; 
right:0px;
z-index:1000; 
position:fixed; 
background:#FFFFFF; 
box-shadow: 0 0 2px 2px #DBDBDB; 
box-sizing:border-box; 
display:none; 
overflow:hidden;
} 

#messagedvx{
height:50px; 
background:linear-gradient(#FFFFFF,#F2F2F2); 
top:0; display:flex; 
justify-content:start; 
align-items:center; 
position:absolute; 
font-size:10pt; 
z-index:100
} 

#messagedvy{
width:100%; 
min-height:20px; 
position:absolute; 
bottom:0;  
z-index:40; 
background:#FFFFFF; 
padding:10px; 
box-sizing:border-box; 
border-top:#CCCCCC 2px solid; 
display:flex; 
flex-shrink:0; 
justify-content: 
center; 
align-items:flex-start;
}

#monetizationdiv{
width:350px; 
height:100%; 
bottom:0px; 
top:0px; 
right:0px;
z-index:1000; 
position:fixed; 
background:#FFFFFF; 
box-shadow: 0 0 2px 2px #DBDBDB; 
overflow:hidden;
display:none; 
justify-content:flex-start; 
align-items:center; 
flex-direction:column;
} 

#subscriptionsdiv{
width:350px; 
height:100%; 
bottom:0px; 
top:0px; 
right:0px;
z-index:1000; 
position:fixed; 
background:#FFFFFF; 
box-shadow: 0 0 2px 2px #DBDBDB; 
overflow:hidden;
display:none; 
justify-content:flex-start; 
align-items:center; 
flex-direction:column;
} 

#notification{
display:flex; width:40px; height:40px; border-radius:100%; justify-content:center; align-items:center; 
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#profilevidcancel{
display:none; width:40px; height:40px; border-radius:100%; justify-content:center; align-items:center; cursor:pointer;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#searchvidcancel{
display:none; width:40px; height:40px; border-radius:100%; justify-content:center; align-items:center; cursor:pointer;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#refreshcancel{
display:none; width:40px; height:40px; border-radius:100%; justify-content:center; align-items:center; cursor:pointer;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#headermenu{
width:40px; display:none; height:40px; border-radius:100%; justify-content:center; align-items:center;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#headerrefresh{
width:40px; height:40px; border-radius:100%; display:flex; justify-content:center; align-items:center; cursor:pointer;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#headervolume{
width:40px; height:40px; border-radius:100%; display:flex; justify-content:center; align-items:center; cursor:pointer;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

#headersearch{
display:flex; width:40px; height:40px; border-radius:100%; justify-content:center; align-items:center; position:absolute; right:7.5px;
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}

.spancount{
 color:#555555;   
}

.prvid{
border-radius:15px;
}

#videopreviewdiv{
height:97.5%; 
width:350px; 
border-radius:10px; 
background:#F2F2F2; 
background:linear-gradient(#F2F2F2, #CCCCCC);
position:relative;
}

.thumbnail{    
border-radius:10px;
}

@media only screen and (max-width: 700px){
#monetizationdiv{
width:100%; 
height:100%; 
}
}

@media only screen and (max-width: 700px){
#subscriptionsdiv{
width:100%; 
height:100%; 
}
}

@media only screen and (max-width: 700px){
#videopreviewdiv{
height:100%; 
width:100%; 
border-radius:0px; 
background:linear-gradient(#CCCCCC, #000000);
}
}

@media only screen and (max-width: 700px){
.spancount{
color:#FFFFFF;   
}
}

@media only screen and (max-width: 700px){
#headermenu, #headersearch{
display:flex; 
background:linear-gradient(rgba(102,102,102,0.2), rgba(102,102,102,0.7));
}
}


@media only screen and (max-width: 700px){
#postform {
width:95%;
}
}

@media only screen and (max-width: 700px){    
#header{
width:100%;
}
}
    
@media only screen and (max-width: 700px){    
.thumbnail{    
border-radius:0px;
}
}
    
@media only screen and (max-width: 700px){    
#maindiv{    
} 
}  
    
@media only screen and (max-width: 700px){
#footer{
display:flex; 
}
}
    
@media only screen and (max-width: 700px){
.icondv{ 
width:45px; 
height:45px;
background:linear-gradient(rgba(102,102,102,0.5), rgba(102,102,102,0.9));
}
}
    
@media only screen and (max-width: 700px){
.menuicon{
fill: #FFFFFF; 
}
}
    
@media only screen and (max-width: 700px){
#editprofilediv{
width:100%; 
height:100%; 
border-radius:0px;
}
}    
    
@media only screen and (max-width: 700px){
#logindv{
min-height:100%; 
width:100%;
border-radius:0px;
}
}

@media only screen and (max-width: 700px){
.arbk{
left:10;
}
}

@media only screen and (max-width: 700px){
#srdv{
width:100%;
}
}

@media only screen and (max-width: 700px){
.imgpf{
width:18px;
height:18px;
}
}

@media only screen and (max-width: 700px){
.prfd{
font-size:10pt;
}
}

@media only screen and (max-width: 700px){
#pdtop{
width:100%; 
}
}

@media only screen and (max-width: 700px){
#profilediv{
width:100%; 
height:100%; 
left:0;
}
}

@media only screen and (max-width: 700px){
#prfxx{
width:92.5%;
}
}

@media only screen and (max-width: 700px){
#prfbio{
width:100%;
font-size:11pt;
padding:10pt;
}
}

@media only screen and (max-width: 500px){
.searchvid{
width:50%;  
height:200px; 
}
}

@media only screen and (max-width: 700px){
#searchdiv{
width:100%; 
scrollbar-width:none;
}
} 

@media only screen and (max-width: 700px){
#containerdiv2{
width:100%;
height:100%; 
}
}

@media only screen and (max-width: 700px){
.videodiv{
width:fit-content;
min-width:100%;
height:100%;
border-radius: 0px;
background:#000000;
}
}

@media only screen and (max-width: 700px){
.pfdv{
margin-top:0px;
}
}
    
@media only screen and (max-width: 700px){
.pfdiv{
width:85px; 
height:85px; 
margin-right:15px;
}
}

@media only screen and (max-width: 700px){
.myvideo{
border-radius:0px;
margin:0;
width:100%; 
height:100%;
}
}

@media only screen and (max-width: 700px){
.profilevid{
width:33.3%;  
height:200px; 
border-radius:0px;
border:1px #FFFFFF solid;
box-sizing: border-box;
}
}

@media only screen and (max-width: 700px){    
.dvload {
display:inline-block;
}
}

@media only screen and (max-width: 700px){
#divloadmenu{    
bottom:20px; right:10px;
}
}   
    
@media only screen and (max-width: 700px){
#divloadmenu2{    
bottom:15; 
}
}  
    
@media only screen and (max-width: 700px){
#divload{
border-radius:0px;
background:#000000;
display:block;
width:100%;
}
}    
    
@media only screen and (max-width: 700px){
.navmenu{
right:5px; 
padding-bottom:20px;
}
}    
    
@media only screen and (max-width: 700px){
.textdiv{
font-size:8pt; 
}
}
    
 @media only screen and (max-width: 700px){
.progress{
width:100%;
}
}
     
@media only screen and (max-width: 700px){
#div2{
width:100%; 
height:100%; 
border-radius:0px;
background:#000000;
}
}
    
@media only screen and (max-width: 700px){
#dv2{
width:100%;
display:flex;
}
}
    
@media only screen and (max-width: 700px){
#commentdiv{
width:100%; 
bottom:0px;
height:70%;
position:fixed;
z-index:500 ;
}
}
    
@media only screen and (max-width: 700px){
html, body{
background:#000000;
}
}
    
#commentdvy{
transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
transition: transform 0.1s ease-out; 
}

#loader {
display: none;
}
.htmx-request #loader, 
.htmx-request.htmx-indicator {
display: none !important;
}
    
input::placeholder {
color:#999999;/* Red */
opacity:1;/* Required for Firefox to show full color */
}
    
.playico {
fill: #FFFFFF;    /* Changed : to ; */
stroke: #FFFFFF;
}

#postbtn{
display:block;
padding:10px; 
font-size:10pt; 
width:fit-content; 
color:#FFFFFF; 
border-radius:30px; 
border:none; 
outline:none; 
height:40px; 
font-weight:bold; 
}

#postbutton{
display:none;
padding:10px; 
font-size:10pt; 
width:fit-content; 
color:#FFFFFF; 
border-radius:30px; 
border:none; 
outline:none; 
height:40px; 
font-weight:bold; 
}

.posttextarea{
font-size:10pt; 
width:90%; 
border:none; 
outline:none; 
height:50px; 
max-height:200px; 
padding-top:5px; 
resize: none; 
border-bottom:1px #C0C0C0 solid; 
border-top:1px #C0C0C0 solid;
padding:15px;
box-sizing: border-box;
border-radius:5px;
}

#postdiv{
width:600px; 
height:100%;
position:fixed; 
z-index:255; 
background:#FFFFFF; 
margin:auto; 
left:0; 
right:0; 
bottom:0; 
top:0; 
text-align:center; 
display:none; 
justify-content:center; 
align-items:center; 
flex-direction:column; 
overflow:auto
}

#picon{
cursor:pointer; 
position:absolute; 
left:15px; 
width:40px; 
height:40px; 
border-radius:100%; 
background:#FFFFFF; 
display:flex; 
justify-content:center; 
align-items:center;
}

#postdvx{
width:100%; height:60px; position:absolute; top:0; display:flex; justify-content:center; align-items:center; z-index:100;  
}

#pspan{
width:fit-content; height:fit-content; padding:10px; display:block; background:#FFFFFF; border-radius:30px; font-size:10pt;    
}

@media only screen and (max-width: 700px){
#postbutton{
display:block;
}
}

@media only screen and (max-width: 700px){
#postbtn{
display:none;
}
}

@media only screen and (max-width: 700px){
#messagediv{
width:100%; 
height:100%; 
right:0px;
}
}
@media only screen and (max-width: 700px){
#messagedvx, #messagedvy{
width:100%; 
}
}
    
@media only screen and (max-width: 700px){
#searchinput{
font-size:10pt;
height:25px; 
}
}
    
@media only screen and (max-width: 700px){
#sharedv{
width:100%; 
}
}
    
@media only screen and (max-width: 700px){
#moredv{
width:100%; 
}
}
    
@media only screen and (max-width: 700px){
#followdv{
width:90%; height:90%; 
}
}

@media only screen and (max-width: 700px){
progress{
width:100%; 
}
}


@media only screen and (max-width: 700px){
.profileloader{
}
}

@media only screen and (max-width: 700px){
#font2{
font-weight:800;
font-size:85pt; 
letter-spacing:-10px;
}
}


@media only screen and (max-width: 700px){
#postdiv{
width:100%; 
height:100%;
border-radius:0px;
}
}

@media only screen and (max-width: 1200px){
#commentdvx, #commentdvy{
width:100%; 
}
}

@media only screen and (max-width: 700px){
.div1{
display:none;
width:100%;
position:fixed;
z-index:50; 
}
}

@media only screen and (max-width: 1200px){
#div1cancel{
display:block;
}
}

@media only screen and (max-width: 700px){
.div3{
display:none;
width:100%;
position:fixed;
}
}

@media only screen and (max-width: 700px){
#nextprev{
display:none;
}
}

progress::-webkit-progress-value {background-color: #FFFFFF;}
progress::-moz-progress-bar {background-color:#FFFFFF}

/* Style the custom button container */
.custom-file-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:fit-content;
  height:fit-content;
  padding:10px;
  background: linear-gradient(#F2F2F2, #CCCCCC);
  color: #666666;
  font-size: 10pt;
  font-weight: 500;
  border-radius: 30px; /* Matches your .micon profile buttons */
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  user-select: none;
  transition: opacity 0.2s ease;
}
/* Subtle hover effect */
.custom-file-upload:hover {
  opacity: 0.9;
}
/* Hide the ugly native browser file input completely */
.custom-file-upload input[type="file"] {
  display: none;
}