.df-container {
	--primary-color: #52a8ac;
	--color-normal: #01305E;
	--color-invert: #f0f0f0;
	--radius: 5px;
	--background-transition: .2s;
	display: flex;
	justify-content: space-around;
	user-select: none;
	align-items: center;
}

.df-navigation {
	display: flex;
	cursor: pointer;
	width: 30px;
	height: 50px;
	min-width: 30px;
	min-height: 50px;
	max-width: 30px;
	max-height: 50px;
	border: var(--primary-color) 1px solid;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	border-radius: var(--radius);
	transition: var(--background-transition);
}

.df-navigation:hover {
	background-color: var(--primary-color);
	color: var(--color-invert);
}

.df-dates {
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	scroll-snap-type: x mandatory;
	gap: 10px;
}

.df-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	scroll-snap-align: center;
}

.df-date:hover .df-order, .df-date.active .df-order {
	background-color: var(--primary-color);
	color: var(--color-invert);
}

.df-order {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	width: 40px;
	border: var(--primary-color) 1px solid;
	border-radius: var(--radius);
	transition: var(--background-transition);
	font-weight: bold;
	font-size: 1.4em;
}