.business-calendar {
	--business-calendar-header-bg: #333;
	--business-calendar-header-color: #fff;
	--business-calendar-open-bg: #fff;
	--business-calendar-border-color: #c9c9c9;
	--business-calendar-text-color: #333;
	--business-calendar-muted-color: #999;
	color: var(--business-calendar-text-color);
}

.business-calendar *,
.business-calendar *::before,
.business-calendar *::after {
	box-sizing: border-box;
}

.business-calendar__months {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 7%, 56px);
}

.business-calendar.has-next-month .business-calendar__months {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-calendar__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.business-calendar__table caption {
	padding: 0 0 10px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}

.business-calendar__table th,
.business-calendar__table td {
	width: calc(100% / 7);
	height: 50px;
	padding: 0;
	border: 1px solid var(--business-calendar-border-color);
	text-align: center;
	vertical-align: middle;
}

.business-calendar__table th {
	height: 50px;
	background: var(--business-calendar-header-bg);
	color: var(--business-calendar-header-color);
	font-size: 20px;
	font-weight: 500;
}

.business-calendar__day {
	background: var(--business-calendar-open-bg);
	font-size: 20px;
}

.business-calendar__day.is-closed {
	background: var(--business-calendar-closed-bg, var(--business-calendar-selected-closed-bg, #ffe1e1));
}

.business-calendar__day.is-other-month {
	color: var(--business-calendar-muted-color);
}

.business-calendar__day.is-today span {
	color: #745c2e;
	font-weight: 700;
}

.business-calendar-error {
	color: #b32d2e;
}

@media screen and (max-width: 767px) {
	.business-calendar__months {
		grid-template-columns: minmax(0, 1fr);
		gap: 25px;
	}

	.business-calendar.has-next-month .business-calendar__months {
		grid-template-columns: minmax(0, 1fr);
	}

	.business-calendar__table caption {
		font-size: 18px;
	}

	.business-calendar__table th,
	.business-calendar__table td {
		height: 47px;
	}

	.business-calendar__table th,
	.business-calendar__day {
		font-size: 18px;
	}

}