.static-calendar-container {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-gap: 20px;
}

table.static-calendar {
	background: var(--background-color);
	text-align: center;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 20px;
	border-radius: 20px;
}

	table.static-calendar tr,
	table.static-calendar tbody {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-column: 1 / -1;
		width: 100%;
	}

	table.static-calendar caption {
		color: var(--color-darkest);
		font-size: 1rem;
		font-weight: 600;
		padding: 0 0 20px 0;
		text-align: center;
		width: 100%;
		display: block;
		grid-column: span 7;
	}

	table.static-calendar th,
	table.static-calendar td {
		border: 1px solid var(--border-light-color);
		font-size: 1rem;
		color: var(--text-color);
		box-sizing: border-box;
		padding: 5px 0;
		text-align: center;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		aspect-ratio: 1/1;
	}

	table.static-calendar tr.weekdays th {
		text-align: center;
		color: var(--text-color);
		font-size: .9rem;
		font-weight: 700;
		background: var(--border-lightest-color);
	}

	table.static-calendar td {
		display: flex;
		flex-direction: column;
	}

		table.static-calendar td span {
			display: block;
			margin-top: 5px;
			font-size: .8rem;
			line-height: .8rem;
			color: rgba(255,255,255,.6);
		}

		table.static-calendar td.day,
		table.static-calendar td.day-booked,
		table.static-calendar td.day-other-month {
			opacity: .4;
		}

		table.static-calendar td.day-booked-10p {
			background: #1d574515;
		}

		table.static-calendar td.day-booked-20p {
			background: #1d574530;
		}

		table.static-calendar td.day-booked-30p {
			background: #1d574545;
		}

		table.static-calendar td.day-booked-40p {
			background: #1d574560;
			color: var(--color-lightest);
		}

		table.static-calendar td.day-booked-50p {
			background: #1d574575;
			color: var(--color-lightest);
		}

		table.static-calendar td.day-booked-60p {
			background: #1d574590;
			color: var(--color-lightest);
		}

		table.static-calendar td.day-booked-70p {
			background: #1d5745A5;
			color: var(--color-lightest);
		}

		table.static-calendar td.day-booked-80p {
			background: #1d5745CC;
			color: var(--color-lightest);
		}

		table.static-calendar td.day-booked-90p {
			background: #1d5745D5;
			color: var(--color-lightest);
		}

		table.static-calendar td.day-booked-100p {
			background: #1d5745;
			color: var(--color-lightest);
		}

		table.static-calendar td.day-other-month {
			color: var(--color-gray);
		}

		table.static-calendar td.day-booked {
			background: var(--color-gray);
		}

.legend {
	font-size: .85rem;
	line-height: .85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

	.legend div {
		margin-right: 20px;
		display: flex;
		align-items: center;
	}

	.legend span {
		width: 20px;
		height: 15px;
		display: inline-block;
		margin-right: 5px;
	}

		.legend span.low {
			background: #1d574515;
		}

		.legend span.medium {
			background: #1d574590;
		}

		.legend span.high {
			background: #1d5745;
		}