﻿
.invalid {
	text-decoration: line-through;
}

.date-picker-wrapper {
	z-index: 400;
	background-color: #fff;
	padding: 1%;
	font-size: .75rem;
	line-height: 1rem;
	border: none;
	color: var(--main-text-color);
	box-shadow: 0 0 10px rgba(0, 0, 0, .25)
}

	.date-picker-wrapper.no-shortcuts {
		padding-bottom: 10px
	}

	.date-picker-wrapper.no-topbar {
		padding-top: 10px
	}

	.date-picker-wrapper .footer {
		font-size: .65rem;
		padding-top: 0
	}

	.date-picker-wrapper b {
		color: var(--main-text-color);
		font-weight: 800
	}

	.date-picker-wrapper .month-name {
		text-transform: capitalize
	}

	.date-picker-wrapper .select-wrapper:hover {
		text-decoration: underline
	}

	.date-picker-wrapper .month-wrapper {
		border: none;
		border-radius: 0;
		background-color: transparent;
		padding: 0;
		display: flex;
		justify-content: center;
		align-content: stretch;
		flex-wrap: wrap;
		align-items: stretch
	}

		.date-picker-wrapper .month-wrapper table {
			flex: 1;
			flex-basis: 50%;
			align-self: stretch;
			padding: 5px;
			box-sizing: border-box;
			background: none
		}

			.date-picker-wrapper .month-wrapper table th,
			.date-picker-wrapper .month-wrapper table td {
				line-height: 1rem;
				padding: 0;
				width: 14%
			}

			.date-picker-wrapper .month-wrapper table .day {
				box-sizing: border-box;
				padding: 10px 0;
				line-height: 1;
				font-size: .75rem;
				margin: 0;
				color: var(--main-text-color);
			}

			.date-picker-wrapper .month-wrapper table div.day.lastMonth,
			.date-picker-wrapper .month-wrapper table div.day.nextMonth {
				color: rgba(0, 0, 0, .5);
			}

			.date-picker-wrapper .month-wrapper table .day.checked {
				background-color: rgba(0,68,106,0.3);
			}

			.date-picker-wrapper .month-wrapper table .week-name {
				height: auto;
				font-size: .75rem;
				text-transform: capitalize;
			}

				.date-picker-wrapper .month-wrapper table .week-name th {
					padding: 5px;
				}

			.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
				color: rgba(0, 0, 0, .5);
			}

			.date-picker-wrapper .month-wrapper table .day.toMonth.invalid {
				color: #e4e4e4;
			}

			.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
				background-color: #cdecfa;
			}

			.date-picker-wrapper .month-wrapper table .day.real-today {
				background-color: transparent;
			}

				.date-picker-wrapper .month-wrapper table .day.real-today.checked,
				.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
					background-color: #70ccd5;
				}

	.date-picker-wrapper table .caption {
		height: auto;
		background: #fff;
		font-size: 1.15rem;
	}

		.date-picker-wrapper table .caption th {
			padding: 10px 0;
			background: none;
		}

		.date-picker-wrapper table .caption .next,
		.date-picker-wrapper table .caption .prev {
			font-size: 2rem;
		}

			.date-picker-wrapper table .caption .next:hover,
			.date-picker-wrapper table .caption .prev:hover {
				background-color: transparent;
				color: rgba(0,68,106,.85);
			}

	.date-picker-wrapper .gap {
		display: none;
	}

	.date-picker-wrapper .drp_top-bar {
		word-break: break-word;
		line-height: 1.7;
		text-align: center;
		padding: 10px;
	}

		.date-picker-wrapper .drp_top-bar.error .error-top {
			color: #f00;
		}

	.date-picker-wrapper .first-date-selected,
	.date-picker-wrapper .last-date-selected {
		background-color: var(--main-link-color) !important;
		color: #fff !important
	}

	.date-picker-wrapper .date-range-length-tip {
		box-shadow: 0 0 3px rgba(0, 0, 0, .25);
		background-color: #ff0;
		padding: 5px;
		border-radius: 2px;
		font-size: .65rem;
		line-height: 1rem;
	}

		.date-picker-wrapper .date-range-length-tip:after {
			content: "";
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #ff0;
		}

	.date-picker-wrapper .week-number {
		padding: 5px 0;
		line-height: 1;
		font-size: 12px;
		margin-bottom: 1px;
		color: #999;
		cursor: pointer;
	}

	@media screen and (max-width: 768px) {
		.rental-search .filter-col.departure {
			display: block;
		}

			.date-picker-wrapper .month-wrapper table {
				width: 250px;

			}

				.date-picker-wrapper .month-wrapper table .day {
					font-size: 1rem;
				}
	}

	@media screen and (max-width: 568px) {
		.date-picker-wrapper {
			max-width: 80%;
			transform: translate(10px);
		}
	}
