/* Stats Container */
.stats-container {
	display: flex;
	flex-wrap: wrap;  /* Allows stats to wrap into rows on smaller screens */
	background-color: #1f2127;
	padding: 15px;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* Online Users - Full Width Row */
.online-users-box {
	width: 100%;  /* Take full width for the online users row */
	margin-bottom: 15px;
	padding-bottom: 15px;
	color: #d1d1d1;
	border-bottom: 1px solid #333;
}



/* Stats Columns */
.stats-left, .stats-middle, .stats-right {
	background-color: #1f2127;
	padding: 15px 0;
	color: #d1d1d1;
	flex: 1 1 30%; /* Allow each column to take up about 30% width */
	margin-right: 10px;  /* Small gap between columns */
	border-right: 1px solid #333;
	text-align: center;
}

/* Remove margin from the last column */
.stats-right {
	margin-right: 0;
	border: unset;
}

.stats-title {
	font-size: 1.2rem;
	color: #fff;
	margin-bottom: 5px;
}

.stats-number {
	font-size: 2rem;
	color: #4a69bd;
}

/* Responsive Design - Single Column for Stats on Mobile */
@media (max-width: 768px) {
	.stats-left, .stats-middle, .stats-right {
		flex: 1 1 100%;  /* Make each stat take full width on smaller screens */
		margin-right: 0;  /* Remove the right margin on mobile */
		margin-bottom: 15px;  /* Add spacing between stat blocks */
		border-bottom: 1px solid #333;  /* Add a border between stat blocks */
		border-right: none;
	}
}