//  =================
//      Imports
//  =================

@import '../../assets/base/color_variables';    // Color Variables
@import '../../assets/base/fonticons';              // Fonticons Variables
@import '../../assets/base/urls';                   // URLS Variables
@import '../../assets/base/utilities_variables';  // Utilities Variables

.ui-timepicker-wrapper {
	overflow-y: auto;
	max-height: 150px;
	width: 6.5em;
	background: $white;
	border: $b-width-1 $solid $color_118;
	-webkit-box-shadow: $shadow-51;
	-moz-box-shadow: $shadow-51;
	box-shadow: $shadow-51;
	outline: none;
	z-index: 10052;
	margin: $m-0;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration {
	width: 13em;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30 {
	width: 11em;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
	width: 11em;
}
.ui-timepicker-list {
	margin: $m-0;
	padding: $p-0;
	list-style: none;
	&:hover {
		.ui-timepicker-duration {
			color: $color_75;
		}
		.ui-timepicker-selected {
			background: $white;
			color: $black;
		}
	}
	li {
		padding: 3px $p-0 3px $p-5;
		cursor: pointer;
		white-space: nowrap;
		color: $black;
		list-style: none;
		margin: $m-0;
		&:hover {
			background: $color_589;
			color: $white;
			.ui-timepicker-duration {
				color: $color_103;
			}
		}
	}
	.ui-timepicker-selected {
		&:hover {
			background: $color_589;
			color: $white;
		}
	}
	li.ui-timepicker-disabled {
		color: $color_75;
		cursor: default;
		&:hover {
			color: $color_75;
			cursor: default;
			background: $color_376;
		}
	}
	li.ui-timepicker-selected.ui-timepicker-disabled {
		color: $color_75;
		cursor: default;
		background: $color_376;
	}
}
.ui-timepicker-duration {
	margin-left: $m-5;
	color: $color_75;
}
li.ui-timepicker-selected {
	background: $color_589;
	color: $white;
	.ui-timepicker-duration {
		color: $color_103;
	}
}
.bootstrap-datetimepicker-widget.dropdown-menu {
	width: 70%;
}