.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 raspberry palette.
 *  Scoped to .ui-datepicker so other jQuery UI widgets stay untouched.
 * ====================================================================== */

/* Popup surface */
.ui-datepicker.ui-widget.ui-widget-content {
	background: #ffffff;
	border: 1px solid #c4c4c4;
	color: #2d2d2d;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	border-radius: 4px;
}
.ui-datepicker.ui-widget-content a {
	color: #2d2d2d;
}

/* Month / year header bar */
.ui-datepicker .ui-datepicker-header.ui-widget-header {
	background: #770077;
	border: 1px solid #770077;
	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: #ffffff;
	color: #2d2d2d;
	border: 1px solid #c4c4c4;
}
.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: #f0daf0;
	border: 1px solid transparent;
	border-radius: 3px;
}

.ui-datepicker .ui-datepicker-prev-hover .ui-icon,
.ui-datepicker .ui-datepicker-next-hover .ui-icon {
	filter: none;
}

/* Weekday labels */
.ui-datepicker th {
	color: #2d2d2d;
	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: #2d2d2d;
	text-align: center;
	border-radius: 3px;
}
.ui-datepicker td a.ui-state-hover,
.ui-datepicker td a.ui-state-focus {
	background: #f0daf0;
	border: 1px solid transparent;
	color: #3d003d;
}
.ui-datepicker td.ui-datepicker-today a.ui-state-highlight,
.ui-datepicker td.ui-datepicker-today a {
	background: transparent;
	border: 1px solid #770077;
	color: #2d2d2d;
}
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a.ui-state-active {
	background: #770077;
	border: 1px solid #770077;
	color: #ffffff;
}

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

/* Timepicker addon - time sliders */
.ui-datepicker .ui-timepicker-div .ui-widget-header {
	background: transparent;
	border: none;
	color: #2d2d2d;
}
.ui-datepicker .ui-timepicker-div dl dt,
.ui-datepicker .ui-timepicker-div .ui_tpicker_time_label,
.ui-datepicker .ui-tpicker-grid-label {
	color: #2d2d2d;
}
.ui-datepicker .ui-timepicker-div .ui-slider {
	background: rgba(0, 0, 0, 0.14);
	border: 1px solid #c4c4c4;
	border-radius: 6px;
}
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-range {
	background: #770077;
	border-radius: 6px;
}
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle {
	background: #770077;
	border: 2px solid #ffffff;
	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: #990099;
	border-color: #ffffff;
}

/* Editable time input */
.ui-datepicker .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
	color: #2d2d2d;
	border-bottom: 1px solid #c4c4c4;
	background: transparent;
}