.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }

/* BUYS-55588: bound the Hour/Minute/Second rows to the calendar popup.
   The rule above indents each dd by a *percentage* (40%) and leaves the slider inside it at
   `width: auto`, so nothing actually constrains the slider to the popup. Two ways that breaks:
   a foreign rule gives .ui-slider an explicit width, or it takes the slider out of flow -- which
   re-points a percentage width at the absolutely-positioned #ui-datepicker-div (400px on the
   reported page) instead of the ~200px dd, and the bars run past the popup's right border.
   Containment lives here rather than in a page stylesheet because this file is the only one
   template/head-resources.jsp loads on BOTH its branches (classic and "Enable UX for All
   Users"), and the widget renders identically on both.
   Both declarations are no-ops when nothing interferes: `width: auto` on the dd already resolves
   to exactly `60% - 10px`, and the slider already fills its dd. Scoped away from
   .ui-timepicker-oneLine, whose dd/slider are deliberately inline-block with no indent -- see
   the "Shortened version style" block below.
   Containment has to start at the addon's own container, not at the dd: the dd's `40%` indent and
   `max-width` are percentages of the *dl*, so a foreign rule that widens the dl or the
   .ui-timepicker-div drags the whole row past the popup border and a dd-level cap can never see
   it. Verified: capping only the dd leaves that case broken, capping from here fixes it, and
   either way the uninterfered render is unchanged. Nothing in the app sets a width on these two
   (checked every stylesheet plus the PrimeFaces jar and the mdf-ui theme), so `width: auto` /
   `max-width: 100%` / `min-width: 0` are inert until something foreign does.
   These are `max-width`, deliberately, not `overflow: hidden` -- over-wide content still renders,
   it just stops widening its ancestors, so nothing can be clipped. An `!important` foreign width
   still wins; that is the known residual gap. */
.ui-timepicker-div:not(.ui-timepicker-oneLine),
.ui-timepicker-div:not(.ui-timepicker-oneLine) dl {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: auto;
}
.ui-timepicker-div:not(.ui-timepicker-oneLine) dl dd {
    box-sizing: border-box;
    /* mirrors the margins above: 100% - 40% indent - 10px right gutter */
    max-width: calc(60% - 10px);
    min-width: 0; /* min-width wins over max-width, so it has to be neutralised too */
}
.ui-timepicker-div:not(.ui-timepicker-oneLine) dl dd > .ui-slider {
    position: relative; /* re-assert jQuery UI's own value so the slider is sized by its dd */
    width: auto;
    max-width: 100%;
    min-width: 0;
}

.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }