.main-content {
	padding: 20px;
	margin-top: 40px;
	/* Adjust margin to accommodate the status bar */
}

.connectivity-status {
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	background-color: #4caf50;
	/* Green background for online status */
	transition: background-color 1s ease, margin-top 1s ease;
	/* Add transitions */
	transform: translateY(-100%);
	/* Initially hide the status bar off-screen */
}

.connectivity-status.offline {
	background-color: #f44336;
	/* Red background for offline status */
}