.ui-widget {
	font-family: inherit;
}
.ui-datepicker {
	border-color: #f7f7f7 !important;
	border-radius: 12px;
	box-shadow: 0 20px 70px rgba(#000, 0.07);

	table {
		border: none;

		tr {
			border: none;
		}
	}
	.ui-state-default {
		width: 30px;
		height: 30px;
		padding: 0;
		background: none;
		border: none;
		font-size: 14px;
		line-height: 30px;
		border-radius: 50em;
		text-align: center;

		&:hover {
			background-color: var(--color-primary);
			color: #fff;			
		}
	}
	.ui-state-active,
	.ui-state-highlight {
		color: #fff;
	}
	.ui-state-highlight {
		background-color: #666;
	}
	.ui-state-active {
		background-color: var(--color-primary);
	}
	.ui-state-active {
		box-shadow: 0 5px 12px rgba(#000, 0.12);
	}
}
.ui-datepicker-header {
	border: none;
	border-bottom: 1px solid #eee;
	border-radius: 0;
	background: none;
}
.ui-datepicker-prev,
.ui-datepicker-next {
	top: 2px !important;
	border: none !important;
	background: none !important;
	cursor: pointer;
	font-weight: 400;

	span {
		position: relative;
		background: none !important;
		font-size: 12px;
		transition: transform 0.3s;
		
		&:before {
			display: inline-flex;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			font-family: fontAwesome;
			text-align: center;
			align-items: center;
			justify-content: center;
			text-indent: 0;
		}
	}
}
.ui-datepicker-prev {
	left: 2px !important;
	
	span {
		
		&:before {
			content: '\f060';
		}
	}
	&:hover {

		span {
			transform: translateX(-2px);
		}
	}
}
.ui-datepicker-next {
	right: 2px !important;

	span {
		
		&:before {
			content: '\f061';
		}
	}
	&:hover {

		span {
			transform: translateX(2px);
		}
	}
}