.spinner {
	border: 4px solid rgba(0,0,0,.1);
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border-left-color: #41562D;
	animation: spin 1s ease infinite;
}

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


.post-counter {
	font-size: 1.5rem;
	font-weight: 600;
}

/* Style for the current user info container */
#current-user-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}

/* Existing styles for .circle-avatar, .user-name, .meta-key, etc., remain the same */

/* Style for the user info section */
.user-info {
	display: flex;
	flex-direction: column;
	flex-grow: 1; /* Allows this section to take available space */
}

/* Responsive adjustments (example) */
@media (max-width: 600px) {
	#current-user-info {
		flex-direction: column;
	}

	.user-info {
		margin-bottom: 10px;
	}
}

.avatar {
	border-radius: 100% !important;
}

.custom-user-menu {
	color: white !important;
}


/* Style for the avatar */
.user-avatar img {
	border-radius: 100% !important;
	cursor: pointer;
}

/* Style for the dropdown content */
#user-dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 100;
	text-align: left;
	min-width: 150px;
}

.user-name {
	font-weight: bold;
}

.meta-key {
	font-style: italic;
}

/* Style for the dropdown menu items */
#user-dropdown-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#user-dropdown-content ul li {
	padding: 10px;
}

#user-dropdown-content ul li a {
	text-decoration: none;
	color: #333;
}

#user-dropdown-content ul li a:hover {
	background-color: #f2f2f2;
}