.tribe-editor__date-time-range-picker {
	display: flex;
	flex-wrap: wrap;
}

.tribe-editor__date-time-range-picker__start,
.tribe-editor__date-time-range-picker__end {
	align-items: center;
	display: flex;
	flex: none;
	width: 100%;
}

.tribe-editor__date-time-range-picker__start {
	flex: none;
	margin-bottom: 15px;
	margin-left: 55px;
	width: calc(100% - 55px);
}

.tribe-editor__date-input__container {

	.tribe-editor__date-time-range-picker & {
		flex: 1;
	}
}

.tribe-editor__date-time-range-picker__separator {

	.tribe-editor__date-time-range-picker & {
		flex: none;
		font-size: 16px;
		letter-spacing: 0.4px;
		line-height: 19px;
	}
}

.tribe-editor__date-time-range-picker__separator--date-time {

	.tribe-editor__date-time-range-picker & {
		margin: 0 15px;
	}
}

.tribe-editor__date-time-range-picker__separator--time-range {

	.tribe-editor__date-time-range-picker & {
		margin: 0 7px 0 28px;
		width: 20px;
	}
}

.tribe-editor__date-time-range-picker__field-label {
	flex: none;
	font-weight: var(--tec-font-weight-bold);
	margin-right: var(--tec-spacer-2);
}

.tribe-editor__timepicker {

	.tribe-editor__date-time-range-picker & {
		flex: none;
	}
}

/* -----------------------------------------------------------
   DayPicker Input Calender Styles
   ----------------------------------------------------------- */

.tribe-editor__date-time-range-picker {

	.DayPickerInput-Overlay {
		padding: 20px;
		z-index: 10;
	}

	.DayPicker {
		width: 100%;
	}

	.DayPicker-Month {
		margin: 0;
	}

	.DayPicker-Caption > div,
	.DayPicker-Weekday,
	.DayPicker-Day {
		color: #545d66;
		font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
		font-weight: 400;
	}

	.DayPicker-Caption > div {
		font-size: 1rem;
		margin-bottom: 12px;
		text-align: center;
	}

	.DayPicker-Weekday {
		font-size: 0.75rem;
	}

	.DayPicker-Day {
		font-size: 0.875rem;

		&:hover {
			background-color: #fff;
			color: #007bb4;
		}
	}

	.DayPicker-Day--today {
		color: #545d66;
	}

	.DayPicker-Day--disabled {
		color: #ccc;
		pointer-events: none;
	}

	.DayPicker-Day--selected:not(.DayPicker-Day--outside) {
		background-color: #009fd4;
		border-radius: 0;
		color: #fff;

		&:hover {
			background-color: #007bb4;
			color: #fff;
		}
	}

	.DayPicker-NavButton--prev {
		left: 0;
		top: 0;
	}

	.DayPicker-NavButton--next {
		right: 0;
		top: 0;
	}

	.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) {

		&:hover {
			background-color: #fff;
		}
	}

	.DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
		background-color: #e7f5fa;
		color: #545d66;

		&:hover {
			color: #007bb4;
		}
	}
}