// Zurmo is a customer relationship management program developed by
// Zurmo, Inc. Copyright (C) 2017 Zurmo Inc.
//
// Zurmo is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License version 3 as published by the
// Free Software Foundation with the addition of the following permission added
// to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
// IN WHICH THE COPYRIGHT IS OWNED BY ZURMO, ZURMO DISCLAIMS THE WARRANTY
// OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
//
// Zurmo is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
// FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along with
// this program; if not, see http://www.gnu.org/licenses or write to the Free
// Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA.
//
// You can contact Zurmo, Inc. with a mailing address at 27 North Wacker Drive
// Suite 370 Chicago, IL 60606. or at email address contact@zurmo.com.
//
// The interactive user interfaces in original and modified versions
// of this program must display Appropriate Legal Notices, as required under
// Section 5 of the GNU Affero General Public License version 3.
//
// In accordance with Section 7(b) of the GNU Affero General Public License version 3,
// these Appropriate Legal Notices must retain the display of the Zurmo
// logo and Zurmo copyright notice. If the display of the logo is not reasonably
// feasible for technical reasons, the Appropriate Legal Notices must display the words
// "Copyright Zurmo Inc. 2017. All rights reserved".

.ui-datepicker{
	z-index:10000;
	&.ui-datepicker-inline{
		margin:15px;
		display: table !important;
	}
	.ui-datepicker-header{
		display: table;
		height:36px;
		width: 100%;
		color:@themeColor;
		font-weight:bold;
		a:hover:before,
		a:hover:after{
			color: @themeColor2;
		}
	}
	.ui-datepicker-prev{
		float:left;
		width:15%;
		line-height: 35px;
		padding-left:10px;
		text-align:left;
		cursor:pointer;
		span{
			visibility:hidden;
		}
		&:before{
			content:"◀";
		}
		&:hover{
			cursor:pointer !important;
		}
	}
	.ui-datepicker-next{
		float:right;
		width:15%;
		line-height: 35px;
		text-align:right;
		cursor:pointer;
		position: relative;
		span{
			visibility:hidden;
			display: none;
		}
		&:before{
			content:"▶";
			margin-right: 10px;
		}
		:hover{
			cursor:pointer !important;
		}
	}
	.ui-datepicker-title{
		float:left;
		text-align:center;
		width:70%;
		line-height: 35px;
		font-size:14px;
		font-weight:bold;
		color:@themeColor;
	}
	.ui-datepicker-calendar{
		width:100%;
		border-spacing: 0;
		//border-collapse: collapse;
		table-layout: fixed;
		border:1px solid #ddd;
		border-top:none;
		th{
			&:last-child{
				border-right:none;
				//border-right:1px solid #ddd;
			}
		}
		td{
			min-width:30px;
			height:30px;
			border-color: #ddd;
			border-style: solid;
			border-width: 1px 1px 0 0;
			border-top:1px solid #ddd !important;
			&.ui-datepicker-other-month{
				span{
					color:#B3B3B3;
				}
			}
			&.ui-datepicker-today{
				background-image:none !important;
				background:lighten(@themeColor, 50%) !important;
			}
			&:hover{
				background-image:none;
				//background:#f5f5f5 url("@{path}datepicker-sprite-ie.png") left bottom repeat-x !important;
			}
			&:last-child{
				border-right:none;
				//border-right:1px solid #ddd;
			}
		}
		a{
			font-size:9px;
			font-weight:bold;
			color:#656565;
			vertical-align:top;
			display:inline-block;
			width:100%;
			text-indent:5px;
			padding-top:3px;
			cursor:pointer;
		}
		span{
			width:30px;
			height:20px;
			display:block;
			text-align:center;
			color:#656565;
			font-weight:bold;
			font-size:9px;
			text-transform:uppercase;
			line-height: 20px;
			cursor:pointer;
		}
	}
	.ui-datepicker-buttonpane{
		float: left;
		width: 100%;
		border-top:1px solid #fff;
		padding:5px 0;
		.clearfix();
	}
	.ui-datepicker-current,
	.ui-datepicker-close{
		.secondary-button();
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color:#666;
		border: none !important;
		.z-label{
			border-top:   1px solid rgba(200, 200, 200, 0.4);
			border-left:  1px solid rgba(185, 185, 185, 0.4);
			border-right: 1px solid rgba(185, 185, 185, 0.4);
			border-bottom:1px solid rgba(170, 170, 170, 0.4);
		}
	}
	.ui-datepicker-current{
		float:left;
		margin:0 10px;
	}
	.ui-datepicker-close{
		float:right;
		margin:0 10px;
	}
	.ui-timepicker-div{
		float: left;
		padding:10px 5px 0 5px;
		border-bottom:1px solid #ddd;
		line-height: 1;
		dt{
			float: left;
			width: 30%;
			height: auto !important;
			font-weight:bold;
			.t-shadow( rgba( 255, 255, 255, 0.8 ) 0 1px 0 );
		}
		dd{
			margin: 0 0 0 0 !important;
			float: left;
			width: 70%;
			height: 25px;
		}
		select{
			position: relative;
			top: -4px;
			width: 100%;
		}
	}
	.ui-slider{
		background:#111 url("@{path}datepicker-header.png") left top repeat-x !important;
		height:4px;
		.radius(2px) !important;
		position: relative;
		top:4px;
	}
	.ui-slider-handle{
		background:#fff;
		border:1px solid #BBB;
		height:10px;
		width:10px;
		display:block;
		position:absolute;
		top:-4px;
		.radius(2px) !important;
	}
	.calendar-events-1,
	.calendar-events-2,
	.calendar-events-3,
	.calendar-events-4,
	.calendar-events-5,
	.calendar-events-6{
		span{
			color: @themeColor !important;
			position:relative !important;
			float:left;
			width:100%;
			word-wrap:break-word;
			padding: 0 !important;
			text-align:left !important;
			font-size: 46px;
			letter-spacing: -6px;
			vertical-align: top;
			&:before{
				position:absolute;
				top:-1px;
				line-height: 10px;
			}
		}
	}
	.calendar-events-1 span:before{
		content:"‧";
	}
	.calendar-events-2 span:before{
		content:"‧‧";
	}
	.calendar-events-3 span:before{
		content:"‧‧‧";
	}
	.calendar-events-4 span:before{
		content:"‧‧‧\202F‧";
	}
	.calendar-events-5 span:before{
		content:"‧‧‧\202F‧‧";
	}
	.calendar-events-6 span:before{
		content:"‧‧‧\202F‧‧‧";
	}
	.ui_tpicker_second,
	.ui_tpicker_millisec,
	.ui_tpicker_microsec{
		display: none;
	}
}

.juiportlet-widget-content,
#ui-datepicker-div{
	.ui-datepicker{
		#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
		.b-shadow( 0 0 5px 0 rgba(0, 0, 0, 0.3) );
	}
	.ui-datepicker-header{
		background:#111 url("@{path}datepicker-header.png") left top repeat-x !important;
		color:#FFF;
	}
	.ui-datepicker-calendar{
		background:#fff;
		border-color: #BBB;
		th{
			background:#f5f5f5 url("@{path}datepicker-sprite-ie.png") left -37px repeat-x !important;
			&:last-child{
				border-color:#bbb;
			}
		}
		td{
			border-color: #bbb;
			border-top:1px solid #bbb !important;
			background:#f5f5f5 url("@{path}datepicker-sprite-ie.png") left top repeat-x !important;
			&.ui-datepicker-other-month{
				background-image:none;
				background:#f5f5f5 url("@{path}datepicker-sprite-ie.png") left bottom repeat-x !important;
			}
			&.ui-datepicker-today{
				background-image:none !important;
				background:lighten(@themeColor, 50%) !important;
			}
			&:hover{
				background-image:none;
				background:#f5f5f5 url("@{path}datepicker-sprite-ie.png") left bottom repeat-x !important;
			}
			&:last-child{
				border-right:none;
				//border-right:1px solid #BBB;
			}
		}
		a, span{
			color:#656565;
			.t-shadow( rgba( 255, 255, 255, 0.8 ) 0 1px 0 );
		}
	}
	.ui-datepicker-title{
		color:#DFDFDF;
		.t-shadow( #000 0 1px 0 );
	}
	.ui-timepicker-div{
		width: 100%;
		border-bottom:1px solid #bbb;
	}
}

#ui-datepicker-div{
	z-index: 9999 !important;
	max-width: 250px;
	#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
	.b-shadow( 0 0 5px 0 rgba(0, 0, 0, 0.3) );
}