.datepickers-container {
	display: block !important;
}

.datepicker--nav {
	border-bottom: 1px solid var(--border-color);
	height: auto;
	position: static;
}

.datepicker {
	box-shadow: var(--shadow-far);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	background: var(--color-lightest);
	font-size: .9rem;
	line-height: .9rem;
	color: var(--text-color);
	padding: 20px;
	z-index: 999;
	transition: all ease-in-out .2s;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	display: block !important;
}

	.datepicker.active {
		opacity: 1;
		transition: all ease-in-out .2s;
		visibility: visible;
		transform: translateX(-10px);
		display: block !important;
	}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
	color: var(--color-lightest);
	background: var(--link-color);
	border-radius: 0;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
	background: var(--link-color);
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.1);
	color: var(--color-light);
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.2);
}

.datepicker--cell {
	border-radius: 0;
}

	.datepicker--cell.-current- {
		color: var(--link-color);
	}

		.datepicker--cell.-current-.-focus- {
			color: var(--text-color);
		}

		.datepicker--cell.-current-.-in-range- {
			color: var(--link-color);
		}

	.datepicker--cell.-in-range- {
		background: rgba(0, 0, 0, 0.1);
		color: var(--text-color);
		border-radius: 0;
	}

		.datepicker--cell.-in-range-.-focus- {
			background-color: rgba(0, 0, 0, 0.2);
		}

	.datepicker--cell.-range-from- {
		border: 1px solid rgba(0, 0, 0, 0.5);
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

	.datepicker--cell.-range-to- {
		border: 1px solid rgba(0, 0, 0, 0.5);
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

	.datepicker--cell.-range-from-.-range-to- {
		border-radius: 0;
	}

	.datepicker--cell.-selected- {
		color: var(--link-color-reverse);
		border: none;
		background: var(--link-color);
	}

		.datepicker--cell.-selected-.-current- {
			color: var(--link-color-reverse);
			background: var(--link-color);
		}

		.datepicker--cell.-selected-.-focus- {
			background: var(--link-color);
		}

.datepicker--day-name {
	color: var(--sub-text-color);
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
	color: var(--color-light);
}

	.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
		color: var(--sub-text-color);
	}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
	color: var(--color-light);
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
	color: var(--link-color-reverse);
	background: var(--link-color);
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
	background: var(--link-color);
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.1);
	color: var(--sub-text-color);
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.2);
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
	color: var(--link-color-reverse);
	background: var(--link-color);
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
	background: var(--link-color);
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.1);
	color: var(--sub-text-color);
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.2);
}

.datepicker--button {
	color: var(--link-color);
}

	.datepicker--button:hover {
		color: var(--text-color);
		background: var(--color-lightest);
	}

.datepicker.dash-filter-datepicker {
	display: grid !important;
	grid-template-columns: repeat(2, 250px);
	column-gap: 28px;
	grid-template-rows: auto 1fr;
	width: min(92vw, 568px);
}

.dash-filter-presets {
	display: grid;
	grid-column: 1;
	grid-row: 1 / span 2;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: 7px;
	margin: 0;
	padding: 0;
}

.datepicker.dash-filter-datepicker > .datepicker--nav,
.datepicker.dash-filter-datepicker > .datepicker--content {
	grid-column: 2;
	width: 250px;
	box-sizing: border-box;
}

.datepicker.dash-filter-datepicker > .datepicker--nav {
	grid-row: 1;
}

.datepicker.dash-filter-datepicker > .datepicker--content {
	grid-row: 2;
}

.dash-filter-preset {
	min-width: 0;
	padding: .65rem 1.2rem;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--color-darker);
    border-radius: var(--button-radius);
    font: 500 .9rem/.9rem var(--font-sans-serif);
	cursor: pointer;
	transition: opacity 150ms ease;
}

	.dash-filter-preset:hover,
	.dash-filter-preset:focus-visible {
		opacity: .8;
		outline: none;
	}

	.dash-filter-preset.active {
		border-color: var(--link-color);
		background: var(--link-color);
		color: var(--link-color-reverse);
	}

@media (max-width: 560px) {
	.datepicker.dash-filter-datepicker {
		display: block !important;
		width: min(94vw, 360px);
		padding: 14px;
	}

	.dash-filter-presets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 0 0 14px;
		padding: 0 0 14px;
		border-bottom: 1px solid var(--border-color);
	}
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
	color: var(--color-light);
}

	.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
		color: var(--sub-text-color);
	}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
	color: var(--color-light);
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
	color: var(--link-color-reverse);
	background: var(--link-color);
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
	background: var(--link-color);
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.1);
	color: var(--sub-text-color);
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
	background-color: rgba(0, 0, 0, 0.2);
}

.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
	background: none;
	border: none;
}
