@keyframes expandCollapse {
  0% {
    height: 0;
  }
  50% {
    height: 100vh;
  }
  100% {
    #height: 0;
  }
}
html{
  background: #000; /* THIS is the key */
}


body{opacity:0; transition: opacity 0s;font-family:roboto;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */


#overflow: hidden; /* Disable scrolling */
scrollbar-width: none; /* Hide scrollbar */
-ms-overflow-style: none;  /* IE and Edge */

overscroll-behavior-y: contain;
touch-action: pan-y;


  }

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
   box-sizing: border-box;
}

a:link,a:visited{text-decoration:none;color:#333;}
.gridContent{padding:0px;}
.grid-item img{height:auto;max-width:100%; overflow:hidden;}
.grid-item iframe{height:auto;max-width:100%; overflow:hidden;pointer-events:none;}
.grid-item::-webkit-scrollbar{
	height:0px;
	}

.break{word-break: break-all;}
/*****************HAMBURGER*************************/
.headerx{display:block;border:0px solid gold;padding:10px 0 0 0;background-color:#000;height:50px;}
.hamburger{cursor:hand;display:inline-block;position:relative;top:-14px;left:10px;float:left;font-size:30px;width:30px;height:50px;color:#FFF;border:0px solid orange;text-align:center;line-height:45px; transform:rotateY(0deg) rotate(90deg); transition: transform 3s;z-index:2;}
.hamburgerClose{cursor:hand;display:inline-block;font-size:45px;width:50px;height:50px;color:#FFF;border:0px solid orange;text-align:center;line-height:50px;}
.hamburgerM{cursor:hand;display:inline-block;font-size:20px;width:100%;height:50px;border-bottom:0.01px solid orange;text-align:left;line-height:50px;padding:0px 0px 0px 15px;}
.hamMenu{width:100%;overflow:auto;text-align:left;}
.siteTitle{cursor:hand;display:flex;justify-content:left;position:relative;left:0px;line-height:25px;font-size:17px;COLOR:#fff;font-family:Roboto;border:0px solid red;z-index:1;}
.ifloggedin{cursor:hand;display:inline-block;position:relative;top:-35px;line-height:0px;float:right;z-index:2;border:0px solid orange;padding:10px 10px 0px 10px; height:0px;}
.think{display:inline-block;backgrouxnd-color:#FFF;color:#FFF;margin:0px 0px 0px 0px;border:0px solid #F00;padding:0px 5px 0px 15px;}
/***************************************************************/
/************************music-player****************************/
			.songsDetail {
				display: flex;
				flex-direction: column;
			postion:fixed;top:0;width: 100%; heixght:100vh; backgxround-color: #fff; padding: 10px;border:0px solid #f00;
				background: linear-gradient(to right, #f0f0f0, #d9d9d9);
				transition: background 10.3s;
				}

@keyframes expandCollapse {
  0% {
    height: 100vh;
	width:0;
  }
  50% {
    #height: 50vh;
  }
  100% {
    height: 100vh;
	width:100vw;
  }
}
		
		.listenAll{
		color:#FFF;padding:5px;color:#F00;text-shadow:none; float:right;	
		}
		
		.customPlayerDefault{
				display: flex; opacity:1; align-items: center; width: 100vw; height:8vh; background-color: #fff; padding: 10px; borderx-radius: 30px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);			
		}

		
		.customPlayerContainer{
				display:flex;
				position:fixed;
				bottom:50px;
				background-color:#fff;
				width:100vw;
				opacity:0.1;
			}
		
		
		
		.customPlayerDefaultFullHeight{
				display: flex;
				opacity:1; 
				align-items: center; 
				width: 100vw; height:8vh; 
				background-color: #fff; 
				padding: 10px; 
				borderx-radius: 30px; 
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
		}

		.customPlayer {
				display: block;
				flex-direction: column;
				position:fixed;
				align-items: center;
				justify-content: center;
				width: 100vw;
				top:0;
				max-width: 600px;
				height: 100vh;
				#border-radius: 15px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
				padding: 20px;
				bottom:-50px;
				background: linear-gradient(to right, #fff, #000);
				#border:4px solid #f00;
				#background-color:#fff;
				#transform: translateY(0);
			}			

		.customPlayerAnimation {
			    animation: expandCollapse 0.1s ease-in-out;
		}
		
		.disableClick {
				point-events:none;
		}
		.trackTitleDefault {
				width: 150px; height: 30px; background-color: #fff; color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: left; cursor: pointer;margin: 0 0px 0 5px;font-size:12px;			}			

			.trackTitle {
				flex-direction: column; justify-content:center; overflow-y:auto; font-weight:bold; position:relative;top:10px;
width: 100%; height: 34px; background-color: transparent; color: #fff; border-radius: 0; display: flex; margin: 20px 0 0px 0 0px;font-size:22px;			
			}			

			.timeUpdateDefault{
				flex-grow: 1; text-align: center; padding: 0 10px;color:#333;font-size:12px;				
			}
			.timeUpdate{
				display: flex; flex-grow: 1; text-align: center; padding: 0 10px;color:#333;font-size:12px;	position:fixed;bottom:200px !important;right:35px;			
			}
			
			.prevButtonDefault{
				width: 30px; height: 30px; background-color: #fff; color: red; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;margin: 0 10px 0 0;				
				
			}
			.prevButton{
				postion:fixed;bottom:50px;float:left;
				width: 60px; height: 60px; background-color: transparent; color: #FFF;  border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;margin: 0 10px 0 0;				
				
			}
			.prevButtonWrapper{
				display: flex; position:fixed;left:85px;float:left;bottom:100px;
			}
			
			.prev_icon{
				font-size:48px !important;
			}
			
			
			.nextButtonDefault{
				width: 30px; height: 30px; background-color: #fff; color: red; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;margin: 0 10px 0 0;				
			}
			
			.nextButton{
				display: flex; postion:fixed;bottom:0px;float:right;
				width: 60px; height: 60px; background-color: transparent; color: #FFF; border-radius: 50%; alignx-items: center; jusxtify-content: center; cursor: pointer;margin: 0 0px 0 0;				
			}
			
			.nextButtonWrapper{
				display: flex; position:fixed;right:85px;float:right;bottom:100px;
			}

			.next_icon{
				font-size:48px !important;
			}
			

			.repeatModeDefault{
				width: 30px; height: 30px; background-color: #fff; color: red; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;margin: 0 10px 0 0;				
				}
			
			.repeatMode{
				width: 30px; height: 30px; background-color: transparent; color: red; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;margin: 0 10px 0 0;				
				}

			.repeatModeWrapper{
				display: flex; position:fixed;right:35px;float:right;bottom:114px;
			}


			.playButtonDefault{
				width: 30px; height: 30px; backgrouncd-color: #fff !important; color: red; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;margin: 0 10px 0 0;				
				}
			
			.playButton{
				}
			
			.playButtonWrapper{
				display: flex; align-items: center; justify-content: center; position:fixed;left:0;margin-left:39%;bottom:90px; border:0px solid #FFF; border-radius: 60px; padding:25px 15px 25px 25px; background-color: #fff !important;
			}
			
			.playButton_icon{
				font-size:55px !important; color: #333;
			}
			
			.musicButtonsDefault{
				display:flex;
				}

			.musicButtons{
				display:flex; position:fixed;bottom:100px;
				}

			.progressContainerDefault{
				width: 100%; background-color: #ddd; height: 5px; border-radius: 5px;		
				}

			.progressContainer{
				display:flex; position:fixed; bottom:200px;
				width: 80%; background-color: #fff; height: 1px; border-radius: 5px;margin:0 30px 0 30px;		
				
			}

			.progressBarDefault{
				width: 80%; height: 100%; background-color: #f00; border-radius: 0px;
			}

			.progressBar{
				
			}



			.progressBar {
				width: 100%;
				height: 10px;
				background: #ccc;
				border-radius: 5px;
			}
			
			.play_shuffle{
				display:flex !important; position:fixed !important; bottom:114px !important; border:0px solid red !important;
				left:35px;float:left;width: 30px; height: 30px; background-color: #fff; color: red; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer;
			}

			.minimizeKeyArrowDown{
				display:flex !important; position:fixed !important; top:10px !important; border:0px solid red !important;
				left:35px;float:left;width: 30px; height: 30px; background-color: #fff; color: red; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer;
				}
			.songLyrics{
				display:flex !important; position:fixed !important; top:10px !important; border:0px solid red !important;
				left:85px;float:left;width: 80px; height: 30px; background-color: #fff; color: #333; border-radius: 15px; align-items: center; justify-content: center; cursor: pointer;padding:0 5px 0 5px;
				}
			
			
			.button {
				padding: 10px 20px;
				font-size: 18px;
				margin: 5px;
				cursor: pointer;
				transition: background 0.3s;
			}
			
			.button:hover {
				background: #007bff;
				color: white;
			}


			.displayNone {
				display:none;
			}
			
			.thumbNail{
			border:0px solid #ccc;bordzer-radius:50px;height:42px;max-width:40px;	
			}

			.trackCoverDefault {
			border:0px solid #f00;
			}

			.trackCover {
			display:flex; justify-content:center;border:0px solid #f00;border-radius:5px;min-height:30vh;min-width:100%; background-color:transparent;
			margin:30px 0 0 0;
			}
			
			.displayFlex {
				display:flex;
			}


/***************************************************************/
/*OPEN MESSSAGES - SLIDE IN FROM LEFT
/*--------------------------------------------------------------*/

#spn{
display:none;
}

/***************************************************************/

body{opacity:1; transition: opacity 5s;margin:0;font-family:arial;color:#333;text-shadow:1px 1px #ccc;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
overscroll-behavior-y: contain;
touch-action: pan-y;
  }

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

a.menu:link,a.menu:visited{
text-decoration:none;padding:2px;font-size:14px; font-family:sans-serif; font-weight:bold;
color:#2d2d2c;}

a.menu:hover,a.menu:active{
text-decoration:none;padding:2px;font-size:14px; font-family:sans-serif;
color:#F00;}

#main{background-color:ghostwhite;padding-bottom:200px;margin:0 auto;}

/**/
#mainContent{contain: paint; padding-top: 0vh; padding-bottom: 20vh;}

.head{vertical-align:middle;height:70px;line-height:70px;width:100%;color:gold;background-color:#000;}

.header{vertical-align:middle;height:100px;line-height:100px;width:100%;color:gold;background-color:#000;}

.tit{font-size:40px;font-family:arial black;text-align:center;padding-left:10px;text-shadow:2px 2px #FFF;}

.title{font-size:54px;font-family:arial black;text-align:center;padding-left:10px;text-shadow:2px 1px #FFF;}

.nmmargin{margin-top:50px;}

.nm{font-size:28px;text-shadow:2px 2px #ccc;}

.fac{margin-top:40px;}

.share{display:block;position:fixed;bottom:0;background-color:#fff;width:100%; text-align:right;height:30px;}

.shareX{position:relative;text-align:center;vertical-align:middle;width:100%;background-color:gold; height:30px;}

.menudiv{height:30px;line-height:30px;}

.form{margin-top:20px;}

.sun{font-size:28px;color:F00;}

.contactus{font-weight:bold;font-size:20px;text-shadow:2px 1px #FFF;}

.contacto{border:2px solid #333;height:50px;padding:15px;width:90%;background-color:#f6fafe;}

.contactoarea{border:2px solid #333;height:150px;padding:15px;width:90%;background-color:#f6fafe;}

.contactosubmit{border:2px solid #333;background-color:gold;color:#333;padding:5px 20px 5px 20px;font-weight:bold;text-shadow:1px 1px #FFF;}


/*******************NEW MOBILE*******************************/
.activeLikes{opacity:0.9;padding:5px;background-color:rgba(0,0,255,0.2);border-radius:50px;}
.posts-like-iconx{opacity:0.9;padding:5px;background-color:rgba(0,0,255,0.2);border-radius:50px;}

.divs-container:nth-child(odd),.divs-container:nth-child(even){display:block;min-width:325px;overflow:hidden;background-color:#FFF;border:1px solid #eee;width:100%;min-height:375px;padding:10px;margin:0px 0 1px 0px;height:auto;}

.divs-container:nth-child(2){display:block;min-width:325px;overflow:hidden;background-color:#FFF;border:1px solid #eee;width:100%;min-height:300px;padding:10px;margin:0px 0 1px 0px;height:auto;}

.divs-container:nth-child(3){display:block;min-width:325px;overflow:hidden;background-color:#FFF;border:1px solid #eee;width:100%;min-height:460px;padding:10px;margin:0px 0 1px 0px;}

.divs-container:nth-child(4){display:block;min-width:75px;overflow:hidden;background-color:#FFF;border:1px solid #eee;width:100%;min-height:70px;padding:10px;margin:0px 0 1px 0px;}

.divs-container--x{diplay:inline-block;position:relative;background-color:#FFF;border:0px solid #f00;width:100%;min-height:20px;padding:5px;padding-bottom:55px;margin:0 5px 0 0;}

.posts-container{display:inline-block;line-height:30px;min-width:150px;min-height:200px;background-color:#FFF;overflow:auto;border:0.01px solid #ddd;margin:auto;width:100%;font-size:24px;border-radius:0px;margin-bottom:10px;
user-select: auto; /* Standard syntax */
}

.posts-container::-webkit-scrollbar{

	width:0px;

	}
.count-posts-comment{margin:5px 0 0 0;}
.posts-options{displaxy:inline-block;position:relative;float:right;margin:0 20px 0 0;top:-25px;border:0px solid orange;font-size:40px;}
##posts-dots-options{display:inline-block;postion:absolute;font-size:48px;margin:-40px 10px 0px 0;border:0px solid blue;top:-40px;}
.posts-delete{display:inline-block;postion:absolute;font-size:30px;margin:15px 0 0 0;border:0px solid #000;transform:rotate(45deg);}
.posts_flag{align:center;display:block;width:75%;margin:0px auto;font-size:24px;padding:5px;margin-bottom:10px;}
.bubbles{display:inline-block;float:right; overflow:hidden;margin:0px 25px 5px 0px;color:#000;}

.sticky{position:sticky;top:0px;}

.divs-title{color:rgba(205, 96, 4, 0.8);padding:10px 0 10px 0;border-bottom:1px solid #ccc;text-transform:uppercase;}
.divs-titlex{color:rgba(0, 30, 95, 0.8);padding:10px 0 10px 0;border-bottom:1px solid #ccc;font-weight:bold;text-transform:uppercase;}
.track-name-divs{display:inline-block;overflow:hidden;height:48px;}

.tracks-list{border:0px solid #ccc;width:100%;margin:7px 0 0 0;}

.track-listings{display:inline-block;border:0px solid #eee;background-color:rgba(0,0,255,0.02);width:100%;padding:0 0 20px 0;margin:3px 0px;}

tracknames{display:block;padding:7px 0 5px 0;font-weight:bold;font-size:14px;text-transform:uppercase;}

tracksharer{font-size:5px;}

.pic-n-name-container{display:block;font-weight:bold;padding:15px 0 0 30px;position:absolute;bottom:0;border:0px solid green;width:100%;height:100px;}

.pic-div{display:inline-block;float:left;padding-right:15px;border-radius:50px;border:0px solid #847;}

.pic{width:100px;height:100px;border-radius:50px;border:2px solid orange;}

.pics{width:100px;height:100px;border-radius:0px;border:0px solid orange;}
##picz{width:49%;hexight:100px;border-radius:0px;border:0px solid orange;}

.name-div{overflow:hidden;}

.edit{display:inline-block;cursor:hand;position:relative;font-size:10px;top:-7px;padding:0 0 0 7px;color:blue;}

.phedit{display:inline-block;cursor:hand;position:relative;font-size:10px;top:-7px;padding:0 0 0 7px;color:blue;}

.newtrackcontainer{display:block;font-weight:bold;width:100%;color:gold;background:#000;padding:10px;margin:0px 0 10px 0;}

.uploadformcontainer{display:block;background-color:ghostwhite;width:100%;padding:10px 5px 2px 5px;margin:0 0px 0 0;border:1px solid #ccc;}

.tracklistcontainer{display:block;max-height:200px;overflow-x:hidden;overflow-y:auto;background-color:#fff;width:100%;margin:20px 0 0 0;block;border:1px solid #ccc;}

input[type="file"]{width:100%;border:1px solid #333;padding:10px; margin:0 0 15px 0;background-color:#FFF;}

.trkname{display:block;width:100%;border:1px solid #333;padding:10px; margin:0 0 15px 0;background-color:#FFF;}

.phcaption{display:block;width:100%;border:1px solid #333;padding:10px; margin:0 0 15px 0;background-color:#FFF;}

.button{display:inline-block;position:relative;right:0;background-color:rgba(0,0,0,0.1);color:gold;font-weight:bold;}

.button_upload,.button_reset{display:inline-block;background-color:rgba(0,0,0,255);color:gold;border-radius:5px;}


{display:inline-block;position:relative;right:0;background-color:rgba(0,0,0,0.1);color:gold;font-weight:bold;}

.cover-submit-button{display:inline-block;border-radius:3px;position:relative;right:0;background-color:#000;color:gold;font-weight:bold;}

.fup{width:100%;color:#FFF;background-color:green;padding:2px;}

.fNup{width:100%;color:#FFF;background-color:green;padding:2px;}

.uploading{font-weight:bold;font-size:10px;color:green;backgroxund-color:green;padding:2px;}

.del{cursor:hand;color:#F00;font-weight:bold;font-size:10px;}

.imgback{

min-height:600px; opacity:0.9;color:#000;

background-image: url('https://www.thinkbigga.com/uploaddir/photos/FB_IMG_1671112225425.jpg');

background-size:160%;

background-position:0px;

}

.editprofileInput{display:block;font-size:16px;padding:15px;margin:25px 0 25px 0;width:100%;border:0.1px solid rgba(0, 0, 0, 0.1);border-radius:4px;background-color:rgba(0, 0, 0, 0.05);}

.select_gender{display:block;font-size:16px;padding:15px;margin:25px 0 25px 0;width:100%;border:0.1px solid rgba(0, 0, 0, 0.1);}

.select_dob{width:90px;padding:15px;border:0.1px solid rgba(0, 0, 0, 0.1);}

.updatePro{font-size:12px;wixdth:30px;background-color: rgba(0, 0, 0, 50);color: rgba(255, 255, 255, 255);margin:auto;border:1px solid #000;border-radius:4px;padding:6px 16px 6px 16px ;}

.expBdiv{position:sticky;botttom:0;border:1px solid #333;display:flex;background-color:#000;color:gold;left:0;}

.upload_button{font-weight:bold;border-radius:4px;font-size:15px;widxth:30%;background-color:#000;color:gold;margin:auto;border:0;padding:8px 20px 8px 20px;}

.skip_button{font-weight:bold;border-radius:4px;font-size:15px;widxth:30%;background-color:rgba(0, 30, 95, 0.5);color:#FFF;margin:auto;border:0;padding:8px 26px 8px 26px;}

.youcanchoose{text-transform:uppercase;padding:5px 0 0 0; font-size:10px;color:rgba(255,0,0,0.9);}

.like{display:inline-block;width:55px;padding:0 10px 0 0;border:0px solid #f00;font-size:11px;}

.countplay{display:inline-block;width:55px;padding:0 13px 0 0;font-size:11px;}

.dwnltrack{ /*M  Download track in profile page -- THE ICON */
display:inline-block;width:20px;height:15px;border:0px solid #f00;margin:0px 32px 0 0;top:-5px;position:relative;
background-image: url('/images/icon/icon-download.png');
background-size:100%;
background-position:0px -3.5px;
}

.shrtrck{ /*M  share track in profile page -- THE ICON */

display:inline-block;width:20px;height:15px;border:0px solid #f00;margin:0px 20px 0 0;

background-image: url('/images/icon/icon-share.png');

background-size:100%;

background-position:0px -3.5px;



}

.comtrk{ /*M  comment on tracks in profile page -- THE ICON*/

display:inline-block;width:20px;height:15px;border:0px solid #f00;margin:0px 20px 0 0;

background-image: url('/images/icon/icon-comment.png');

background-size:100%;

background-position:0px -3.5px;



}

.buytrk{ /*M  comment on tracks in profile page -- THE ICON*/

display:inline-block;width:35px;height:15px;border:0px solid #f00;margin:0px 20px 0 0;top:-4px;position:relative;

background-image#: url('/images/icon/icon-comment.png');

background-size:100%;

background-position:0px -3.5px;

background-position:0px -3.5px;

backgrounxd-color:green;

color:green;

font-size:11px;

text-align:center;

border:1px solid green;

padding: -5px 5px 5px 5px;

}

.prevpic{

display:inline-block;color:#FFF;font-size:80px;margin:auto;

cursor:hand;

}

.nextpic{

display:flex;content-justify:right;color:#F00;font-size:100px;top:45%;

cursor:hand;z-index:999;

}

.cover{ /*M  comment on tracks in profile page -- THE ICON*/

opacity:0.9;padding:0;

display:inline-block;width:100.5%;height:100%;border:0px solid #f00;margin:-1px;

background-repeat:no-repeat;

background-size:120%;

background-position:-20px -20px;



}

.ppix{width:270px;border:1px solid #333;}

.deleteppix{display:block;padding:2px;width:60px;position:relative;top:50px;border:1px solid #F00;background-color:rgba(225,255,255,0.5);}

buytrk{display:none;}

.postcommtextarexa{display:inline-block;position:fixed;bottom:0px;right:0;height:60px;width:100%;border:0.1px solid #eee;background-color:rgba(226, 230, 253, 0.99);font-family:arial;font-size:14px;font-weight:bold;}
.postcommtextarea::placeholder{margin:auto;font-family:arial;font-size:14px;font-weight:normal;}
.postcommtextarexa:focus{outline:none !important;font-size:18px;padding:10px;}
.btn_PostCommentSubmit{border:1px solid #F00;display:inline-block;position:fixed;bottom:0px;right:0;height:60px;width:50px;border:0px solid #eee;background-color:gray;color:#FFF;}

.postMcomment{display:inline-block;background-color:rgba(226, 230, 253, 0.20);position:absolute;bottom:10px;height:50px;width:70%;padding:15px 40px 15px 15px;border:0.1px solid #333;}

.commtxxextarea{display:inline-block;z-index:99999;overflow:hidden;background-color:rgba(226, 230, 253, 0.99);position:absolute;bottom:10px;height:50px;width:70%;padding:15px 40px 15px 15px;border:0.1px solid #333;font-family:roboto;font-size:18px;border-radius:10px;}

.commtextarea{display:inline-block;position:absolute;bottom:10px;right:0;height:50px;width:100%;border:0.1px solid #eee;background-color:rgba(226, 230, 253, 0.99);font-family:arial;font-size:14px;font-weight:bold;}

.commtextarea:focus{border-radius:5px;outline:none;line-height:20px;overflow:hidden;border:0.1px solid #333;width:100%;height:100px;font-size:16px;font-weight:bold;padding:5px 45px 5px 5px;}

.msgblocks{width:100%;height:100vh;background-color:#fff;}

.commentHeader{display:inline-block;text-transform:uppercase;position:absolute;top:0;height:50px;width:100%;border-bottom:1px solid #333;color:rgba(236, 198, 7, 0.8);background-color:rgba(0,0,0,50);text-align:center;padding:10px 0 0 0;}

.commentSubmit{display:inline-block;position:absolute;bottom:10px;right:0;heigxht:50px;wxidth:100%;border:0.1px solid #eee;}

.commblock{display:inline-block;overflow-y:auto;position:absolute;padding:25px;width:100%;top:45px;height:75%;border:0px solid #F00;color:#000);background-color:rgba(255, 255 ,255, 255);}

#btn_musicCommentSubmit{margin:0 0 5px 0;padding:10px;background-color:#333;color:#FFF;}

.sctime{display:inline-block;font-size:10px;color:#333;left:-10px;float:right;position:relative;top:-5px;}

.posttextarea{display:block;margin:10px 0 0 0;width:100%;border:0px solid #CCC;cursor:hand;}

.postcaption{background-color:#FFF;color:#333;float:left;margin:0 5px 0 5px;width:80%;min-height:40px;height:auto;border-radius:5px;border:2px solid #333;padding:5px;padding-left:4px;font-size:16px;}
.postcaptionX{background-color:#FFF;color:#333;float:left;margin:0 5px 0 5px;width:97%;min-height:40px;height:auto;border-radius:5px;border:0px solid #333;padding:5px;padding-left:4px;font-size:22px;}
.PostImgList{clear:both;border-bottom:0.01px solid #ccc;width:100%;height:auto;margin:10px 0 15px 0;}
.postbutton{display:inline-block; position:relative;vertical-align:middle;text-align:middle;overflow:hidden;height:40px;padding:8px 12px 8px 12px; background-color:#000;color:#FC6;border-radius:5px;}

.postformDiv{display:block;width:100%;margin:5px;border:0px solid #F00;top:50px;}

.post-fetch-main-url{color:rgba(0,0,255,0.5); margin:10px 0 10px 0; b#ackground-color:#666;word-break: break-all;}
.post-fetch-img{max-height:50%; max-width:100%;}

.postsimgthumb{widtxh:100%;height:500px; overflow:hidden;}

.elmTextarea{display:block;width:100%;height:200px;padding:0%;border:0px solid #000;border-radius:0px;background-color:ghostwhite;font-family:arial;font-size:18px; text-align:left; vertical-align:middle;outline:none !important;}

textarea::placeholder{font-size:14px;color:gray;}

.gposy{display:block;position:relative;color:#FFF;opacity:1;background-color:#009;margin:30px 0 0 0; padding:15px 20px 15px 20px;border-radius:5px;wixdth:100%;border:0px solid #666;}

.pshare, .load_postcomm, .postOptionClass, .riseup{display:none;position:fixed; bottom:0;background-color:#FFF;height:0px;width:100%;right:0;left:0;}
.messenger{display:none;position:fixed; bottom:0;background-color:#FFF;height:0px;width:100%;right:0;left:0;}

.closeit{display:inline-block;position:relative;color:#000;opacity:1;background-color:#fff;margin:15px 5px 5px 10px;}
.nextit{display:inline-block;float:right;position:relative;color:#000;opacity:1;background-color:#fff;margin:15px 10px 5px 5px;right:0;}

.chatDialog{display:none;border-radius:0;position:fixed;opacity:1;bottom:0;background-color:#FFF;height:0px;width:100%;right:0;left:0;margin:auto;border:1px solid #eee;}

.sideB{display:inline-block;min-height:40px;min-width:40%;max-width:80%;float:right;clear:both;}

.sideBB{display:block;width:100%;text-align:left;padding:10px 10px 10px 20px;margin:10px 0 0 0;text-align:left;background-color:#000;color:#FFF;border-radius:10px;}

.messages-container{overflow:auto;padding:20px;}

.movieInfopopup::-webkit-scrollbar,.loadchats::-webkit-scrollbar,.loadpostComments::-webkit-scrollbar,textarea::-webkit-scrollbar{
width:1px;}
.linkifypostContent::-webkit-scrollbar,.movieInfopopup::-webkit-scrollbar,.foto-gallery-list::-webkit-scrollbar,.hm-movie-thumb::-webkit-scrollbar{
height:0px;}

.hm-movie-thumb{overflow-x:scroll;min-height:50px;  max-height:300px;background-color:ghostwhite;width:100%; margin:3px 0px 3px 0px; white-space: nowrap;}

.foto-gallery-list{overflow-x:scroll;min-height:50px;  max-height:300px;background-color:ghostwhite;width:100%; margin:3px 0px 3px 0px; white-space: nowrap;}

.receivePush{display:block;position:fixed;bottom:0; background-color:#009; margin:auto;padding:20px; color:#FFF; width:100%; opacity:0.7;}
.receivePushClose{display:block;position:fixed;bottom:80px; backgrouxnd-color:#333;color:#F00; right:10px; font-size:18px; font-weight:bold; border:1px solid #FFF; border-radius:90px 90px 90px 90px;padding:1px 10px 1px 10px;}

.settings:nth-child(even){display:inline-block;width:48%; padding:20px; margin:20px 0 10px 0; float:left; border:0.1px solid #eee; border-radius:5px; background-color:rgba(0,0,255,0.02);}
.settings:nth-child(odd){display:inline-block;width:48%; padding:20px; margin:20px 0 10px 0; float:right; border:0.1px solid #eee; border-radius:5px; background-color:rgba(0,0,255,0.02);}

.closeShare{display:none;position:relative;top:-1px;left:0px;height:10px;border:0px;background-color:#FFF;font-size:44px;}
.postcommclose{display:none;position:relative;top:-20px;left:-5px;height:50px;border:0px;background-color:#FFF;font-size:44px;}
.closemessenger{display:none;height:50px;border:0px;background-color:#FFF;}
.closemovieInfo{display:none;position:sticky;top:-5px;left:-5px;height:50px;border:0px;background-color:#FFF;font-weight:bold;color:#f00;font-size:44px;}
.photoGalClose{display:none;position:relative;top:0px;left:2px;heicght:50px;border:0px;color:#F00;font-size:44px;backgrouxnd-color:#000;}
.closemovCom{display:none;position:relative;top:0px;left:-5px;height:3px;border:0px solid #FFF;background-color:#F00;font-size:44px;}
.closemShare{display:none;position:relative;top:-1px;left:0px;height:10px;border:0px;background-color:#FFF;font-size:44px;}


.playpauseContainer{
display:block;
border:0px solid green;
bottom:0;
left:0;
right:0;
width:0px;
height:0px;
margin:auto;
}

.playpause{
display:block;
position:relative;
top:-300px;
border:0px solid orange;
width:1px;
height:1px;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:50px solid #FFF;
filter:invert(10%);
}











/**************************

  EDIT PROFILE PIC

***************************/

.ppModal {

  height: 100%;

  width: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  background: rgba(0,0,0,.7)  ;

  z-index: 9999;

  color:#fff;

}



.ppModal .ppClose {

  position: absolute;

  top: 40px;

  right: 60px;

  z-index: 999;

  cursor: hand;

  background-color:#fff;

  border-radius:60px;

}

.ppmodalxpand{

display:flex;

justify-content:center;

border-radius:0px;

position:fixed;

overflow:hidden;

width:100%;height:100%;

margin:auto;

left:0;

right:0;

top:0;

border:0px solid #333;

color:#000;

opacity:0.9;

}





/**************************

  POST MODAL MOBILE

***************************/

.postModal {

  height: 100%;

  width: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  background:rgba(237, 243, 255, 0.8);

  z-index: 9999;

  color:#fff;

}



.postModal .postClose button {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 999;

  cursor: hand;

  background-color:#000;

  color:#Fc6;

  border-radius:60px;

}

.postmodalxpand{

display:flex;

justify-content:center;

border-radius:0px;

position:fixed;

overflow:hidden;

width:100%;height:100%;

margin:auto;

left:0;

right:0;

top:0;

border:0px solid #333;

color:#000;

opacity:0.9;

}





/**************************

  MUSIC TRACK COMMENTS

***************************/

.musiccommentModal {

  height: 100%;

  width: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  background: rgba(255,255,255,255)  ;

  z-index: 9999;

  color:#fff;

}



.musiccommentModal .musiccommentClose {

  position: absolute;

  top: 10px;

  right: 20px;

  z-index: 999;

  cursor: hand;

  background-color:#fff;

  border-radius:5px;

}

.musiccommentmodalxpand{

display:flex;

justify-content:center;

border-radius:0px;

position:fixed;

overflow:hidden;

width:100%;height:100%;

margin:auto;

left:0;

right:0;

top:0;

border:0px solid #333;

color:#000;

opacity:0.9;

}





/**************************

     Modal EDIT PROFILE

***************************/

.pfModal {

  height: 100%;

  width: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  background: rgba(0,0,0,.7)  ;

  z-index: 9999;

  color:#fff;

}



.pfModal .pfClose {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 999;

  cursor: hand;

  background-color:#fff;

  border-radius:60px;

}

.pfmodalxpand{

display:block;  

border-radius:0;

position:fixed;

overflow-x:hidden;

overflow-y:auto;

width:100%;height:100%;

margin:auto;

left:0;

right:0;

top:0;

border:0px solid #333;

color:#000;

background-color:#fff;

opacity:0.9;

padding:20px;

}




/**************************

     Modal EDIT PROFILE

***************************/

.phModal {

  height: 100%;

  width: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  background: rgba(0,0,0,.7)  ;

  z-index: 9999;

  color:#fff;

}



.phModal .phClose {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 999;

  cursor: hand;

  background-color:#fff;

  border-radius:60px;

}

.phmodalxpand{

display:block;  

border-radius:0;

position:fixed;

overflow:hidden;

width:100%;height:100%;

margin:auto;

left:0;

right:0;

top:0;

border:0px solid #333;

color:#000;

background-color:#fff;

opacity:0.9;

padding:20px;

}



/**************************

     Modal EDIT PROFILE

***************************/

.coverModal {

  height: 100%;

  width: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  background: rgba(0,0,0,.7)  ;

  z-index: 9999;

  color:#fff;

}



.coverModal .coverClose {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 999;

  cursor: hand;

  background-color:#fff;

  border-radius:60px;

}

.covermodalxpand{

display:block;  

border-radius:0;

position:fixed;

overflow:hidden;

width:100%;height:100%;

margin:auto;

left:0;

right:0;

top:0;

border:0px solid #333;

color:#000;

background-color:#fff;

opacity:0.9;

padding:20px;

}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  maxx-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  displxay: none;
}

/* Next & previous buttons */
.prevv, .nextt {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index:9999999999;
}

/* Position the "next button" to the right */
.nextt {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prevv:hover, .nextt:hover {
  background-color: rgba(0,0,0,0.8);
}

        #content {
            padding: 0px 0px 20px 0px;
            border: 1px solid #ddd;
            margin: 0 -1.5px 0  -1.5px;
			overflow-y:hidden;
        }

        #spinner {
            display: none;
            text-align: center;
            margin: 10px 0;
        }

        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-top: 4px solid #333;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 0.8s linear infinite;
            display: inline-block;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* section, .fotoArray2, .fotoArray3, .fotoArray4 {
  display: block;
  width: 101vw;
  margin-left: -15px;
  border: #000 0px solid;
  #min-height: 270px;
} */


.full-screenable{
    /* Add styles for the non-full-screen mode */
		object-fit:cover;
}

.full-screenable:-webkit-full-screen,
.full-screenable:-moz-full-screen,
.full-screenable:-ms-fullscreen,
.full-screenable:fullscreen {
    /* Add styles for full-screen mode */

      backgroundsize = '100% 100%';
      object-fit = 'fill';
      backgroundPosition = '';
      backgroundColor = '#FFF';
	  backdrop-filter:none;
}

.rmvOject{
text-align:center;
font-size:11px;
font-weight:bold;
background-color:#FFF;
color:#F00;
width:15px;
height:15px;
padding:0;
z-index:2;
border-radius:10%;
opacity:0.7;
float:right;
}


/**** music section **/

.topButtonsMusicNav{
	padding:10px 20px; border:0; border-radius:6px; min-width:100px; margin:3px; background-color:#333; color:#FFF; transition:0.3s ease;
}
.topButtonsMusicNav.active{
	padding:10px 20px; border:0; border-radius:6px; min-width:100px; margin:3px; background-color:#FFF; color:RED;"
}


.tabSpinner {

  width: 100px;

  height: 100px;

  border: 12px solid #f3f3f3;

  border-top: 12px solid #3498db;

  border-radius: 50%;

  animation: spin 1s linear infinite;

  margin: auto; /* optional: centers it in parent */

}

@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}









/*posts upload stuff *//
.post-card {

    max-width: 480px;

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 3px 9px rgba(0,0,0,0.1);

    margin: 20px auto;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    padding: 15px;

    position: relative;

  }

  .post-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

  }

  .profile-pic {

    width: 48px;

    height: 48px;

    border-radius: 24px;

    background: #ddd;

    flex-shrink: 0;

    overflow: hidden;

  }

  .profile-pic img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  .user-name, .post-date {

    outline: none;

  }

  .user-name {

    font-weight: 700;

    font-size: 1.1rem;

  }

  .post-date {

    color: #888;

    font-size: 0.85rem;

  }

  .editable-content {

    min-height: 100px;

    border: 1px solid #ccc;

    border-radius: 8px;

    padding: 10px;

    font-size: 1rem;

    line-height: 1.4;

    outline: none;

    white-space: pre-wrap;

    margin-bottom: 12px;

  }

  .spoiler-badge {

    position: absolute;

    bottom: 15px;

    right: 15px;

    background: #007bff;

    color: white;

    font-weight: 700;

    font-size: 12px;

    border-radius: 12px;

    padding: 3px 10px;

    display: flex;

    align-items: center;

    gap: 5px;

    user-select: none;

  }

  .upload-button {

    display: inline-block;

    padding: 8px 16px;

    background: #007bff;

    color: white;

    border-radius: 6px;

    cursor: pointer;

    margin-bottom: 12px;

    user-select: none;

    font-weight: 600;

  }

  .upload-button:hover {

    background: #0056b3;

  }

  input[type="file"] {

    display: none;

  }

  .image-previews {

    display: grid;

    gap: 6px;

  }

  /* layout variants */

  .two-images {

    grid-template-columns: repeat(2, 1fr);

  }

  .three-images {

    grid-template-columns: 2fr 1fr;

    grid-template-rows: 1fr 1fr;

    grid-template-areas:

      "big thumb1"

      "big thumb2";

  }

  .three-images img:nth-child(1) {

    grid-area: big;

    object-fit: cover;

    width: 100%;

    height: 100%;

    border-radius: 8px;

  }

  .three-images img:nth-child(2) {

    grid-area: thumb1;

    border-radius: 8px;

    object-fit: cover;

    width: 100%;

    height: 100%;

  }

  .three-images img:nth-child(3) {

    grid-area: thumb2;

    border-radius: 8px;

    object-fit: cover;

    width: 100%;

    height: 100%;

  }

  .four-images {

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: repeat(2, 120px);

  }

  .image-previews img {

    width: 100%;

    height: 120px;

    object-fit: cover;

    border-radius: 8px;

  }


/* end post card for upload. *//

	h3{
	color:red;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
		
	}


 .cards-container {
  overflow-x: auto;
  display: flex; 
  gap: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 10px;
}

.cards-container::-webkit-scrollbar {
  display: none;
}

.page {
  flex: 0 0 300px; /* width of one page */
  background: rgba(17, 16, 16, 0.97);
  border-radius: 0px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: 16px;
  scroll-snap-align: start;
  
  display: grid; /* switch from flex to grid */
  grid-template-columns: repeat(2, 1fr); /* 2 columns if you want 4 items: 2x2 grid */
  grid-auto-rows: 100px; /* adjust height of each item */
  gap: 0px;
  box-sizing: border-box;
}

.song {
  padding: 12px;
  background: #eee;
  #border-radius: 8px 0 0 8px;
  font-weight: 600;
  font-size: 16px;
  color: red;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.song:hover {
  background: #ddd;
}

.song:nth-child(1) {
  border-radius: 8px 0 0 0;
}
.song:nth-child(2) {
  border-radius: 0 8px 0 0;
}
.song:nth-child(3) {
  border-radius: 0 0 0 8px;
}
.song:nth-child(4) {
  border-radius: 0 0 8px 0;
}

/*******************************MOBILE CHAT STARTTTTTTTTZZZZZZZZZZZ*************/


/* Receiver (left) */
.receivedRow {
  flex-direction: row;
}
.received {
  background: #f2f2f2;
  border: 0.1px solid #fff;
  margin-left: 0;
  margin-right: auto;
}

/* Sender (right) */
.sentRow {
  flex-direction: row-reverse;
}

/* Sender (right) */
.leftRow {
  display:none;
}

/* Sender (right) */
.rightRow {
  text-align:right;
  font-size:10px;
  margin-right:50px;
  color:#C5C5C5;
  
}

.sent {
  border: 0.1px solid #FFF;
  background: #f0f5fc;
  margin-left: auto;
  margin-right: 0;
}

/* Last read thumbnail */
.lastRead {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  bottom: -4px;
  right: -20px;
  background-size: cover;
  border: 0px solid #fff;
}

/****************************** NAV *********************************/

#nav {
display: flex;
  justify-content: space-between; /* spreads items evenly */
  padding: 0 10px; /* small padding for first & last to hug edges */	
	}
	
#nav a{
 flex: 1;           /* lets middle items take equal space */
  text-align: center; 
  }

#nav a-item:first-child {
  text-align: left;
}
	
	
	
	
/******************************MOBILE ENDDDDDDZZZZZZZZZZZ*************/

section {
  display: grid;
  gap: 2px; /* spacing between items */
}

section > img,
section > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 1 item */
section > :only-child {
  grid-column: 1 / -1; /* full width */
}

/* 2 items */
section:has(> :nth-child(2):nth-last-child(1)) {
  grid-template-columns: 1fr 1fr;
}

section > :nth-child(1):nth-last-child(2),
section > :nth-child(2):nth-last-child(1) {
  height: 200px;
  width: 50%;
}


/* 3 items */
section > :nth-child(1):nth-last-child(3) {
  grid-column: 2fr 1fr; /* left 50%, right 50% */
  grid-row: 1 / span 2; /* spans both rows on the left */
  min-height: 100%;
  width: 50%;
}

section > :nth-child(2):nth-last-child(2) {
  grid-column: 2; /* right column */
  grid-row: 1;    /* top right */
  --height: 149.5px;
  width: 50%;
}

section > :nth-child(3):nth-last-child(1) {
  grid-column: 2; /* right column */
  grid-row: 2;    /* bottom right */
  --height: 149.5px;
  width: 50%;
}


section:has(> :nth-child(4):nth-last-child(1)) {
  grid-template-columns: 1fr 1fr;
}

section > :nth-child(-n+4) {
  height: 200px;
}

/* HEADER */
#postForm-header{
position:fixed;
top:0;
left:0;
right:0;
height:50px;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 16px;
border-bottom:0px solid #ddd;
z-index:5;
}

/* CANVAS */
#canvas{
position:absolute;
top:100px;
bottom:0;
left:0;
right:0;
overflow-y:auto;
padding:10px;
background:#fff;
}

/* TEXTAREA */
#postContent{
width:100%;
height:62px;
border:none;
outline:none;
resize:none;
padding:2px 0;
font-size:26px;
line-height:1.6;
background:#fff;
box-sizing:border-box;
}

/* MEDIA */
#mediaContainer{
width:100%;
padding:0 2px;
margin-top:10px;
}

#mediaPreview{
display:grid;
gap:3px;
}

.mediaCard{
position:relative;
width:100%;
aspect-ratio:1/1;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:4px;
overflow:hidden;
transition:transform .15s ease;
}

.mediaCard:active{
transform:scale(.96);
}

.removeBtn{
position:absolute;
top:-3px;
right:-3px;
width:20px;
height:20px;
border-radius: 6px;
padding: 10px;
color:white;
font-size:12px;
font-weight: bold;
text-shadow: #ddd 1px 1px 2px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.removeBtn:hover{
background:#f85f5f;
}

/* TOOLBAR */
#toolStrip{
position:fixed;
left:0;
bottom:60px;
width:100%;
display:flex;
gap:10px;
padding:8px;
background:white;
border-top:0px solid #ddd;
}

#toolStrip button{
min-width:50px;
height:50px;
border:none;
background:#f0f0f0;
border-radius:6px;
font-size:20px;
}

#toolStrip input{
min-width:50px;
height:50px;
border:none;
background:#f0f0f0;
border-radius:6px;
font-size:20px;
}

/* VIEWER */
#viewer{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgb(0, 0, 0);
display:none;
align-items:center;
justify-content:center;
z-index:10;
}

#viewer.active{ display:flex; }

#viewer img,#viewer video{
min-width:100%;
max-height:95%;
}

/* POPUP */
#popupMenu{
position:fixed;
left:0;
min-width:200px;
max-height:80vh;
overflow:auto;
background:#000000;
border:1px solid #ddd;
border-radius:10px;
box-shadow:0 10px 25px rgba(14, 5, 5, 0.822);
padding:6px;
z-index:9999;
display:none;
}

.menuItem{
padding:10px;
border-radius:6px;
cursor:pointer;
font-size:14px;
}

.menuItem:active{
background:#f3f3f3;
}

/*back button*/

.backBtn{
width:40px;
height:40px;
border-radius:50%;
border:none;
background:#f1f3f4;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
margin-right:10px;
}

.backBtn:active{
background:#e0e0e0;
transform:scale(.92);
}

#scrollableContent{min-width:100.1%;}

.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.hidden {
  display: none;
}

#popupContainer {
  background: #fff;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}


.postCard-actionsBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 8px;
  border-top:1px solid #eee;
  background:#fff;
  width:100wv;
  margin:6px 0 0 0;
}

.postCard-actionItem{
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0px 0;
  border-radius:50%;
  color: rgba(75, 74, 74, 0.84);
  user-select:none;
  cursor:pointer;
  overflow:hidden;
  transition:transform .12s ease, color .2s ease;
}

.postCard-actionItem:first-child{
  justify-content:flex-start;
  padding-left:0px; /* tweak this */
}

.postCard-actionItem:active{
  transform:scale(0.92);
}

.postCard-icon{
  width:26px;
  height:26px;
  #fill:currentColor;
}

.postCard-count{
  font-size:10px;
  line-height:1;
  color:#b0b0b0;
}

.postCard-actionItem.is-liked{
  color:#ff3b5c;
}

/* ripple */
.postCard-ripple{
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  #background:rgba(180,180,180,0.25); /* light gray ripple */
  transform:scale(0);
  opacity:0;
  pointer-events:none;
}

.postCard-actionItem.ripple-active .postCard-ripple{
  animation:postCardRipple .45s ease-out;
}

@keyframes postCardRipple{
  0%{
    transform:scale(0);
    opacity:0.35;
  }
  100%{
    transform:scale(3);
    opacity:0;
  }
}

@media (max-width:480px){
  .postCard-icon{
    width:24px;
    height:24px;
  }
}



.popup_layer {
  transition: transform .25s ease, opacity .25s ease;
}

/* entry states */
.enter-slide-up    { transform: translateY(100%); opacity: 0; }
.enter-slide-down  { transform: translateY(-100%); opacity: 0; }
.enter-slide-left  { transform: translateX(-100%); opacity: 0; }
.enter-slide-right { transform: translateX(100%); opacity: 0; }
.enter-fade        { opacity: 0; }

/* active */
.active-view {
  transform: translate(0,0);
  opacity: 1;
}

/* exit states */
.exit-slide-up    { transform: translateY(-100%); opacity: 0; }
.exit-slide-down  { transform: translateY(100%); opacity: 0; }
.exit-slide-left  { transform: translateX(-100%); opacity: 0; }
.exit-slide-right { transform: translateX(100%); opacity: 0; }
.exit-fade        { opacity: 0; }



@import url("/css/default/search.css");

/* SEARCH BAR */

/* TABS */
.search-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-top: 10px;
}

.search-tab {
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.search-tab.active {
}

/* RESULTS */
.search-results {
  margin-top: 15px;
}

.search-result {
  padding: 12px;
  margin-bottom: 10px;

  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
}

.search-back {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.search-back-icon {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #f1f1f1;

  font-size: 20px;
  font-weight: 600;
  cursor: pointer;

  transition: 0.2s ease;
}

.search-back-icon:active {
  transform: scale(0.92);
}


.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
}

/* left action button (back / clear) */
.search-action {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: #f1f1f1;

  cursor: pointer;
  position: relative;
}

/* both icons stacked */
.icon {
  position: absolute;
  transition: 0.15s ease;
  font-size: 18px;
}

/* default state = show back */
.icon-clear {
  opacity: 0;
  transform: scale(0.8);
}

/* when active (typing) = show X */
.search-bar.has-text .icon-back {
  opacity: 0;
  transform: scale(0.8);
}

.search-bar.has-text .icon-clear {
  opacity: 1;
  transform: scale(1);
}

/* input */
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
}