/**
 * @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/
 */
@button-font: Arial,sans-serif;
@button-radius: 2px;

@button-color: #000;
@button-color-disable: #999;

@button-background: #fff;
@button-background-in-focus: #f6f6f6;
@button-background-disable: #eee;
@button-background-active: #f6f5f3;

@button-shadow: 0 0 0 1px rgba(0,0,0,.2);
@button-shadow-in-focus: 0 0 0 1px rgba(0,0,0,.4);
@button-shadow-active: 0 0 0 1px rgba(0,0,0,.3);

@picker-color: rgb(96, 96, 96);
@picker-background: #fff;
@picker-font: @button-font;
@picker-border: 1px solid rgba(0,0,0,.1);
@picker-shadow: 0 10px 20px -5px rgba(0,0,0,.4);

@picker-min-height: 365px;
@bottom-panel-height: 54px;
@header-height: 40px;
@yearsline-height: 30px;

@cell-background-today: #c8ffca;
@cell-background-selected: #ffeba0;
@cell-background-selected-hover: #fff5d0;
@cell-color-today: #0e5632;
@cell-color-holiday: #c11924;

.xdsoft_noselect,.xdsoft_noselect *:not(input) {
	user-select: none;
}
.period_picker_input{
	border:0;
	line-height: 28px;
	font-size: 13px;
	border-radius: 3px;
	font-family: @button-font;
	color: @button-color;
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	user-select: none;
	text-align: center;
	white-space: nowrap;
	outline: 0;
	
	&:before {
		position: absolute;
		top: 1px;
		right: 1px;
		bottom: 1px;
		left: 1px;
		padding: 0;
		content: '';
		border-radius: @button-radius;
		background: @button-background;
		box-shadow: @button-shadow;
	}
    
    &:focus:before {
        background: @button-background-in-focus;
        box-shadow: @button-shadow-in-focus;
    }
    
    &[disabled]{
        color: @button-color-disable;
        &:before {
            background-color: @button-background-disable;
        }
    }
	&:active:before {
		background-color: @button-background-active;
		box-shadow: @button-shadow-active;
	}
	.period_button_text{
		padding: 0 13px;
		position: relative;
	}
	.icon_clear,
	.icon_calendar {
		width: 16px;
		height: 16px;
		background: 50% no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: data-uri('palete.svg');
		margin-right: 9px;
		margin-bottom: 2px;
		position: relative;
		vertical-align: middle;
		display: inline-block;
		&:after {
			visibility: hidden;
			content: '\00A0';
		}
	}
    &[disabled]{
        .icon_clear,
        .icon_calendar {
            opacity:0.5;
        }
    }
    .icon_clear {
		background-image: data-uri('clear.svg');
        margin-right: 0px;
        margin-left: 9px;
        transition: opacity 0.2s linear, background 0.2s linear;
        position:relative;
        border-radius: 8px;
        &:hover {
            opacity: 0.8;
        }
        &:active {
            background-color: #ccc;
        }
	}
	.period_button_dash {
		margin-left: 3px;
		margin-right: 2px;
	}
}
.period_picker_box {
	&, & * {
		box-sizing: border-box !important;
		color: @picker-color;
	}
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 20px 20px;
	background: @picker-background;

	font-family: @picker-font;
	font-size: 13px;

	cursor: default;
	overflow: hidden;
	z-index: 33001;
	border: @picker-border;
	box-shadow: @picker-shadow;
	min-width: 236px;
	min-height: @picker-min-height;
	padding-bottom: 80px;
	visibility:hidden;
    display: none;

	&.with_first_timepicker{
		min-width: calc(~"236px + 87px");
		&.with_second_timepicker{
			min-width: calc(~"236px + 87px + 87px");	
		}
	}
	&.period_picker_maximize{
		border: 0;
		position: fixed;
		border-radius: 0;
		box-shadow: none;
		left: 0px;
		top: 0px;
		min-width: 667px;
		min-height: 395px;
		margin-top: 0px;
		width: 100%  !important;
		height: 100%  !important;
		left: 0 !important;
		top: 0  !important;
	}
	&.visible{
		visibility:visible;
        display: block;
	}
	&.animation{
		opacity:0;
		margin-top:-200px;
		transition: .15s linear;
		transition-property: opacity, margin-top;
	}
	&.active.animation{
		opacity:1.0;
		margin-top:0px; 
	}
    &.xdsoft_inline,
    &.animation.xdsoft_inline {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        visibility:visible;
        box-shadow:none;
        opacity:1;
        margin:0;
        z-index: 0;
        display: inline-block;
    }
	.period_picker_error {
		box-shadow: 1px 1px 10px red!important;
	}
	.period_picker_head {
		color: #333;
		position: relative;
		height: 40px;
		user-select: none;
	}
	.period_picker_head_title {
		display: inline-block;
		margin-top: 12px;
		color: rgba(0,0,0,.5);
	}
	.period_picker_resizer,
	.period_picker_max_min,
	.period_picker_close {
		background-image: data-uri('buttons.svg');
		background-repeat: no-repeat;
		opacity: .5;
		right: 0;
	}
	.period_picker_resizer {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 0;
		line-height: 0;
		width: 14px;
		height: 14px;
		cursor: se-resize;
		z-index: 7;
		display: block;
		background-position: -42px 0;
	}
	.period_picker_close, .period_picker_max_min {
		position: absolute;
		width: 14px;
		height: 14px;
		top: 10px;
		cursor: pointer;
		background-position: 0 0;
	}
	.period_picker_max_min {
		background-position: -14px 0;
		right: 20px;
	}
	.period_picker_maximize div span.period_picker_max_min {
		background-position: -28px 0;
	}
	.period_picker_years {
		position: relative;
		left: 0;
		height: 30px;
		margin-bottom: 15px;
		user-select: none;
	}
	.period_picker_years_selector {
		position: absolute;
		width: 100%;
		height: 30px;
		overflow: hidden;
		font-size: 14px;
		user-select: none;
		border-radius: 3px;
		background: #f4f4f3;
		.period_picker_year {
			position: absolute;
			top: 5px;
			width: 3em;
			margin-left: -1.5em;
			font-size: 12px;
			text-align: center;
			cursor: pointer;
			z-index: 11;
			color: rgba(0,0,0,.5);
			font-weight: 700;
			&:hover {
				color: #000;
			}
			&:after {
				content: '';
				display: block;
				width: 1px;
				height: 9px;
				margin: 2px auto;
				background: rgba(0,0,0,.2);
			}
		}
	}
	.period_picker_years_selector_container {
		position: absolute;
		left: 0;
		top: 0;
		height:30px;
	}
	.period_picker_years_dragger {
		position: absolute;
		top: 0;
		right: 20px;
		width: 70px;
		height: 30px;
		margin-left: -1px;
		font-size: 0;
		line-height: 0;
		z-index: 12;
		cursor: pointer;
		&:after {
			content: '';
			display: block;
			border: 2px solid rgba(0,0,0,.7);
			background: rgba(255,255,255,.4);
			border-radius: 4px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 1px;
			right: -1px;
		}
		&:hover:after{
			border-color: #000;
			background: rgba(255,255,255,.6);
		}
	}
	.period_picker_years_period {
		background: #ffcf00;
		position: absolute;
		right: 100px;
		width: 1px;
		height: 32px;
		font-size: 0;
		line-height: 0;
		z-index: 9;
		display: none;
	}
	.period_picker_first_letters_td,
	.period_picker_first_letters_tr {
		padding: 0 6px;
	}
	table {
		border-spacing: 0;
		border-collapse: separate;
		th, td {
			font-family: Arial,sans-serif;
			font-size: 13px;
			font-weight: 400;
			white-space: nowrap;
			padding: 0;
			text-align: left;
			vertical-align: top;
			border-collapse: collapse;
			&.period_picker_first_letters_td,
			&.period_picker_first_letters_tr {
				padding: 0;
			}
		}
		td.period_picker_selector_week{
			width: 16px;
			padding: 2px 5px 0;
			text-align: center;
		}
	}
	
	.period_picker_days table {
		td {
			vertical-align: top;
		}
		table {
			width: 184px;
			table-layout: fixed;
			border-spacing: 0;
			&.period_picker_first_letters_table th {
				text-align: right;
				font-size: 9px;
				height: 10px;
				line-height: 10px;
				padding: 0;
				color: rgba(0,0,0,.5);
				font-family: Verdana,Arial,sans-serif;
			}
			th {
				width: 23px;
				padding: 0 5px;
				height:25px;
				white-space: nowrap;
			}
			td {
				width: 23px;
				padding: 0 5px;
				height:25px;
				cursor: pointer;
				empty-cells: hide;
				vertical-align: middle;
				&:hover {
					background: #EBEBEB;
					border-radius: 5px;
				}
			}

			td.period_picker_holiday {
				color: @cell-color-holiday;
			}

			th.period_picker_month {
				border: 0;
				font-weight: 700;
				padding: 14px 0 10px 12px;
				text-transform: uppercase;
				&:hover {
					color: rgba(0,0,0,.7);
					cursor: pointer;
				}
			}
			td.period_picker_empty, td.period_picker_empty:hover {
				cursor: default!important;
				background: none!important;
				border-radius: 0;
			}
			
			td.period_picker_gray_period {
				&, &:hover{
					color: #aaa;
				}
			}
		}
		td.period_picker_month12:not(:last-child) {
			position: relative;
			&:after {
				content: '';
				display: block;
				border-right: 2px solid rgba(0,0,0,.1);
				position: absolute;
				top: -16px;
				bottom: 0;
				right: -5px;
			}
		}

        td.period_picker_cell_today {
            background: @cell-background-today;
            color: @cell-color-today;
        }

		td.period_picker_selected{
			background: @cell-background-selected;
			border-radius: 0;
			:hover {
				background-color: @cell-background-selected-hover;
				border-radius: 0;
			}
		}
		td.period_picker_selected_start {
			&, &:hover {
				border-radius: 5px 0 0 0;
			}
		}
		td.period_picker_selected_end {
			&, &:hover {
				border-radius: 0 0 5px 0;
			}
		}
			
	}
	span.period_picker_selector_week_cap {
		visibility: hidden;
	}
	span.period_picker_selector_week,
	span.period_picker_selector_week_cap {
		padding: 0;
		background-color: #ccc;
		display: inline-block;
		width: 2px;
		height: 16px;
	}
	.period_picker_gray_period,
	.period_picker_weekday,
	.period_picker_holiday,
	.period_picker_empty {
		text-align: right;
	}
	.period_picker_month b {
		display: none;
	}
	.period_picker_submit_dates {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		font-size: 13px;
		text-align: center;
		margin: 0 20px 15px;
		background-color: #fff;
		&:before {
			content: '';
			border-top: 1px solid rgba(0,0,0,.1);
			margin: 0px;
			margin-bottom:20px;
			display: block;
		}
		.input_box{
			padding-right: 7px;
			background: #fff;
			box-shadow: inset 0 0 0 1px #cbcbcb;
			position: relative;
			display: block;
			box-sizing: border-box;
			cursor: text;
		}
		.input_focused_yes .input_box {
			box-shadow: inset 0 0 0 1px #d0ba65,0 0 10px #fc0;
		}
		input {
			width: 6.1em;
			&.input_control {
				position: relative;
				z-index: 3;
				width: 100%;
				margin: 0;
				font-size: 100%;
				color: #000;
				-webkit-tap-highlight-color: rgba(0,0,0,0);
				-webkit-appearance: none;
				box-sizing: border-box;
				padding: .4em 0;
				border: 0;
				outline: 0;
				background: 0 0;
				font-family: Arial,sans-serif;
				color: #000;
				padding-left: 7px;
			}
		}
	}
	&.without_bottom_panel{
        min-height: @picker-min-height - @bottom-panel-height;
        padding-bottom: 0px;
        .period_picker_submit_dates{
            display:none;
        }
    }
    &.without_yearsline{
        min-height: @picker-min-height - @yearsline-height;
    }
    &.without_header{
        min-height: @picker-min-height - @header-height;
        .period_picker_head{
            height:10px;
        }
    }

    &.without_header.without_yearsline{
        min-height:  @picker-min-height - @header-height;
    }

    &.without_header.without_bottom_panel{
        min-height:  @picker-min-height - @header-height - @bottom-panel-height;
    }

    &.without_yearsline.without_bottom_panel{
        min-height: @picker-min-height - @yearsline-height - @bottom-panel-height;
    }

    &.without_yearsline.without_header.without_bottom_panel{
        min-height: @picker-min-height - @yearsline-height - @header-height - @bottom-panel-height;
    }

    .period_picker_from_time_block,
	.period_picker_to_time_block,
	.period_picker_from_block,
	.period_picker_to_block  {
		margin-right: 5px;
		width: 81px;
		font-size: 13px;
		line-height: 28px;
		font-family: Arial,sans-serif;
		color: #000;
		position: relative;
		display: inline-block;
		margin-bottom: 5px;
	}
	.period_picker_from_time_block,
	.period_picker_to_time_block{
		width: 60px;
	}

	&.xdsoft_norange .period_picker_from_block ~ span{
		display:none;
	}

	.period_picker_to_time_block,
	.period_picker_to_block {
		margin-right: 0px;
		margin-left: 5px;
	}
	.period_picker_show {
		display: inline-block;
		margin: 0;
		padding: 0;
		user-select: none;
		text-align: center;
		white-space: nowrap;
		outline: 0;
		position: absolute;
		right: 0;
		border-radius: 3px;
		font-family: Arial,sans-serif;
		color: #000;
		line-height: 28px;
		font-size: 13px;
		cursor: pointer;
		border: 0;
		background: 0 0;
		z-index: 3;
        & + .period_picker_show {
            right: 50px;
        }
		&:before {
			position: absolute;
			top: 1px;
			right: 1px;
			bottom: 1px;
			left: 1px;
			padding: 0;
			content: '';
			border-radius: 2px;
			background: #ffdb4d;
			box-shadow: 0 0 0 1px rgba(191,153,0,.8);
		}
		span {
			position: relative;
			padding: 0 13px;
		}
		&:focus {
			box-shadow: 0 0 6px #fc0;
		}
		&:active:before {
			background-color: #fc0;
			box-shadow: 0 0 0 1px rgba(159,127,0,.8);
		}
	}
	.period_picker_work{
		vertical-align:top;
		height: 100%;
		position:relative;
	}
	.period_picker_timepicker_box{
		width:87px;
		display:block;
		top:0px;
		bottom:100px;
		left:0px;
		position:absolute;
		& + .period_picker_days + .period_picker_timepicker_box{
			left:auto;
			right:0px;
		}
	}
	&.with_first_timepicker { 
		.period_picker_days{
			width:calc(~"100% - 87px");
			margin-left:87px;
		}
		&.with_second_timepicker .period_picker_days{
			width:calc(~"100% - 174px");
			margin-left:87px;
		}
	}
	.xdsoft_navigate{
		background:data-uri('left.svg') no-repeat center center;
		position:absolute;
		top:0px;
		left:-13px;
		bottom:100px;
		width:15px;
		opacity:0.7;
		transition:opacity .3s linear;
		&:hover{
			opacity:1.0;
		}
		&:active{
			margin-top:2px;
		}
		&.xdsoft_navigate_next{
			background-image:data-uri('next.svg');
			left:auto;
			right:-15px;
		}
	}
    &.without_bottom_panel{
        .xdsoft_navigate{
            bottom:0px;
        }
    }
}