$dt-datetime-selected: #4E6CA3 !default;

div.dt-datetime {
	position: absolute;
	background-color: white;
	z-index: 2050;
    border: 1px solid #ccc;
	box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
	padding: 6px 20px;
	width: 275px;
	border-radius: 5px;

	&.inline {
		position: relative;
		box-shadow: none;
	}

	div.dt-datetime-title {
		text-align: center;
	    padding: 5px 0px 3px;
	}

	div.dt-datetime-buttons {
		text-align: center;

		a {
			display: inline-block;
			padding: 0 0.5em 0.5em 0.5em;
			margin: 0;
			font-size: 0.9em;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	table {
		border-spacing: 0;
		margin: 12px 0;
		width: 100%;

		&.dt-datetime-table-nospace {
			margin-top: -12px;
		}

		th {
			font-size: 0.8em;
			color: #777;
			font-weight: normal;
			width: 14.285714286%;
			padding: 0 0 4px 0;
			text-align: center;
		}

		td {
			font-size: 0.9em;
			color: #444;
			padding: 0;
		}

		td.selectable {
			text-align: center;
			background: #f5f5f5;

			&.disabled {
				color: #aaa;
				background: white;

				button:hover {
					color: #aaa;
					background: white;
				}
			}

			&.now {
				background-color: #ddd;
				
				button {
					font-weight: bold;
				}
			}

			&.selected button {
				background: $dt-datetime-selected;
				color: white;
				border-radius: 2px;
			}

			button:hover {
				background: #ff8000;
				color: white;
				border-radius: 2px;
			}
		}

		td.dt-datetime-week {
			font-size: 0.7em;
		}

		button {
			width: 100%;
			box-sizing: border-box;
			border: none;
			background: transparent;
			font-size: inherit;
			color: inherit;
			text-align: center;
			padding: 4px 0;
			cursor: pointer;
			margin: 0;

			span {
				display: inline-block;
				min-width: 14px;
				text-align: right;
			}
		}

		&.weekNumber th {
			width: 12.5%;
		}
	}

	div.dt-datetime-calendar {
		table {
			margin-top: 0;
		}
	}

	div.dt-datetime-label {
		position: relative;
		display: inline-block;
		height: 30px;
		padding: 5px 6px;
		border: 1px solid transparent;
		box-sizing: border-box;
		cursor: pointer;

		&:hover {
			border: 1px solid #ddd;
			border-radius: 2px;
			background-color: #f5f5f5;
		}

		select {
			position: absolute;
			top: 6px;
			left: 0;
			cursor: pointer;
			opacity: 0;
		}
	}

	// JS will only apply this when both date and time are visible
	&.horizontal {
		width: 550px;

		div.dt-datetime-date,
		div.dt-datetime-time {
			width: 48%;
		}

		div.dt-datetime-time {
			margin-left: 4%;
		}
	}

	div.dt-datetime-date {
		position: relative;
		float: left;
		width: 100%;
	}

	div.dt-datetime-time {
		position: relative;
		float: left;
		width: 100%;

		text-align: center;

		> span {
			vertical-align: middle;
		}

		th {
			text-align: left;
		}

		div.dt-datetime-timeblock {
			display: inline-block;
			vertical-align: middle;
		}
	}


	div.dt-datetime-iconLeft,
	div.dt-datetime-iconRight {
		width: 30px;
		height: 30px;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0.3;
		overflow: hidden;
		box-sizing: border-box;
		border: 1px solid transparent;

		&:hover {
			border: 1px solid #ccc;
			border-radius: 2px;
			background-color: #f0f0f0;
			opacity: 0.6;
		}

		button {
			border: none;
			background: transparent;
			text-indent: 30px;
			height: 100%;
			width: 100%;
			cursor: pointer;
		}
	}

	div.dt-datetime-iconLeft {
		position: absolute;
		top: 5px;
		left: 5px;

		button {
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			top: 7px;
			left: 10px;
			display: block;
			content: "";
			border-top: 7px solid transparent;
			border-right: 7px solid black;
			border-bottom: 7px solid transparent;
		}
	}

	div.dt-datetime-iconRight {
		position: absolute;
		top: 5px;
		right: 5px;

		button {
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			top: 7px;
			left: 12px;
			display: block;
			content: "";
			border-top: 7px solid transparent;
			border-left: 7px solid black;
			border-bottom: 7px solid transparent;
		}
	}
}

div.dt-datetime-error {
	clear: both;
	padding: 0 1em;
	max-width: 240px;
	font-size: 11px;
	line-height: 1.25em;
	text-align: center;
	color: #b11f1f;
}


html.dark {
	input.dt-datetime {
		color-scheme: dark;
	}

	div.dt-datetime {
		border: 1px solid rgb(89, 91, 94);
		background-color: rgb(33, 37, 41);
		box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);

		table {
			th {
				color: #ccc;
			}
	
			td {
				color: #eee;
			}
	
			td.selectable {
				background: rgb(55, 60, 65);
	
				&.disabled {
					color: #aaa;
					background: rgb(23, 27, 31);
	
					button:hover {
						color: #aaa;
						background: rgb(23, 27, 31);
					}
				}
	
				&.now {
					background: rgb(75, 80, 85);
				}
	
				&.selected button {
					background: rgb(110, 168, 254);
					color: black;
				}
	
				button:hover {
					background: #ff8000;
					color: black;
				}
			}
		}
	
		div.dt-datetime-label {
			&:hover {
				border: 1px solid transparent;
				background-color: rgba(255, 255, 255, 0.1);
			}
		}

		div.dt-datetime-iconLeft,
		div.dt-datetime-iconRight,
		div.dt-datetime-iconUp,
		div.dt-datetime-iconDown {
			&:hover {
				border: 1px solid transparent;
				background-color: rgba(255, 255, 255, 0.1);
			}
		}

		div.dt-datetime-iconLeft {
			&:after {
				border-right-color: white;
			}
		}

		div.dt-datetime-iconRight {
			&:after {
				border-left-color: white;
			}
		}

		select {
			color-scheme: dark;
		}
	}
	
	div.dt-datetime-error {
		color: #b11f1f;
	}
}