.ui-datepicker {
	background-color: @wcfDropdownBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	margin-top: 7px;
	z-index: 450 !important;
	
	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);

	&::after {
		border: 7px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 9px;
		position: absolute;
		top: -7px;
		z-index: 100;
	}
	
	&::before {
		border: 6px solid transparent;
		border-bottom-color: @wcfDropdownBackgroundColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
		z-index: 101;
	}
	
	a:hover {
		text-decoration: none;
	}
	
	> .ui-datepicker-header {
		padding: 4px;
		text-align: center;
		
		> .ui-datepicker-prev,
		> .ui-datepicker-next {
			display: inline-block;
			margin: 2px 2px 0 2px;
			
			> span {
				display: none;
			}
		}
		
		> .ui-datepicker-prev {
			float: left;
			
			&::before {
				content: "\f060";
				font-family: FontAwesome;
				font-size: 14px;
			}
		}
		
		> .ui-datepicker-next {
			float: right;
			
			&::before {
				content: "\f061";
				font-family: FontAwesome;
				font-size: 14px;
			}
		}
	}
	
	> table {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		
		> thead {
			background-color: @wcfTabularBoxBackgroundColor;
			
			> tr > th {
				color: @wcfTabularBoxColor;
				font-size: @wcfSmallFontSize;
				padding: 5px 0;
				text-transform: uppercase;
				
				.textShadow(@wcfTabularBoxBackgroundColor);
			}
		}
		
		> tbody {
			> tr {
				border-bottom: 1px solid @wcfContainerBorderColor;
				
				&:last-child {
					border-bottom: 0;
				}
				
				> td {
					border-right: 1px solid @wcfContainerBorderColor;
					
					&:last-child {
						border-right: 0;
					}
					
					> span,
					> a {
						display: inline-block;
						color: @wcfColor;
						font-weight: bold;
						height: 30px;
						line-height: 30px;
						text-align: center;
						width: 30px;
						
						.textShadow(@wcfContainerBackgroundColor);
					}
				}
			}
		}
	}
	
	.ui-datepicker-calendar .ui-state-default {
		background-color: @wcfContainerAccentBackgroundColor;
	}
	
	.ui-datepicker-unselectable .ui-state-default {
		background-color: @wcfContainerBackgroundColor;
		color: @wcfDimmedColor;
	}
	
	.ui-datepicker-calendar .ui-state-hover {
		background-color: @wcfContainerHoverBackgroundColor;
	}
	
	.ui-datepicker-calendar .ui-state-active {
		background-color: @wcfContainerHoverBackgroundColor;
	}
	
	/* time picker */
	.ui-timepicker-div {
		border-top: 1px solid @wcfContainerBorderColor;
		
		> dl {
			> dt {
				margin-top: @wcfGapTiny !important;
				width: 100px;
			}
			
			> dd {
				margin-left: 120px;
				margin-top: @wcfGapTiny !important;
			}
		}
	}
}