/*Custom CSS*/

body {
	background-color: #f8f9fa;
}

.post-card {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	padding: 20px;
}

.post-card img {
	max-width: 100%;
	border-radius: 10px;
	margin-top: 15px;
}

.post-card .post-content {
	font-size: 16px;
	color: #333;
}

.post-card .post-meta {
	font-size: 14px;
	color: #666;
	margin-top: 10px;
}

.left-sidebar, .right-sidebar {
	width: 25%; /* Adjust width as needed */
	overflow-y: auto;
	height: 100vh;
	scrollbar-width: none; /* hides scrollbar in Firefox.*/
   -ms-overflow-style: none;  /* hides scrollbar in old Edge/IE.*/
}

.main-content {
	width: 50%; /* Adjust width as needed */
	overflow-y: auto; /* Enable vertical scrolling */
	height: 100vh;
	scrollbar-width: none; /* hides scrollbar in Firefox.*/
   -ms-overflow-style: none;  /* hides scrollbar in old Edge/IE.*/
}

.left-sidebar::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  display: none; /* hides scrollbar in Chrome, Safari, Opera*/
}

/*Start:Create Post Section styles*/
/* Hover effects for better interactivity */
.post-input-trigger:hover {
	background-color: #e4e6e9 !important;
}

.create-post-section {
	transition: transform 0.2s, box-shadow 0.2s;
}

.create-post-section:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Pulse animation for attention */
@
keyframes pulse { 0% {
	transform: scale(1);
}

50
%
{
transform
:
scale(
1.01
);
}
100
%
{
transform
:
scale(
1
);
}
}
.create-post-section {
	animation: pulse 2s infinite;
}
/*End:Create Post Section styles*/
.profile-section {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 20px;
}

.profile-section img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin-bottom: 15px;
}

.suggestions-card {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 20px;
}

.cover-photo img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 10px 10px 0 0;
}

/* Social Icons Container */
.post-meta .social-icon {
	display: flex;
	align-items: center;
	gap: 8px; /* Space between icon and text */
	text-decoration: none;
	color: #333; /* Default icon color */
	transition: color 0.3s ease;
}

/* Circle around the icon */
.post-meta .icon-circle {
	width: 40px; /* Circle size */
	height: 40px; /* Circle size */
	border-radius: 50%; /* Make it circular */
	background-color: #f0f0f0; /* Light gray background */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

/* Icon inside the circle */
.post-meta .icon-circle i {
	font-size: 18px; /* Icon size */
	color: #333; /* Default icon color */
	transition: color 0.3s ease;
}

/* Hover Effects */
.post-meta .social-icon:hover .icon-circle {
	background-color: #007bff; /* Blue background on hover */
}

.post-meta .social-icon:hover .icon-circle i {
	color: #fff; /* White icon on hover */
}

/* Like Button Specific Styles */
.post-meta .social-icon.like:hover .icon-circle {
	background-color: #ff6b6b; /* Red background for like */
}

.post-meta .social-icon.like:hover .icon-circle i {
	color: #fff; /* White icon for like */
}

/* Share Button Specific Styles */
.post-meta .social-icon.share:hover .icon-circle {
	background-color: #9c27b0; /* Purple background for share */
}

.post-meta .social-icon.share:hover .icon-circle i {
	color: #fff; /* White icon for share */
}

/* Liked State */
.fas.fa-heart.text-danger {
	color: #ff6b6b; /* Red color for liked state */
}

/* Default State */
.far.fa-heart {
	color: #333; /* Default color for unliked state */
}
/*Spacing between alignment in follow button within post*/
.d-flex.align-items-center {
	gap: 8px; /* Adds spacing between elements */
}
/*Start:Styles for the post-media-Container*/
.post-media-container {
	margin: 15px 0;
	border-radius: 10px;
	overflow: hidden;
}

.carousel {
	border-radius: 10px;
}

.media-thumbnails {
	max-width: 100%;
	overflow-x: auto;
}

.thumbnail {
	transition: all 0.2s ease;
}

.thumbnail:hover {
	opacity: 0.8;
	transform: scale(1.05);
}
/*End:Styles for the post-media-Container*/

/*Start: Media Viewer Modal Styles*/
/* Media Viewer Modal Styles */
#mediaViewerModal .modal-content {
	background-color: rgba(0, 0, 0, 0.8);
}

#mediaViewerModal .modal-header {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

#mediaViewerModal .btn-close {
	filter: invert(1);
}

.media-wrapper, .carousel-item {
	transition: transform 0.2s;
}

.media-wrapper:hover, .carousel-item:hover {
	transform: scale(1.01);
}

.thumbnail {
	transition: transform 0.2s, opacity 0.2s;
	opacity: 0.7;
}

.thumbnail:hover {
	transform: scale(1.05);
	opacity: 1;
}
/*End: Media Viewer Modal Styles */

/*START:Profile Editing Status Message Alert*/
/* Alert animation styles */
.alert {
	transition: all 0.5s ease;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateY(-20px);
}

.alert.show {
	opacity: 1;
	transform: translateY(0);
}

/* Make sure alerts appear above other content */
.position-fixed {
	z-index: 1100;
}

/*END:Profile Editing Status Message Alert*/

/*START: CSS for Skeleton Loading for more posts*/
/* Skeleton Loading Animation */
@
keyframes shimmer { 0% {
	background-position: -468px 0
}

100
%
{
background-position
:
468px
0
}
}
.skeleton {
	animation: shimmer 1.5s infinite linear;
	background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
	background-size: 800px 104px;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}

.skeleton-post {
	background: white;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skeleton-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.skeleton-line {
	height: 12px;
	margin-bottom: 8px;
}

.skeleton-line.short {
	width: 60%;
}

.skeleton-line.medium {
	width: 80%;
}

.skeleton-content {
	height: 50px;
	margin-bottom: 15px;
}

.skeleton-media {
	height: 300px;
	margin-bottom: 15px;
	border-radius: 8px;
}

.skeleton-footer {
	height: 20px;
	width: 100%;
	margin-top: 15px;
}
/*END: CSS for Skeleton Loading for more posts*/


/*Start: User Search Results Styles.*/
.search-results {
	display: none;
}

.search-result-item {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: var(--transition);
}

.search-result-item:hover {
	background-color: var(--bg-light);
}

.search-result-item .person-name {
	margin-bottom: 4px;
	font-weight: 600;
}

.search-result-item .person-meta {
	margin-bottom: 0;
	font-size: 12px;
	color: var(--text-light);
}

.no-results {
	padding: 12px 16px;
	color: var(--text-light);
	text-align: center;
}
/*End: User Search Results Styles.*/

/*START: support my work styles*/
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icon:hover .icon-circle {
    background-color: rgba(0, 0, 0, 0.05);
}

.support-icon:hover .icon-circle {
    background-color: rgba(40, 167, 69, 0.1);
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
}
/*END: Support my work styles*/