/** Override JQUERY UI **/

@font-face {
  font-family: "Font Awesome 5 Free";
  font-weight: normal;
  font-style: normal;
}

.ui-datepicker {
  border: 1px solid !important;
  width: 270px;
}

/* Header */
.ui-datepicker .ui-datepicker-header {
  background-color: transparent !important;
  padding: 20px !important;
  border-bottom: 1px solid #eee;
  padding-bottom: 0px !important;
  margin-bottom: 5px !important;
}

/* Title */
.ui-datepicker-title {
  position: relative !important;
  top: -15px !important;
  margin: 0 !important;
}

/* Month and year */
.ui-datepicker-month,
.ui-datepicker-year {
  font-size: 1.1em !important;
}

/* Table header (days) */
.ui-datepicker table th span {
  font-size: 1.1em !important;
  text-align: center !important;
  color: #d7d6d6;
}

/* Table date (days) */
.ui-datepicker table td span,
.ui-datepicker table td a {
  height: 100%;
  font-size: 1.1em !important;
  box-shadow: none !important; /* Avoid shadow on cells */
}

/* Disabled date */
.ui-datepicker td.ui-state-disabled span {
  color: #dddddd;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 32px;
    height: 32px;
    text-align: center;
    display: block;
    z-index: 10000; /* To allow clickabale area */
}

.ui-datepicker-prev.ui-state-hover,
.ui-datepicker-next.ui-state-hover {
  border: 1px solid #dddddd;
  background: #eeeeee;
}

.ui-datepicker-prev:before {
  content: "\f053";
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
}

.ui-datepicker-next:before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
}

.ui-icon {
  background-image: none !important;
}

/** JQUERY UI IN FULL SIZE CONTAINER **/

.full-size-datepicker-container {
  /* Month and year */
  .ui-datepicker-month,
  .ui-datepicker-year {
    font-size: 2em !important;
  }

  .ui-datepicker {
    border: 0 !important;
  }

  /**
     * Include datepicker in full-size-datepicker-container to make it 100%
     */
  .ui-datepicker,
  .ui-datepicker table {
    width: 100% !important;
    height: 100% !important;
  }

  .ui-datepicker table th span {
    font-size: 2em !important;
  }

  .ui-datepicker table td span,
  .ui-datepicker table td a {
    height: 100%;
    font-size: 2em !important;
  }
}
