/**
 * @preserve jQuery PeriodPicker plugin v5.4.2
 * @homepage http://xdsoft.net/jqplugins/periodpicker/
 * @copyright (c) 2016 xdsoft.net Chupurnov Valeriy
 * @license PRO http://xdsoft.net/jqplugins/periodpicker/license/
 */
.xdsoft_noselect {
	user-select: none;
}
.periodpicker_timepicker {
	&, & * {
		box-sizing: border-box;
	}
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, 'Muli', sans-serif;
	font-size: 1em;
	overflow: hidden;
	font-size: 16px;
	padding: 0;
	input.periodpicker_key_hooker{
		border:0 !important;
		background:transparent !important;
		outline:0 !important;
		width:0 !important;
		height:0 !important;
		padding:0 !important;
		margin:0 !important;
		font-size:0 !important;
		box-shadow: none !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}
	.periodpicker_timepicker_sliders>div{
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 50%;
		text-align: center;
		cursor: default;
		&.periodpicker_col4{
			width:25%;
			& + div.periodpicker_col4{
				left:25%;
				& + div.periodpicker_col4{
					left:50%;
					& + div.periodpicker_col4{
						left:75%;		
					}
				}
			}
		}
		&.periodpicker_col3{
			width:33.3333333333%;
			& + div.periodpicker_col3{
				left:33.3333333333%;
				& + div.periodpicker_col3{
					left:66.6666666666%;		
				}				
			}
		}
		&.periodpicker_col2{
			width:50%;
			& + div.periodpicker_col2{
				left:50%;		
			}
		}
		&:not(.draggable)>div{
			transition:margin-top 0.1s linear;
		}
		&>div>div{
			height:22px;
			line-height:23px;
			transition:font 0.1s linear;
			position:relative;
			color:#727272;
			&.active{
				transition:none;
				color:#4B4B4B;
				font-size:1.1em;
				font-weight:700;
			}
		}
		&.periodpicker_col4 + div.periodpicker_col4:not(.periodpicker_ampmpicker_box):not(.draggable)  div.active:before,
		&.periodpicker_col2 + div.periodpicker_col2:not(.periodpicker_ampmpicker_box):not(.draggable)  div.active:before,
		&.periodpicker_col3 + div.periodpicker_col3:not(.periodpicker_ampmpicker_box):not(.draggable)  div.active:before{
			content: ":";
			position: absolute;
			font-size: 16px;
			margin-left: -1px;
			left: 0;
			font-weight: 700;
			color: #797575;
			margin-top: -1px;
			z-index: 1;
		}
		&.periodpicker_col2 + div.periodpicker_col2  div.active:before{
			margin-left: -9px;
		}
	}
	&:before{
		content:"";
		position:absolute;
		left:0px;
		right:0px;
		height:20px;
		box-shadow:	inset 1px 32px 20px 0px rgba(255, 255, 255, 0.55);
		z-index:2;
	}
	&:after{
		content:"";
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0;
		height:20px;
		box-shadow: inset 0px -32px 20px 0px rgba(255, 255, 255, 0.55);
		z-index:2;
	}
	.periodpicker_timepicker_center{
		position:absolute;
		top:50%;
		height:0;
		left: 0px;
		height: 0;
		right: 0px;
		&:before,
		&:after{
			content:"";
			position:absolute;
			width:100%;
			border-top:1px solid #ccc;
		}
		&:before{
			margin-top:-11px;
		}
		&:after{
			margin-top:13px;
		}
	}
	
}


.periodpicker_timepicker_dialog{
	position:absolute;
	height:300px;
	width:99px;
	background:#fff;
	z-index: 33001;
	border: 1px solid rgba(0,0,0,.1);
	box-shadow: 0 10px 20px -5px rgba(0,0,0,.4);
	display:none;
    &.periodpicker_timepicker_inline{
		display:inline-block;
        box-shadow:none;
        position:relative;
	}
	&.visible{
		display:block;	
	}
}