.xdsoft_datetimepicker{
	box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.4);
	background: #FFFFFF;
	border:1px solid darken($color-input-focus, 40%);
	display: block;
	padding: 8px;
	padding-left: 0px;
	padding-top: 2px;
	position: absolute;
	z-index: 9999;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:none;

	*{
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding:0px;
		margin:0px;
	}

	iframe {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 75px;
	    height: 210px;
	    background: transparent;
	    border:none;
	}

	.xdsoft_datepicker, .xdsoft_timepicker{
		display:none;

		&.active{
			display:block;
		}
	}
	.xdsoft_datepicker{
		float:left;
		margin-left:8px;
	}
	.xdsoft_datepicker.active + .xdsoft_timepicker{
		margin-top:8px;
		margin-bottom:3px
	}
	.xdsoft_mounthpicker{
		position: relative;
		text-align: center;
	}

	.xdsoft_next, .xdsoft_prev, .xdsoft_today_button{
		background-color: transparent;
		cursor: pointer;
		display: block;
		border:0;
		overflow: hidden;
		padding: 5px 0px;
		position: relative;
		white-space: nowrap;
		width: 2em;
		color:$color-teal;
		text-transform:none;
		text-align:center;

		&:before{
			font-size:1.5em;
			font-family:wagtail;
			width:1em;
			line-height:1.3em;
			text-align:center;
			margin:0;
		}
		&:hover{
			color:$color-teal-darker;
		}
	}
	.xdsoft_prev{
		float: left;

		&:before{
			content:"z";
		}
	}
	.xdsoft_today_button{
		float: left;
		margin-left:5px;

		&:before{
			content:"W";
		}
	}

	.xdsoft_next{
		float: right;

		&:before{
			content:"n";
		}
	}
	
	.xdsoft_timepicker{
		width: 70px;
		float:left;
		text-align:center;
		margin-left:8px;
		margin-top:0px;

		.xdsoft_prev,
		.xdsoft_next{
			float:none;
			height: 1.5em;
			display: block;
			text-align:center;
			width:100%;
			padding:0;

			&:before{
				width:100%;
			}
		}

		.xdsoft_prev:before{
			content:"e";
		}

		.xdsoft_next:before{
			content:"q";
		}

		.xdsoft_time_box{
			position:relative;
			border:1px solid #ccc;
			height:170px;
			overflow:hidden;
			border-bottom:1px solid #DDDDDD;

			> div > div{
				background: #F5F5F5;
				border-top:1px solid #DDDDDD;
				color: #666666;
				font-size: 1em;
				text-align: center;
				border-collapse:collapse;
				cursor:pointer;
				border-bottom-width:0px;
				height:2.3em;
				line-height:2.3em;

				&:first-child{
					border-top-width:0px;
				}
			}
		}
	}
		
	.xdsoft_label{
		display: inline;
	    position: relative;
	    z-index: 9999;
	    margin: 0;
	    padding: 5px 3px;
	    font-size: 14px;
	    line-height: 20px;
	    font-weight: bold;
	    background-color: #fff;
		float:left;
		width:182px;
		text-align:center;
		cursor:pointer;

		&:hover{
			text-decoration:underline;
		}

		> .xdsoft_select{
			border:1px solid #ccc;
			position:absolute;
			display:block;
			right:0px;
			top:30px;
			z-index:101;
			display:none;
			background:#fff;
			max-height:160px;
			overflow-y:hidden;
			
			&.xdsoft_monthselect{right:-7px;}
			&.xdsoft_yearselect{right:2px;}
			
			> div > .xdsoft_option:hover{
				color: #fff;
			    background: #ff8000;
			}
			> div > .xdsoft_option{
				padding:2px 15px 2px 5px; 
			}
			> div > .xdsoft_option.xdsoft_current{
				background: #33AAFF;
				color:#fff;
				font-weight: 700;
			}
		}

	}

	.xdsoft_month{
		width:90px;
		text-align:right;
	}
	.xdsoft_year{
		width:56px;
	}
	.xdsoft_calendar{
		clear:both;
		
		table{
			border-collapse:collapse;
		}
		td > div{
			padding-right:5px;
		}
		td, th{
			width:14.285%;
			border:1px solid #DDDDDD;
			color: #666666;
			font-size: 12px;
			text-align: right;
			padding:5px 7px;
			border-collapse:collapse;
			cursor:pointer;
			height: 25px;
		}
		td{
			background-color:white;
		}
		th{
			background: #F1F1F1;
			font-weight: 700;
			font-size:0.85em;
			text-align: center;
			cursor:default;
		}
	}

	.xdsoft_calendar td.xdsoft_default,
	.xdsoft_calendar td.xdsoft_current,
	.xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current{
		background: $color-salmon;
		color:#fff;
		font-weight: 700;
	}
	.xdsoft_calendar td.xdsoft_other_month,
	.xdsoft_calendar td.xdsoft_disabled,
	.xdsoft_time_box > div > div.xdsoft_disabled{
		opacity:0.5;
		background:$color-grey-3;
	}
	
	.xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled{
		opacity:0.2;
	}
	.xdsoft_calendar td:hover,
	.xdsoft_timepicker .xdsoft_time_box > div > div:hover{
		color: #fff;
	    background: $color-teal;
	}
}

.xdsoft_noselect{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.xdsoft_noselect::selection { background: transparent; }
.xdsoft_noselect::-moz-selection { background: transparent; }
.xdsoft_datetimepicker.xdsoft_inline{
	display: inline-block;
	position: static;
	box-shadow: none;
}

.xdsoft_scroller_box{
	position:relative;
}
.xdsoft_scrollbar{
	position:absolute;
	width:7px;
	width:7px;
	right:0px;
	top:0px;
	bottom:0px;
	cursor:pointer;

	> .xdsoft_scroller{
		background:#ccc !important;
		height:20px;
		border-radius:3px;
	}
}
