/* 20240304 */

.datepicker-spinbuttons {
  margin-top: 0;
}

.datepicker-spinbuttons:focus { outline:4px solid rgba(1, 117, 228, 0.2); }

.datepicker-spinbuttons .day {
  width: inherit;
}

.datepicker-spinbuttons .month {
  width: 6em;
}

.datepicker-spinbuttons .year {
  width: 3em;
}

.datepicker-spinbuttons .spinbutton {
  float: left;
  text-align: center;
}

.datepicker-spinbuttons .spinbutton:first-child {
  border-left: 4px;
}

.datepicker-spinbuttons .spinbutton:last-child {
  border-right: 4px;
}

.datepicker-spinbuttons .spinbutton .previous,
.datepicker-spinbuttons .spinbutton .next {
  color: #666;
}

.datepicker-spinbuttons .spinbutton.focus {
  outline: 4px solid rgba(1, 117, 228, 0.2);
}

.datepicker-spinbuttons .spinbutton.focus,
.datepicker-spinbuttons .spinbutton:hover {
  color: inherit;
  background-color: none;
}

.datepicker-spinbuttons .spinbutton.focus [role="spinbutton"],
.datepicker-spinbuttons .spinbutton:hover [role="spinbutton"] {
  /*background-color: #e5f1fe;*/
  color: var(--defaultBlue);
}

.datepicker-spinbuttons .spinbutton .previous {
  display:none;
  border-bottom: 1px solid black;
}

.datepicker-spinbuttons .spinbutton .next {
  display:none;
  border-top: 1px solid black;
}

.datepicker-spinbuttons .spinbutton .current { border:1px solid #a5a5a5; border-radius:2rem; color:#5e5e5e; font-size:1.8rem; line-height:calc(1.8rem * 1.5); }

.datepicker-spinbuttons .spinbutton button {
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
}

.datepicker-spinbuttons .spinbutton .decrease svg polygon,
.datepicker-spinbuttons .spinbutton .increase svg polygon {
  fill: #333;
  stroke-width: 3px;
  stroke: transparent;
}

.datepicker-spinbuttons .spinbutton .decrease,
.datepicker-spinbuttons .spinbutton .increase{
  position: relative;
  top: 1px;
}

.datepicker-spinbuttons .spinbutton.focus svg polygon {
  fill: #005a9c;
  stroke: #005a9c;
}

.datepicker-spinbuttons .spinbutton .decrease:hover svg polygon,
.datepicker-spinbuttons .spinbutton .increase:hover svg polygon {
  fill: #005a9c;
  stroke: #005a9c;
}

div[role="separator"] {
  clear: both;
}

.datepicker-spinbuttons .spinbutton .decrease.disabled svg,
.datepicker-spinbuttons .spinbutton .increase.disabled svg { 
  fill: #ddd;
  cursor:default;
} 