body {
	width: 100%;
	font-family: 'Inter';
}
.date-input-wrapper {
	width: fit-content;
}
.date-input-wrapper label {
	color: #6750a4;
	top: -10px;
	left: 10px;
}
.date-input {
	font-size: 1rem;
	border: 2px solid #6750a4;
}
.datepicker {
	background-color: #eee8f5;
	top: 100%;
}
.datepicker button {
	cursor: pointer;
	border: none;
	border-radius: 100px;
	background: transparent;
	transition: all 0.3s;
}
.days,
.dates {
	display: grid;
	grid-template-columns: repeat(7, 32px);
	gap: 10px;
}
.dates button {
	aspect-ratio: 1;
}
.dates button:hover {
	background: #6750a4;
	color: #eee8f5;
	border: 1px solid #6750a4;
}
.dates button:disabled {
	opacity: 0.75;
	pointer-events: none;
	user-select: none;
}
.dates button.today {
	background: transparent;
	border: 1px solid #6750a4;
	color: #6750a4;
}
.dates button.selected {
	background: #6750a4;
	color: #fff;
	border: 1px solid #6750a4;
}
.datepicker-footer button {
	color: #6750a4;
}
.datepicker-footer button:hover {
	background: #6750a4;
	color: #fff;
}
@media (max-width: 380px) {
	.datepicker {
		left: -18%;
	}
}