#today {
	> header {
		background-color: white;
		border: 1px solid var(--color-neutral-200);
		border-radius: var(--rounded-xl);
		padding: var(--spacing-4);
		margin-bottom: var(--spacing-4);

		> h1 {
			font-size: var(--text-xl);
			font-weight: 600;
		}

		> .today-date {
			margin-top: var(--spacing-2);
			text-transform: uppercase;
			color: var(--text-color-secondary);
		}
	}
}

#calendar {
	height: 80vh;
	@media (width < 40rem) { height: 70vh }
}

.job-lineitem {
	border-radius: var(--rounded-xl);

	> header {
		color: white;
		font-size: var(--text-base);
		text-transform: uppercase;
		font-weight: 600;
		padding: calc(2.4 * var(--spacing)) var(--spacing-4);
	}

	.job-lineitem-body {
		padding: var(--spacing-4);
		background-color: white;
		border-radius: var(--rounded-xl);

		> div {
			margin-bottom: var(--spacing-3);
			&:last-child { margin-bottom: 0 }
		}
	}

	&.green {
		border: 2px solid var(--color-green);
		> header { background-color: var(--color-green) }
	}

	&.orange {
		border: 2px solid var(--color-orange);
		> header { background-color: var(--color-orange) }
	}

	&.blue {
		border: 2px solid var(--color-blue);
		> header { background-color: var(--color-blue) }
	}

	&.pink {
		border: 2px solid var(--color-pink);
		> header { background-color: var(--color-pink) }
	}
}

.job-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-2);
	margin-bottom: var(--spacing-4);
}

.job-time {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	font-size: var(--text-base);
	font-weight: 600;
	text-transform: uppercase;

	> .hr {
		height: 1px;
		flex-grow: 1;
		background-color: var(--text-color);
		opacity: 0.1;
	}
}