/* -------------------------- Base Calendar fixes -------------------------- */
input.ui-selectonemenu-label {
	font-size:1em;
}

.hasDatepicker .ui-datepicker {
	width:auto;
}

.ui-calendar .ui-datepicker-multi {
	width:auto !important;
}

.ui-calendar .ui-datepicker-multi .ui-datepicker-group table {
	width:100%;
}

/* -------------------------- Calendar Input styling -------------------------- */


/* overwride default grid selectonemenu styling */
html body .ui-grid .ui-calendar .ui-calendar-month,html body .ui-grid .ui-calendar .ui-calendar-year,
.ui-calendar .ui-calendar-month, .ui-calendar .ui-calendar-year {
	vertical-align: middle;
    width: 50%;
    box-sizing: border-box;
}

.ui-calendar .ui-calendar-input-time {
	vertical-align: top;
	width:115px;
	min-width:100px;
}

.ui-calendar .ui-calendar-input-time .ui-selectonemenu {
	width:100%;
	box-sizing: border-box;
}

.ui-calendar .ui-calendar-input-time .ui-selectonemenu-label.ui-inputfield {
	padding-right:0px !important;
}

/* --- Style clearable button */

.ui-calendar-input-group .ui-calendar-clear {
	cursor: pointer;
	display:table-cell;
	width:0px;
}
.ui-datepicker-header.ui-datepicker-clearable .ui-datepicker-title {
	padding-right:2em;
}
.ui-datepicker-header.ui-datepicker-clearable .ui-calendar-clear {
	cursor: pointer;	
	position: absolute;	
	right: 2em !important;		
	text-align: center;
	line-height: 2em;
	color: inherit;
}
/* --- */

.ui-calendar-label-range-from, .ui-calendar-label-range-to {
	padding-right:1em;
}

.ui-calendar-inputs-4 .ui-calendar-input-group {
	float:left;
	width:25%;
}

.ui-calendar-inputs-3 .ui-calendar-input-group {
	float:left;
	width:33.3%;
}

.ui-calendar-inputs-2 .ui-calendar-input-group {
	float:left;
	width:50%;
}

.ui-calendar-inputs {
	display:table;
	width:100%;
	box-sizing: border-box;
}

.ui-calendar-input-group {
	display:table-row;
	padding: 8px 4px;
	box-sizing: border-box;
}
.ui-calendar-label-range-from, .ui-calendar-label-range-to {
	display:table-cell;
	width:100%;
}
.ui-calendar-input-date, .ui-calendar-input-datetime {
	display:table-cell;
	width:115px;
	min-width: 100px;
}
.ui-calendar-input-date input, .ui-calendar-input-datetime input {
	width:100%;
	box-sizing: border-box;
}
.ui-calendar-input-time {
	display:table-cell;
}
/* -------------------------- DatePicker Range styling -------------------------- */

.ui-datepicker-calendar tbody tr td.ui-datepicker-range a {
	background: red !important;
	color: white !important;
}
.ui-datepicker-calendar tbody tr td.ui-datepicker-range-start a {
	
}
.ui-datepicker-calendar tbody tr td.ui-datepicker-range-end a {
	
}

@media (max-width: 480px) {
	.ui-datepicker-multi-3 .ui-datepicker-group {
		width:100%;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group-first {
		min-height: 309px !important;
		max-height: 309px !important;
		height: 309px !important;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group-middle .ui-datepicker-calendar {
		display:none !important;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group-middle .ui-datepicker-title {
		display:none !important;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group-middle .ui-datepicker-prev {
		display:none !important;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group-middle .ui-datepicker-next {
		top: -303px !important;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group-last {
		display:none;
	}
	
	.ui-calendar-inputs-4 .ui-calendar-input-group,
	.ui-calendar-inputs-3 .ui-calendar-input-group,
	.ui-calendar-inputs-2 .ui-calendar-input-group {
		width:100%;
	}
}

@media (min-width:481px) and (max-width: 960px) {
	
	.ui-datepicker-multi-3 .ui-datepicker-group {
		width:50%;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group-first {
	}
	
	.ui-datepicker-multi-3 .ui-datepicker-group-middle .ui-datepicker-prev {
		display:none;
	}
		
	.ui-datepicker-multi-3 .ui-datepicker-group-last {
		display:none;
	}
	
	
	.ui-calendar-inputs-4 .ui-calendar-input-group,
	.ui-calendar-inputs-3 .ui-calendar-input-group {
		width:50%;
	}
}