
//Time Picker.
#book-an-appointment-application {
	.react-datepicker {
	width: 339px;
	border: none;
	height: 100%;

	@media only screen and (max-width: 500px) {
		width: 100%;
	}

	.react-datepicker__month-container,
	.react-datepicker__time-container {
		width: 100%;
		height: 100%;
	}

	.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
		width: 100%;
		margin: 0;
	}

	.react-datepicker__time-list-item.react-datepicker__time-list-item--disabled {
		opacity: 0.35;
		pointer-events: none;
	}

	.react-datepicker__time-list-item.booking-out-of-time {
		display: none ;
	}

	.react-datepicker__time-list-item {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--booking-secondary-border-color);
		border-radius: 3.2px;
		color: var(--booking-base-color);
		font-size: var(--booking-size--xsmall);
		font-weight: 500;
		line-height: 100%;
		letter-spacing: 0;
		transition: 0.3s all ease-in-out;
	}

	.react-datepicker__time-list {
		display: grid;
		padding: var(--booking-size--large);
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--booking-size--small);
		border: none;
		background-color: var(--booking-border-color);
		row-gap: var(--booking-size--medium);
	}

	.react-datepicker__header--time {
		display: none;
	}

	.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
		height: 28px;
		padding: 0;
	}

	.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
		width: auto;
		height: 306px;
		padding: var(--booking-size--medium);
		overflow: auto;
	}

	.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
		background-color: var(--booking-base-color);
		color: var(--booking-button-text-color);
		border: 1px solid var(--booking-base-color);
	}

	.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
		background-color: var(--booking-base-color);
		color: var(--booking-button-text-color);
		border: 1px solid var(--booking-base-color);
	}
}

.booking-time-reader-wrapper p {
	font-weight: 700;
	margin-bottom: var(--booking-size--xlarge);
}

//Date Picker.

.react-datepicker {
	background-color: var(--booking-border-color);
	border: 1px solid var(--booking-secondary-border-color);
	width: 100%;

	.react-datepicker__header {
		border-bottom: none;
		background-color: transparent;
	}

	.react-datepicker__day,
	.react-datepicker__day-name {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: var(--booking-size--xsmall);
		font-weight: 600;
		color: var(--booking-text-color);
	}

	.react-datepicker__week,
	.react-datepicker__day-names {
		display: flex;
		justify-content: space-around;
	}

	.react-datepicker__day {
		border-radius: 50%;
		aspect-ratio: 1;
		width: 100%;
		background-color: var(--booking-button-text-color);
		color: var(--booking-base-color);
		transition: all 0.3s ease-in-out;

		&:hover {
			border-radius: 50%;
			background-color: var(--booking-base-color);
			color: var(--booking-button-text-color);
		}
	}

	.react-datepicker__day--disabled {
		opacity: 0.35;
		background-color: transparent;
		color: var(--booking-text-color);
		pointer-events: none;
	}

	.react-datepicker__day--selected:not([aria-disabled='true']):hover,
	.react-datepicker__day--selected {
		border-radius: 50%;
		background-color: var(--booking-base-color);
		color: var(--booking-button-text-color);
	}

	.react-datepicker__navigation {
		top: 3px;
		right: 5px;
		outline: none;
	}

	.react-datepicker__navigation-icon {
		top: 0;
		width: 42.75px;
		height: 42.75px;
	}

	.react-datepicker__navigation-icon--next,
	.react-datepicker__navigation-icon--previous {
		&::before {
			opacity: 0;
		}

		&::after {
			position: absolute;
			display: block;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 75%;
			content: '';
		}

		&:hover {
			&::after {
				background-color: var(--booking-secondary-border-color);
			}
		}
	}

	.react-datepicker__navigation-icon--next {
		&::after {
			top: 8px;
			right: 0;
			background-image: url('./images/right-arrow.svg');
		}
	}

	.react-datepicker__month {
		height: calc(100% - 85.5px);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.react-datepicker__navigation-icon--previous {
		right: 0;

		&::after {
			top: 8px;
			right: 0;
			background-image: url('./images/left-arrow.svg');
		}
	}

	.react-datepicker__current-month {
		color: var(--booking-text-color);
		font-family: var(--booking-font--family--base);
		font-weight: 600;
		font-size: var(--booking-size--xsmall);
		line-height: calc(20/14);
		letter-spacing: 0px;
		margin: 5px 0;
	}
}
}
