[data-role*='datetimepicker'] {
	cursor: pointer;
}
.datetimepicker {
	--color-datepicker-active: #{$color-major};
	--color-datepicker-hover: #{$color-major-l1};
	--datepicker-btn-size: 2rem;
	font-size: $font-size-6;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: $ui-datepicker-index;
	display: none;
	float: left;
	min-width: 160px;
	list-style: none;
	background-color: $color-bg;
	border: 1px solid $color-border;
	border-radius: $radius-1;
	box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.02);
	background-clip: padding-box;
	padding: $g2;
	margin-top: 1px;
	white-space: normal;
	direction: ltr;
	&.datetimepicker-rtl {
		direction: rtl;
		table {
			tr {
				td {
					span {
						float: right;
					}
				}
			}
		}
	}
	& > div {
		display: none;
	}
	&.minutes {
		div {
			&.datetimepicker-minutes {
				display: block;
			}
		}
	}
	&.hours {
		div {
			&.datetimepicker-hours {
				display: block;
			}
		}
	}
	&.days {
		div {
			&.datetimepicker-days {
				display: block;
			}
		}
	}
	&.months {
		div {
			&.datetimepicker-months {
				display: block;
			}
		}
	}
	&.years {
		div {
			&.datetimepicker-years {
				display: block;
			}
		}
	}
	table {
		margin: 0;
		tr {
			td {
				&.minute {
					&:hover {
						background: var(--color-datepicker-hover);
						cursor: pointer;
					}
				}
				&.hour {
					&:hover {
						background: var(--color-datepicker-hover);
						cursor: pointer;
					}
				}
				&.day {
					&:hover {
						background: var(--color-datepicker-hover);
						cursor: pointer;
					}
				}
				span {
					display: block;
					width: 23%;
					height: 54px;
					line-height: 54px;
					float: left;
					margin: 1%;
					cursor: pointer;
					border-radius: 27px;
					&:hover {
						background: var(--color-datepicker-hover);
					}
					&.old {
						color: #999999;
					}
				}
			}
		}
	}
	.datetimepicker-hours {
		span {
			height: 26px;
			line-height: 26px;
		}
	}
	.datetimepicker-minutes {
		span {
			height: 26px;
			line-height: 26px;
		}
	}
	th {
		&.switch {
			width: 145px;
			border-radius: $radius-1;
		}
	}
}

.datetimepicker-inline {
	width: 220px;
}

.datetimepicker-dropdown,
.datetimepicker-dropdown-left {
	top: 0;
	left: 0;
}

[class*='datetimepicker-dropdown']:before {
	content: '';
	display: inline-block;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #ccc;
	border-bottom-color: rgba(0, 0, 0, 0.2);

	position: absolute;
}

[class*='datetimepicker-dropdown']:after {
	content: '';
	display: inline-block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid $color-bg;
	position: absolute;
}

[class*='datetimepicker-dropdown-top']:before {
	content: '';
	display: inline-block;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #ccc;
	border-top-color: rgba(0, 0, 0, 0.2);
	border-bottom: 0;
}

[class*='datetimepicker-dropdown-top']:after {
	content: '';
	display: inline-block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid $color-bg;
	border-bottom: 0;
}

.datetimepicker-dropdown-bottom-left {
	&:before {
		top: -7px;
		right: 6px;
	}
	&:after {
		top: -6px;
		right: 7px;
	}
}

.datetimepicker-dropdown-bottom-right {
	&:before {
		top: -7px;
		left: 6px;
	}
	&:after {
		top: -6px;
		left: 7px;
	}
}

.datetimepicker-dropdown-top-left {
	&:before {
		bottom: -7px;
		right: 6px;
	}
	&:after {
		bottom: -6px;
		right: 7px;
	}
}

.datetimepicker-dropdown-top-right {
	&:before {
		bottom: -7px;
		left: 6px;
	}
	&:after {
		bottom: -6px;
		left: 7px;
	}
}

.datetimepicker td,
.datetimepicker th {
	text-align: center;
	width: var(--datepicker-btn-size);
	height: var(--datepicker-btn-size);
	border-radius: 50%;
	border: none;
}

.table-striped .datetimepicker table tr td,
.table-striped .datetimepicker table tr th {
	background-color: transparent;
}

.datetimepicker table tr td.old,
.datetimepicker table tr td.new {
	color: #999999;
}

.datetimepicker table tr td.disabled,
.datetimepicker table tr td.disabled:hover {
	background: none;
	color: #999999;
	cursor: default;
}

.datetimepicker table tr td.today,
.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today.disabled:hover {
	background-color: var(--color-datepicker-hover);
	border-color: var(--color-datepicker-hover);
}

.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today:hover:hover,
.datetimepicker table tr td.today.disabled:hover,
.datetimepicker table tr td.today.disabled:hover:hover,
.datetimepicker table tr td.today:active,
.datetimepicker table tr td.today:hover:active,
.datetimepicker table tr td.today.disabled:active,
.datetimepicker table tr td.today.disabled:hover:active,
.datetimepicker table tr td.today.active,
.datetimepicker table tr td.today:hover.active,
.datetimepicker table tr td.today.disabled.active,
.datetimepicker table tr td.today.disabled:hover.active,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today:hover.disabled,
.datetimepicker table tr td.today.disabled.disabled,
.datetimepicker table tr td.today.disabled:hover.disabled,
.datetimepicker table tr td.today[disabled],
.datetimepicker table tr td.today:hover[disabled],
.datetimepicker table tr td.today.disabled[disabled],
.datetimepicker table tr td.today.disabled:hover[disabled] {
	background-color: var(--color-datepicker-hover);
}

.datetimepicker table tr td.today:active,
.datetimepicker table tr td.today:hover:active,
.datetimepicker table tr td.today.disabled:active,
.datetimepicker table tr td.today.disabled:hover:active,
.datetimepicker table tr td.today.active,
.datetimepicker table tr td.today:hover.active,
.datetimepicker table tr td.today.disabled.active,
.datetimepicker table tr td.today.disabled:hover.active {
	background-color: var(--color-datepicker-hover);
}

.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover {
	background-color: var(--color-datepicker-active);
	border-color: var(--color-datepicker-active);
	color: #fff;
}

.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active:hover:hover,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td.active.disabled:hover:hover,
.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active:hover:active,
.datetimepicker table tr td.active.disabled:active,
.datetimepicker table tr td.active.disabled:hover:active,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td.active:hover.active,
.datetimepicker table tr td.active.disabled.active,
.datetimepicker table tr td.active.disabled:hover.active,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active:hover.disabled,
.datetimepicker table tr td.active.disabled.disabled,
.datetimepicker table tr td.active.disabled:hover.disabled,
.datetimepicker table tr td.active[disabled],
.datetimepicker table tr td.active:hover[disabled],
.datetimepicker table tr td.active.disabled[disabled],
.datetimepicker table tr td.active.disabled:hover[disabled] {
	background-color: var(--color-datepicker-active);
}

.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active:hover:active,
.datetimepicker table tr td.active.disabled:active,
.datetimepicker table tr td.active.disabled:hover:active,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td.active:hover.active,
.datetimepicker table tr td.active.disabled.active,
.datetimepicker table tr td.active.disabled:hover.active {
	background-color: var(--color-datepicker-active);
}

.datetimepicker .datetimepicker-hours table tr td span.hour_am,
.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
	width: 14.6%;
}

.datetimepicker .datetimepicker-hours fieldset legend,
.datetimepicker .datetimepicker-minutes fieldset legend {
	margin-bottom: inherit;
	line-height: 30px;
}

.datetimepicker table tr td span.disabled,
.datetimepicker table tr td span.disabled:hover {
	background: none;
	color: #999999;
	cursor: default;
}

.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td span.active.disabled,
.datetimepicker table tr td span.active.disabled:hover {
	background-color: $color-minor;
	border-color: $color-minor;
	color: #fff;
}

.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td span.active:hover:hover,
.datetimepicker table tr td span.active.disabled:hover,
.datetimepicker table tr td span.active.disabled:hover:hover,
.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active:hover:active,
.datetimepicker table tr td span.active.disabled:active,
.datetimepicker table tr td span.active.disabled:hover:active,
.datetimepicker table tr td span.active.active,
.datetimepicker table tr td span.active:hover.active,
.datetimepicker table tr td span.active.disabled.active,
.datetimepicker table tr td span.active.disabled:hover.active,
.datetimepicker table tr td span.active.disabled,
.datetimepicker table tr td span.active:hover.disabled,
.datetimepicker table tr td span.active.disabled.disabled,
.datetimepicker table tr td span.active.disabled:hover.disabled,
.datetimepicker table tr td span.active[disabled],
.datetimepicker table tr td span.active:hover[disabled],
.datetimepicker table tr td span.active.disabled[disabled],
.datetimepicker table tr td span.active.disabled:hover[disabled] {
	background-color: var(--color-datepicker-active);
}

.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active:hover:active,
.datetimepicker table tr td span.active.disabled:active,
.datetimepicker table tr td span.active.disabled:hover:active,
.datetimepicker table tr td span.active.active,
.datetimepicker table tr td span.active:hover.active,
.datetimepicker table tr td span.active.disabled.active,
.datetimepicker table tr td span.active.disabled:hover.active {
	background-color: var(--color-datepicker-active);
}

.datetimepicker thead tr:first-child th,
.datetimepicker tfoot tr:first-child th {
	cursor: pointer;
}

.datetimepicker thead tr:first-child th:hover,
.datetimepicker tfoot tr:first-child th:hover {
	background: var(--color-datepicker-hover);
}

.input-append.date .add-on i,
.input-prepend.date .add-on i,
.input-group.date .input-group-addon span {
	cursor: pointer;
	width: 14px;
	height: 14px;
}

.table-condensed {
	th,
	td {
		padding: 4px 5px;
	}
}