/* extra edits */
.ui-widget-header {
  background: #4AA5D2;
  color: #fff;
}

.ui-widget-header a {
  color: #fff;
}

.dp-available .ui-datepicker {
  width: 100%;
  min-height: 315px;
  border: none;  
}

.dp-available .ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 2em;
  text-align: center;
}

.dp-available .ui-datepicker table {
  width: 100%;
}

/*.dp-available {
  z-index: 1053 !important;
  width: 23em !important;
  min-height: 0px !important;
}
*/
#ui-datepicker-div {
  /*z-index: 1053 !important;*/
  width: 17em !important;
  min-height: 0px !important;
}

.dp-available a.ui-datepicker-prev
, .dp-available a.ui-datepicker-next {
  visibility: hidden;
  /*display:none;*/
}
/* Availability calendar */
.dp-available .ui-state-default
, .dp-available .ui-widget-content .ui-state-default
, .dp-available .ui-widget-header .ui-state-default
, .dp-available .ui-button
, html .dp-available .ui-button.ui-state-disabled:hover
, html .dp-available .ui-button.ui-state-disabled:active {
  border: none;
  background-color: transparent;
  text-align: center;
}

.dp-available .ui-state-active
, .dp-available .ui-widget-content .ui-state-active
, .dp-available .ui-widget-header .ui-state-active
, .dp-available a.ui-button:active
, .dp-available .ui-button:active
, .dp-available .ui-button.ui-state-active:hover {
  color: #333;
}

.dp-available tr {
  width: 100%;
}

.dp-available td {
  vertical-align: bottom;
  line-height: 2.5em;
}

/* the calendar should not "appear" disabled */
.dp-available .ui-state-disabled
, .dp-available .ui-widget-content .ui-state-disabled
, .dp-available .ui-widget-header .ui-state-disabled {
    opacity: 1;
    filter: Alpha(Opacity=100);
    /*background-image: none;*/
}

/* no border around the entire widget */
.dp-available .ui-widget.ui-widget-content {
  border: none;
}

.date-booked {
  background-color: #fff !important;
  background-image: url("../image/date-booked.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 90%;
}

#ui-datepicker-div .date-booked {
  position: relative!important;
}

#ui-datepicker-div .date-booked:after {
  content: 'Booked!!';
  display: none;
  color: #f00;
  position: absolute;
  top: -30px;
  left: -2px;
  background: #ADE9E4;
  padding: 2px 5px;
  font-size: 12px;
  border: 1px solid #88CCC6;
}

#ui-datepicker-div .date-booked:hover:after {
  display: block!important;
}

.date-turn {
  background-image: url("../image/date-turn.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 90%;
}

#ui-datepicker-div .date-turn {
  position: relative!important;
}

#ui-datepicker-div .date-turn:after {
  content: 'Turnover';
  display: none;
  color: #f00;
  position: absolute;
  top: -30px;
  left: -2px;
  background: #ADE9E4;
  padding: 2px 5px;
  font-size: 12px;
  border: 1px solid #88CCC6;
}

#ui-datepicker-div .date-turn:hover:after {
  display: block!important;
}

.date-only-in {
  background-image: url("../image/date-only-in.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 90%;
  z-index: 999999999;
  opacity: 1 !important;
}

#ui-datepicker-div .date-only-in {
  position: relative!important;
}

#ui-datepicker-div .date-only-in:after {
  content: 'CheckIn';
  display: none;
  color: #f00;
  position: absolute;
  top: -30px;
  left: -2px;
  background: #ADE9E4;
  padding: 2px 5px;
  font-size: 12px;
  border: 1px solid #88CCC6;
}

#ui-datepicker-div .date-only-in:hover:after {
  display: block!important;
}

.date-only-out {
  /*background-color: #fb9b9b !important;*/
  /*position: relative!important;*/
  background-image: url("../image/date-only-out.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 90%;
  opacity: 1 !important;
}

#ui-datepicker-div .date-only-out {
  position: relative!important;
}

#ui-datepicker-div .date-only-out:after {
  content: 'CheckOut';
  display: none;
  color: #f00;
  position: absolute;
  top: -30px;
  left: -2px;
  background: #ADE9E4;
  padding: 2px 5px;
  font-size: 12px;
  border: 1px solid #88CCC6;
}

#ui-datepicker-div .date-only-out:hover:after {
  display: block!important;
}

.ui-datepicker td a, .ui-state-default {
  border: none !important;
  background: none !important;
}

.date-booked {
  opacity: 1 !important;
}

.ui-datepicker-unselectable .ui-state-disabled {
  opacity: 0.3 !important;
}
.ui-state-active {
  /* color: #479C48 !important; */
  background-color: #f0f0f0 !important;
}

.pager-legend {
  border-radius: 0;
  padding: 0 10px;
}