/* 共通のdatepickerスタイル */

/* datepicker用のinput要素のスタイル（selectと同じスタイル） */
/* datepicker初期化後に自動的にhasDatepickerクラスが付与される */
input.hasDatepicker {
  width: 100% !important;
  font-size: 16px !important;
  color: #005081 !important;
  padding: 10px 10px 10px 50px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005081' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'%3e%3c/path%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: left 15px center !important;
  background-size: 24px !important;
  border-radius: 5px !important;
  border: 3px solid #009F99 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  cursor: pointer !important;
}

.ui-datepicker {
  font-size: 16px !important;
  padding: 15px !important;
  width: auto !important;
  min-width: 300px !important;
}

.ui-datepicker table {
  font-size: 16px !important;
  width: 100% !important;
  margin: 0 !important;
}

.ui-datepicker th {
  padding: 8px 5px !important;
  font-weight: bold !important;
}

.ui-datepicker td {
  padding: 2px !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block !important;
  padding: 10px !important;
  text-align: center !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}

.ui-datepicker td a:hover {
  background: #e0e0e0 !important;
  border-color: #999 !important;
}

.ui-datepicker .ui-datepicker-header {
  padding: 10px 0 !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  width: 35px !important;
  height: 35px !important;
  cursor: pointer !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block !important;
  margin-top: 10px !important;
}

.ui-datepicker .ui-state-default {
  border: 1px solid #d3d3d3 !important;
  background: #fff !important;
}

.ui-datepicker .ui-state-active {
  background: #007bff !important;
  color: #fff !important;
  border-color: #007bff !important;
}

.ui-datepicker .ui-state-disabled {
  opacity: 0.3 !important;
}

.ui-datepicker .ui-datepicker-buttonpane {
  padding: 10px !important;
  border-top: 1px solid #ddd !important;
  text-align: center !important;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  margin: 0 5px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: #f0f0f0 !important;
}

.ui-datepicker .ui-datepicker-close {
  background: #007bff !important;
  color: #fff !important;
  border-color: #007bff !important;
}

.ui-datepicker .ui-datepicker-close:hover {
  background: #0056b3 !important;
  border-color: #0056b3 !important;
}