.trackers h2 {
	font-size: 2rem;
	margin-bottom: 20px;
}

.tracker {
	background-color: #fff;
	border: 4px solid var(--light-gray);
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.tracker-status-on {
	background-color: var(--status-on);
}

.tracker-status-off {
	background-color: var(--status-off);
}

.tracker-info p {
	margin-bottom: 5px;
}

.tracker-info p strong {
	color: var(--primary-color);
}

.tracker-actions {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.icon-btn img {
	width: 16px;
	height: 16px;
}

.start-btn {
	background-color: var(--highlight-color) !important;
}

.start-btn:hover {
	background-color: var(--highlight-hover) !important;
}

.stop-btn {
	background-color: var(--accent-color) !important;
}

.stop-btn:hover {
	background-color: var(--accent-hover) !important;
}

.tracker-date {
	margin-top: 10px;
	padding: 5px 10px;
	background-color: var(--light-gray);
	border-left: 3px solid var(--primary-color);
}

.tracker-date:hover {
	/*Move 10px*/
	transform: translateY(-3px);
	transition: transform 0.3s ease;
}