// ui-datepicker: The outer container of the datepicker. If the datepicker is inline, this element will additionally have a ui-datepicker-inline class. If the isRTL option is set, this element will additionally have a class of ui-datepicker-rtl.
// ui-datepicker-header: The container for the datepicker's header.
// ui-datepicker-prev: The control used to select previous months.
// ui-datepicker-next: The control used to select subsequent months.
// ui-datepicker-title: The container for the datepicker's title containing the month and year.
// ui-datepicker-month: The textual display of the month or a <select> element if the changeMonth option is set.
// ui-datepicker-year: The textual display of the year or a <select> element if the changeYear option is set.
// ui-datepicker-calendar: The table that contains the calendar itself.
// ui-datepicker-week-end: Cells containing weekend days.
// ui-datepicker-other-month: Cells containing days that occur in a month other than the currently selected month.
// ui-datepicker-unselectable: Cells containing days that are not selectable by the user.
// ui-datepicker-current-day: The cell containing the selected day.
// ui-datepicker-today: The cell containing today's date.
// ui-datepicker-buttonpane: The buttonpane that is used when the showButtonPanel option is set.
// ui-datepicker-current: The button used to select today's date.

.ui-datepicker
	top: 0
	left: 0
	padding: 4px
	margin-top: 1px
	@include border-radius(4px)
	&:before
		content: ''
		display: inline-block!important
		border-left: 7px solid transparent
		border-right: 7px solid transparent
		border-bottom: 7px solid #ccc
		border-bottom-color: rgba(black,.2)
		position: absolute
		top: -7px
		left: 6px
	&:after
		content: ''
		display: inline-block!important
		border-left: 6px solid transparent
		border-right: 6px solid transparent
		border-bottom: 6px solid white
		position: absolute
		top: -6px
		left: 7px
	.ui-datepicker-header
		background: transparent !important
		color: gray
		font-weight: normal
	.ui-state-default
		background: transparent !important
	.ui-state-highlight
		border: solid 1px darken(#FEFBE2 ,50%) !important
		background: #FEFBE2 !important
	.ui-state-active
		color: white !important
		background: $primary-color !important
		border: solid 1px darken($primary-color,10%) !important