.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%; }
.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; border-bottom: solid 1px #555; 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; }

/* ====================================================================== *
 *  Cacti DateTimePicker theming - harmonized with the midwinter palette.
 *  Surface colours use the theme palette variables so the picker follows
 *  both the default dark mode and the light mode; the accent is the theme
 *  blue.  Scoped to .ui-datepicker so other jQuery UI widgets stay
 *  untouched.
 * ====================================================================== */

/* Popup surface */
.ui-datepicker.ui-widget.ui-widget-content {
	background: var(--background-content);
	border: 1px solid var(--border-color);
	color: var(--text-color-lighter);
	box-shadow: var(--box-shadow-color) 0 6px 20px;
	border-radius: 4px;
}
.ui-datepicker.ui-widget-content a {
	color: var(--text-color-lighter);
}

/* Month / year header bar */
.ui-datepicker .ui-datepicker-header.ui-widget-header {
	background: #2f6cce;
	border: 1px solid #2f6cce;
	color: #ffffff;
	border-radius: 3px;
}
.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title select {
	color: #ffffff;
}
.ui-datepicker .ui-datepicker-title select {
	background: var(--background-content);
	color: var(--text-color-lighter);
	border: 1px solid var(--border-color);
}
.ui-datepicker .ui-datepicker-header .ui-icon {
	filter: brightness(0) invert(1);
}

/* Prev / next navigation */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	background: transparent;
	border: 1px solid transparent;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	background: #255cb0;
	border: 1px solid transparent;
	border-radius: 3px;
}

/* Weekday labels */
.ui-datepicker th {
	color: var(--text-color-lighter);
	opacity: 0.7;
}

/* Day cells */
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-color-lighter);
	text-align: center;
	border-radius: 3px;
}
.ui-datepicker td a.ui-state-hover,
.ui-datepicker td a.ui-state-focus {
	background: rgba(47, 108, 206, 0.18);
	border: 1px solid transparent;
	color: var(--text-color-lighter);
}
.ui-datepicker td.ui-datepicker-today a.ui-state-highlight,
.ui-datepicker td.ui-datepicker-today a {
	background: transparent;
	border: 1px solid #2f6cce;
	color: var(--text-color-lighter);
}
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a.ui-state-active {
	background: #2f6cce;
	border: 1px solid #2f6cce;
	color: #ffffff;
}

/* Button pane (Now / Done) */
.ui-datepicker .ui-datepicker-buttonpane {
	border-top: 1px solid var(--border-color);
}
.ui-datepicker .ui-datepicker-buttonpane button {
	background: transparent;
	border: 1px solid var(--border-color);
	color: var(--text-color-lighter);
	border-radius: 3px;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover,
.ui-datepicker .ui-datepicker-buttonpane button:focus {
	background: #2f6cce;
	border-color: #2f6cce;
	color: #ffffff;
}

/* Timepicker addon - time sliders */
.ui-datepicker .ui-timepicker-div .ui-widget-header {
	background: transparent;
	border: none;
	color: var(--text-color-lighter);
}
.ui-datepicker .ui-timepicker-div dl dt,
.ui-datepicker .ui-timepicker-div .ui_tpicker_time_label,
.ui-datepicker .ui-tpicker-grid-label {
	color: var(--text-color-lighter);
}
.ui-datepicker .ui-timepicker-div .ui-slider {
	background: rgba(127, 127, 127, 0.22);
	border: 1px solid var(--border-color);
	border-radius: 6px;
}
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-range {
	background: #2f6cce;
	border-radius: 6px;
}
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle {
	background: #2f6cce;
	border: 2px solid var(--background-content);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:hover,
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:focus {
	background: #3f7bd8;
	border-color: var(--background-content);
}
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:focus,
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:focus-visible {
	outline: 2px solid #2f6cce;
	outline-offset: 2px;
}

/* Editable time input */
.ui-datepicker .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
	color: var(--text-color-lighter);
	border-bottom: 1px solid var(--border-color);
	background: transparent;
}