/* ------------------------------ Style for Datepicker ------------------------------ */
#ui-datepicker-div {
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  background: #fff;
  padding: 0.5em;
}

/* Header styling (month/year + navigation) */
.ui-datepicker-header {
  background: #f8f9f9;
  border: none;
  border-radius: 0;
  padding: 0.5em 0;
}

.ui-datepicker-title {
  font-weight: 500;
  text-align: center;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer;
  top: 0.5em;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: none;
}

.ui-datepicker-prev:before {
  content: "←";
}

.ui-datepicker-prev {
  margin-right: unset !important;
  float: left;
}

.ui-datepicker-next:before {
  content: "→";
}

.ui-datepicker-next {
  float: right;
}

/* Calendar table styling */
.ui-datepicker-calendar {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
}

.ui-datepicker-calendar th {
  font-weight: 500;
  padding: 0.5em;
  text-align: center;
  border: none;
}

.ui-datepicker-calendar td {
  padding: 0;
  border: 1px solid #eee;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  padding: 0.5em;
  display: block;
  text-align: center;
  text-decoration: none;
}

/* Hover & active states */
.ui-datepicker-calendar td a:hover {
  background: #f0f0f0;
}

/* Disabled/unavailable dates */
.ui-datepicker-unselectable .ui-state-default {
  color: #ccc !important;
  background: #f9f9f9;
}

/* Today's date */
.ui-datepicker-today .ui-state-default {
  font-weight: bold;
}

/* Weekend dates */
.ui-datepicker-week-end .ui-state-default {
  color: #d54e21; /* Slightly red for weekends */
}

/* Date picker: month + year only (day grid hidden) */
.yayextra-datepicker-monthyear .ui-datepicker-calendar,
.yayextra-datepicker-monthyear .ui-datepicker-prev,
.yayextra-datepicker-monthyear .ui-datepicker-next {
  display: none;
}

.yayextra-datepicker-monthyear .ui-datepicker-month {
  margin-right: 15px;
}

/* ------------------------------ End of Datepicker ------------------------------ */

/* ------------------------------ Style for Timepicker ------------------------------ */
.yayextra-time-picker {
  width: 50%;
}

.yayextra-time-picker input[type="number"] {
  padding: 6px;
  border: 1px solid #ddd;
  text-align: center;
  -moz-appearance: textfield; /* Hide arrows in Firefox */
}

.yayextra-time-picker input[type="number"]::-webkit-inner-spin-button,
.yayextra-time-picker input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Hide arrows in Chrome/Safari */
  margin: 0;
}

.yayextra-time-picker td.common {
  padding: 0 4px;
  font-weight: 500;
  color: #555;
}

/* Button row (Clear/Now/OK) */
.yayextra-time-picker table tr td {
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  border: none;
}

.yayextra-time-picker .clear {
  color: #d94f4f;
}

.yayextra-time-picker .current {
  color: #1a1a1a;
}

.yayextra-time-picker .ok {
  color: #4f94d9;
  font-weight: 500;
}

/* Hover effects */
.yayextra-time-picker .clear:hover,
.yayextra-time-picker .current:hover,
.yayextra-time-picker .ok:hover {
  background: #f0f0f0;
}

/* Focus state for inputs */
.yayextra-time-picker input[type="number"]:focus {
  outline: none;
  border-color: #4f94d9;
  box-shadow: 0 0 0 1px #4f94d9;
}
/* ------------------------------ End of Timepicker ------------------------------ */