/* General body styling */
body {
    margin: 0;
    font-family: Arial, sans-serif;
	font-family:roboto;
	color:#000;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
overflow:hidden;

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

/* Top Bar Styling */
        #topBar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: #000;
			background-color:rgba(0,0,0,1);
            padding: 0px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
			height:60px;
			#opacity:0.9;
			border:0;
        }
        #mainContent {
            margin-top: 60px;
            background-color: ghostwhite;
        }
        .container {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
        }

.hamburgerMenu {
	display:inline-block;
	position:relative;
	left:-10px;
    font-size: 24px;
    cursor: pointer;
	top:5px;
}

#topBar h1 {
    margin: 0;
    color: #fff;
    flex-grow: 1;
    text-align: center;
}

#topBar nav {
    text-decoration: none;
    display: flex;
    gap: 15px;
}

#topBar nav a {
	pointer-Event:none;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: flex;
    align-items: center;
	cursor:pointer;
	
}

#topBar nav a span {
	pointer-Event:none;
    margin-right: 5px;
    text-decoration: none;
}

#topBar nav a.active {
	pointer-Event:none;
    text-decoration: none;
    background-color: #555;
    border-radius: 5px;
	color:#FFF;
}

/* Main Content Area Styling */
#mainContent {
    margin-top: 60px; /* Height of the top bar */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Total height minus both the top and bottom bars */
    overflow-y: auto;
	padding:0px 0 60px 0;
}
#musicContent {
    margin-top: 60px; /* Height of the top bar */
	display:none;
    flex-direction: column;
    height: calc(100vh - 120px); /* Total height minus both the top and bottom bars */
    overflow-y: auto;
	padding:0px 0 60px 0;
}

#scrollableContent {
    flex-grow: 1;
    padding: 0px;
    border:0px solid #000;
    width: 101vw;
    margin-left: -1px;
}

#scrollableContent::-webkit-scrollbar {
    width: 0.01px;
    opacity: 0;
  }

/* Bottom Bar Styling */
#bottomBar {
    width: 100vw;
    height: 60px;
    background-color: #000;
    position: fixed;
    bottom: 0;
    z-index: 1000;
	border-top:0.1px solid red;
	opacity:0.9;
}

#bottomBar .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

#bottomBar nav {
    display: flex;
    gap: 15px;
}

#bottomBar nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: flex;
    align-items: center;
}

#bottomBar nav a span {
    margin-right: 5px;
}

#bottomBar nav a.active {
    background-color: #191919;
    #border-radius: 50%;
}

.tabContent {
    display: none;
}

#userThumb{
	position: relative;
	top:5px;
	right:-7px;
	#border:1px solid #600;
}

#search_button{
	position: relative;
	top:8px;
	right:-15px;	
}

#notif_bell{
	position: relative;
	right:-20px;	
	font-size:34px;
}

.userThumb_icon, .notif_bell_icon, .search_button_icon {
	#border-bottom:0.1px solid red;
	font-size:24px !important;
	#color:red;
}


<!--login------------------------------------------------>
.login-container {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

form label {
  display: block;
  text-align: left;
  margin-top: 15px;
  font-size: 14px;
  color: #000;
}

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.show-password {
  text-align: left;
  margin-top: 10px;
}

.formButtons {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  background-color: #007BFF;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.formButtons:hover {
  background-color: #0056b3;
}

.forgot-password,
.create-account {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #007BFF;
  text-decoration: none;
}

.forgot-password:hover,
.create-account:hover {
  text-decoration: underline;
}

.social-login {
  margin-top: 20px;
}

.social-login p {
  margin-bottom: 10px;
  font-size: 14px;
}

.google-login,
.apple-login,
.fb-login {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.google-login {
  background-color: #DB4437;
  color: white;
}

.apple-login {
  background-color: #000;
  color: white;
}

.fb-login {
  background-color: #4267B2;
  color: white;
}


<!-------MUSIC------------------------------------------------------>

.catalog {
          display: flex; 
		  overflow-x:auto;
		  gap:15px;
		  padding: 20px;
		   /* Fade in the post */
        }
        .row {
          display: flex; 
		  overflow-x:auto;
		  gap:15px;
		  padding: 5px 0;
		  scroll-behavior: smooth;
      #opacity: 0;
		  clear:both;
     #height:100px;
		   /* Fade in the post */
        }
		.item{
		min-width:100px;
		max-width:100px;
   #height:120px;
		background-color:#fff;
		border-radius:8px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
		overflow:hidden;
		flex-shrink:0;
		position:relative;
		text-align:LEFT;
		}
		.item img{
		width:100%;
		min-height:100px;
		#height:auto;
		display:block;
		}
		.track_name{
		font-size:12px;
		color:#000;
		height:30px;
		max-height:30px;
		line-height:1em;
		padding:3px 1px 1px 6px;
		}

		svg {pointer-events:none;}
		
<!-- chatInput--->
        .sms-input-container {
            width: 100%;
            max-width: 600px;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 30px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icon-btn {
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            color: #888;
            display: flex;
            align-items: center;
        }

        .icon-btn:hover {
            color: #3b82f6;
        }

        #messageInput {
            flex-grow: 1;
            border: none;
            resize: none;
            padding: 10px;
            font-size: 16px;
            border-radius: 20px;
            max-height: 100px;
			min-width:150px;
            overflow: hidden;
            outline: none;
            background-color: #f2f2f2;
        }

        .send-btn {
	     	#background-color: #3b82f6;
		    background-color: transparent;
            border: none;
            color: black;
            font-size: 24px;
            padding: 10px;
            border-radius: 100%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .send-btn:disabled {
            #background-color: #ccc;
            cursor: not-allowed;
        }

        .sms-options {
            display: flex;
            align-items: center;
            gap: 10px;
        }
		
		#buttonIcon{ 
		font-size:24px;
		}

.messageInput{
	#left:0;position:fixed;bottom:0px;height:60px;border:1px solid #EEE;background-color:#EEE;margin:0;padding:5px 0 5px 0;width:88vw;
}

<!--------RIPPLE BUTTON------------------------------------>

 .ripple-button {
            position: relative;
            padding: 20px 40px;
            font-size: 18px;
            color: white;
            #background-color: #6200ea;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            overflow: hidden;
            outline: none;
            transition: background-color 0.4s;
        }

        .ripple-button:hover {
            background-color: #eee;
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: scale(0);
            animation: ripple-animation 0.6s linear;
        }

        @keyframes ripple-animation {
            to {
                transform: scale(0.3);
                opacity: 0;
            }
        }


<!------LOAD POSTS------------------------------------------->
  /* Custom scrollbar */
  .post-block::-webkit-scrollbar {
    width: 0.01px;
  }

  .post-block::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  .post-block::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
  }

  /* Fade-in effect for post content */
  .linkifypostContent, .fade_in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }

  /* Hover effect for like/share buttons */
  .psharePopup:hover, .plike:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    color: #1e90ff; /* Hover color */
  }

  /* Smooth animation for comment count */
  .count-posts-comment {
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .count-posts-comment:hover {
    transform: scale(1.1);
    color: #ff6347; /* Hover color */
  }

  /* Card elevation on hover */
  .post-block:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Icon Font Style */
  #material-icons {
    font-size: 20px;
    transition: color 0.3s ease;
  }

  #material-icons:hover {
    #color: #1e90ff;
  }

  /* Update for user profile image hover effect */
  .lazy.profile-frame:hover {
    border: 3px solid #ff6347;
    box-shadow: 0px 0px 16px rgba(255, 99, 71, 0.5);
    transition: all 0.3s ease;
  }


<!-----RANDOM------------------------------------------------->

	        .scrollToTopBtn {
            position: fixed;
			margin-left:45%;
            bottom: 60px;
            width: 40px;
            height: 40px;
            background-color: #fff;
            display: none;
            justify-content: center;
			border-radius:50px;
			box-shadow:1px 5px 5px #333;
        }
#hamburgerExpand{
	padding: 20px;
}

<!------------SETTINGS-------------------------------------------------->
        section { margin: 20px 0; }
        h2 { font-size: 1.5em; }
        ul { list-style-type: none; padding-left: 0; }
        li { margin: 10px 0; }

<!------------POST FLAGGER---------------------------------------------->

.postcomm,.searchFormDiv, .takepicClass, .profile-container, .flag-panel, movie-panel{display:none;position:fixed; bottom:0;background-color:#FFF;height:0px;width:100%;right:0;left:0;}
 
.shareAbles{
border:1px solid #ccc;
border-radius:20px;
background-color:#eee;
font-size:14px;
	}
	
<!-- POST LIKES STATUS------>
.post_like_active{color:red; !important}

<!----FILE PICKER----------------------->

.file-picker-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  text-align: center;
  background-color: white;
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.file-item {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
}

.file-item img, .file-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-btn {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 5px;
  cursor: pointer;
  border-radius: 50%;
}

.file-picker input[type="file"] {
  display: none;
}

.file-picker-label {
  display: inline-block;
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

.file-picker-label:hover {
  background-color: #0056b3;
}





<!-------------PROFILE-------------------------------------------------->

        .profile-wrapper {
            background-color: white;
            #border-radius: 12px;
            #box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            #padding: 20px;
            width: 100vw;
            #width: 100vw;
			#position:fixed;
			overflow-x:hidden;
			#margin:0;
			#height:100%;
        }
        .headerP {
            background-color: #111;
            color: white;
            #padding: 10px;
            #border-radius: 12px 12px 0 0;
			height:250px;
 			#position:fixed;
			#overflow:hidden;
			#top:0;
            min-width: 100vw;
        }
        .profile-image {
			#display:inline-block;
			position:relative;
            border-radius: 50%;
            width: 200px;
            height: 200px;
            #margin-top: 0px;
			#top:-2px;
			border:7px solid #FFF;
			#left: calc(50% - 100px);
        }
		
		.profile-picture-positioning{
			display:inline-block;
			position:absolute;
            border-radius: 50%;
            width: 200px;
            height: 200px;
            margin-top: 0px;
			top:150px;
			background:transparent;
			#border:5px solid #FFF;
			left: calc(50% - 102px);
		}

		.displayNameOfUser {
 			position:relative;
            font-size: 24px;
            font-weight: bold;
            #margin: 10px 0;
			margin-top:110px;
			left: calc(50% - 90px);
			#right:-10px;
        }
        .bio {
            font-size: 16px;
            color: #555;
        }
        .role {
            font-size: 14px;
            margin: 5px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .role-icon {
            margin-right: 5px;
        }
        .footerP {
			position:absolute;
            margin-top: 20px;
			top:0;
            #display: flex;
            #justify-content: center;
        }
.main-container {
  width: 100vw; /* Full viewport width */
  display: flex; /* Flexbox for alignment */
  justify-content: space-between; /* Space between the child divs */
  align-items: center; /* Center child divs vertically */
  height: 100px; /* Optional: Adjust height */
  background-color: #f4f4f4; /* Optional: Background for visibility */
  background:transparent;
  padding: 2px; /* Optional: Add padding around the container */
  box-sizing: border-box; /* Include padding in the width */
}

.feed-container {
  width: 100vw; /* Full viewport width */
 min-height:50px;
 display: inline-block; /* Flexbox for alignment */
  /*#justify-content: space-between;  Space between the child divs */
  /*#align-items: center;  Center child divs vertically */
  height: 100px; /* Optional: Adjust height */
  background-color: #f4f4f4; /* Optional: Background for visibility */
  background:transparent;
  padding: 2px; /* Optional: Add padding around the container */
  box-sizing: border-box; /* Include padding in the width */
}

.child {
  flex: 1; /* All children share equal space */
  max-width: 25%; /* Ensure no child exceeds 25% */
  text-align: center; /* Center text inside the div */
  background-color: #ddd; /* Optional: Background for visibility */
  background:transparent;
  padding: 5px; /* Optional: Add padding inside the div */
  border: 0px solid #ccc; /* Optional: Border for visibility */
  box-sizing: border-box; /* Include padding and border in the size */
}    



/*---------------SELFIE-----------------------------------*/

 #camera-container, #preview-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }


        .some_button {
            position: absolute;
            bottom: 10%;
            padding: 10px 20px;
            background: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
			z-index:999999;
        }

        #retry-btn, #send-btn {
            bottom: 20%;
			z-index:999999;
        }

        #retry-btn {
            left: 25%;
        }

        #send-btn {
            right: 25%;
			z-index:999999;
        }