//	=================
//    	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

/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.17.47
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */
.bootstrap-datetimepicker-widget {
	list-style: none;
	.list-unstyled {
		margin: $m-0;
	}
	a[data-action] {
		padding: $p-0 $p-0;
		background-color: $color_6;
		&:active {
			box-shadow: none;
		}
	}
	.timepicker-hour {
		width: 54px;
		font-weight: bold;
		font-size: 1.2em;
		margin: $m-0;
		color: $additional-color-5;
	}
	.timepicker-minute {
		width: 54px;
		font-weight: bold;
		font-size: 1.2em;
		margin: $m-0;
		color: $additional-color-5;
	}
	.timepicker-second {
		width: 54px;
		font-weight: bold;
		font-size: 1.2em;
		margin: $m-0;
		color: $additional-color-5;
	}
	button[data-action] {
		padding: 6px;
	}
	.btn[data-action="incrementHours"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Increment Hours";
		}
	}
	.btn[data-action="incrementMinutes"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Increment Minutes";
		}
	}
	.btn[data-action="decrementHours"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Decrement Hours";
		}
	}
	.btn[data-action="decrementMinutes"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Decrement Minutes";
		}
	}
	.btn[data-action="showHours"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Show Hours";
		}
	}
	.btn[data-action="showMinutes"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Show Minutes";
		}
	}
	.btn[data-action="togglePeriod"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Toggle AM/PM";
		}
	}
	.btn[data-action="clear"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Clear the picker";
		}
	}
	.btn[data-action="today"] {
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Set the date to today";
		}
	}
	.picker-switch {
		text-align: $align-center;
		&::after {
			position: $pos-abs;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: $p-0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: $b-width-0;
			content: "Toggle Date and Time Screens";
		}
		td {
			padding: $p-0;
			margin: $m-0;
			height: auto;
			width: auto;
			line-height: inherit;
			span {
				line-height: 2.5;
				height: 2.5em;
				width: 100%;
			}
		}
	}
	table {
		width: 100%;
		margin: $m-0;
		td {
			text-align: $align-center;
			border-radius: $br-4;
			height: 54px;
			line-height: 54px;
			// width: 0;
			// color: $color_57;
			span {
				display: inline-block;
				width: 35px;
				height: 35px;
				line-height: 40px;
				margin: 2px 1.5px;
				cursor: pointer;
				border-radius: $br-4;
				color: $additional-color-11;
				&:hover {
					background: $color_54;
				}
			}
			span.active {
				background-color: $color_534;
				color: $white;
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			}
			span.old {
				color: $color_66;
			}
			span.disabled {
				background: none;
				color: $color_66;
				cursor: not-allowed;
				&:hover {
					background: none;
					color: $color_66;
					cursor: not-allowed;
				}
			}
		}
		th {
			text-align: $align-center;
			border-radius: $br-4;
			height: 20px;
			line-height: 20px;
			width: 20px;
		}
		th.picker-switch {
			width: 145px;
		}
		th.disabled {
			background: none;
			color: $color_66;
			cursor: not-allowed;
			&:hover {
				background: none;
				color: $color_66;
				cursor: not-allowed;
			}
		}
		th.prev {
			&::after {
				position: $pos-abs;
				width: 1px;
				height: 1px;
				margin: -1px;
				padding: $p-0;
				overflow: hidden;
				clip: rect(0, 0, 0, 0);
				border: $b-width-0;
				content: "Previous Month";
			}
		}
		th.next {
			&::after {
				position: $pos-abs;
				width: 1px;
				height: 1px;
				margin: -1px;
				padding: $p-0;
				overflow: hidden;
				clip: rect(0, 0, 0, 0);
				border: $b-width-0;
				content: "Next Month";
			}
		}
		thead {
			tr {
				&:first-child {
					th {
						cursor: pointer;
						&:hover {
							background: $color_200;
						}
					}
				}
			}
		}
		td.cw {
			font-size: .8em;
			height: 20px;
			line-height: 20px;
			color: $color_66;
		}
		td.day {
			height: 20px;
			line-height: 20px;
			width: 20px;
			&:hover {
				background: $color_200;
				cursor: pointer;
			}
		}
		td.hour {
			&:hover {
				background: $color_200;
				cursor: pointer;
			}
		}
		td.minute {
			&:hover {
				background: $color_200;
				cursor: pointer;
			}
		}
		td.second {
			&:hover {
				background: $color_200;
				cursor: pointer;
			}
		}
		td.old {
			color: $color_66;
		}
		td.new {
			color: $color_66;
		}
		td.today {
			position: $pos-rel;
			&:before {
				content: '';
				display: inline-block;
				border: $solid $color_none;
				border-width: $b-width-0 $b-width-0 $b-width-7 $b-width-7;
				border-bottom-color: $color_534;
				border-top-color: $color_243;
				position: $pos-abs;
				bottom: 4px;
				right: 4px;
			}
		}
		td.active {
			background-color: $color_534;
			color: $white;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			&:hover {
				background-color: $color_534;
				color: $white;
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			}
		}
		td.active.today {
			&:before {
				border-bottom-color: $white;
			}
		}
		td.disabled {
			background: none;
			color: $color_66;
			cursor: not-allowed;
			&:hover {
				background: none;
				color: $color_66;
				cursor: not-allowed;
			}
		}
	}
	.datepicker-decades {
		.decade {
			line-height: 1.8em !important;
		}
	}
}
.bootstrap-datetimepicker-widget.dropdown-menu {
	display: block;
	margin: 2px $m-0;
	padding: 4px;
	width: 19em;
	&:before {
		content: '';
		display: inline-block;
		position: $pos-abs;
	}
	&:after {
		content: '';
		display: inline-block;
		position: $pos-abs;
	}
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom {
	&:before {
		border-left: $b-width-7 $solid $color_none;
		border-right: $b-width-7 $solid $color_none;
		border-bottom: $b-width-7 $solid $color_103;
		border-bottom-color: $color_243;
		top: -7px;
		left: 7px;
	}
	&:after {
		border-left: $b-width-6 $solid $color_none;
		border-right: $b-width-6 $solid $color_none;
		border-bottom: $b-width-6 $solid $white;
		top: -6px;
		left: 8px;
	}
}
.bootstrap-datetimepicker-widget.dropdown-menu.top {
	&:before {
		border-left: $b-width-7 $solid $color_none;
		border-right: $b-width-7 $solid $color_none;
		border-top: $b-width-7 $solid $color_103;
		border-top-color: $color_243;
		bottom: -7px;
		left: 6px;
	}
	&:after {
		border-left: $b-width-6 $solid $color_none;
		border-right: $b-width-6 $solid $color_none;
		border-top: $b-width-6 $solid $white;
		bottom: -6px;
		left: 7px;
	}
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right {
	&:before {
		left: auto;
		right: 6px;
	}
	&:after {
		left: auto;
		right: 7px;
	}
}
.bootstrap-datetimepicker-widget.usetwentyfour {
	td.hour {
		height: 27px;
		line-height: 27px;
	}
}
.bootstrap-datetimepicker-widget.wider {
	width: 21em;
}
.input-group.date {
	.input-group-addon {
		cursor: pointer;
	}
}
.sr-only {
	position: $pos-abs;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: $p-0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: $b-width-0;
}
@media (min-width:768px) {
	.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
		width: 38em;
	}
}
@media (min-width:992px) {
	.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
		width: 38em;
	}
}
@media (min-width:1200px) {
	.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
		width: 38em;
	}
}