/* Widget popup container - balanced vertical space */
.bootstrap-datetimepicker-widget {
  box-sizing: border-box;
  background: #fff;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 80%;
  height: 300%;
  min-width: 80%;
  /*padding: 12px 8px !important;  Same top/bottom space */
  padding-top: 11px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Center controls with equal spacing */
.bootstrap-datetimepicker-widget .timepicker-picker {
  display: flex !important;
  flex-direction: row;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px; /* Equal space between columns */
  width: 100%;
  min-width: 210px;
}
/* Each column for hour/minute/am-pm (vertical alignment) */
.bootstrap-datetimepicker-widget .timepicker-picker > div {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;           /* Equally sized columns */
  height: 124px;             /* Consistent column height */
}
/* Arrows always stacked close to number, vertically centered */
.bootstrap-datetimepicker-widget .btn[data-action^="increment"],
.bootstrap-datetimepicker-widget .btn[data-action^="decrement"] {
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 18px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: black !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: Center;
}
/* Arrow glyphicons */
.bootstrap-datetimepicker-widget .btn[data-action^="increment"] .glyphicon,
.bootstrap-datetimepicker-widget .btn[data-action^="decrement"] .glyphicon {
  font-size: 16px !important;
  color: black !important;
}
/* Time numbers - large, centered */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute {
  font-size: 100% !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 38px;
  line-height: 1;
  display: block;

}
/* Colon - centered between hour and minute, slightly spaced */
.bootstrap-datetimepicker-widget .separator {
  font-size: 100% !important;
  font-weight: 600 !important;
  padding: 6px 6px !important;
  margin: 0 !important;
  text-align: center;
  display: inline-block !important;
  line-height: 1.1 !important;
  vertical-align: bottom !important;
}
/* AM/PM toggle button: vertically aligned with time, same size */
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"] {
  background: #223045 !important;
  color: #fff !important;
  border: none !important;
  font-size: 98% !important;
  padding: 5px 14px !important;
  border-radius: 5px !important;
  cursor: pointer;
  margin: 0;
  min-width: 42px;
  align-self: center;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
/* AM/PM toggle hover/focus */
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]:hover,
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]:focus {
  background: #485570 !important;
}
/* Balance vertical spacing in all columns */
.bootstrap-datetimepicker-widget .timepicker-picker > div > .btn,
.bootstrap-datetimepicker-widget .timepicker-picker > div > span {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Make sure all are true vertical columns */
.bootstrap-datetimepicker-widget .timepicker-picker > div {
  justify-content: space-between !important;
}

/* 3. Optional: For minute column only, push value a little right for balance */
.bootstrap-datetimepicker-widget .timepicker-picker > div:nth-child(3) .timepicker-minute {
  text-align: right;
  padding-left: 4px !important;
}
/* Hour column: keep left padding for alignment */
.bootstrap-datetimepicker-widget .timepicker-hour {
  text-align: left !important;
  padding-left: 4px !important; /* More padding moves value further left */
}

/* Colon separator: negative left margin moves colon left */
.bootstrap-datetimepicker-widget .separator {
  margin-left: -6px !important;  /* Move colon left */
  margin-right: 2px !important;  /* Optional: slight space to right */
  padding: 0 2px !important;
}

/* Minute column: right-aligned, shift right for alignment */
.bootstrap-datetimepicker-widget .timepicker-minute {
  text-align: left !important;
  padding-left: 6px !important; /* More padding moves value further right */
}
.bootstrap-datetimepicker-widget .timepicker-picker table td span {
    pointer-events: none; /* disables direct clicking on values */
}

/* Ensure all FA icons inside the datetimepicker popup get styled */
body .bootstrap-datetimepicker-widget .fas,
/* Specific icons (optional customization) */
body .bootstrap-datetimepicker-widget .fa-chevron-up,
body .bootstrap-datetimepicker-widget .fa-chevron-down {
  color: #223045 !important;
  font-size: 100% !important;
}

body .bootstrap-datetimepicker-widget .fa-clock {
  color: #007bff !important; /* blue clock icon */
}
/* Optional hover effect */
body .bootstrap-datetimepicker-widget .fas:hover {
  color: #ff9800 !important; /* orange on hover */
  cursor: pointer;
}