
$calendar-tab-height: 30px;

.zarafa-calendar-container {
	position: absolute;
}

.zarafa-calendar-verticalline
{
	position: absolute;
	overfow: hidden;
	background-color: black;
}

.zarafa-calendar-column
{
	position: absolute;
}

/* Calendar borders */
.zarafa-calendar-border-left
{
	position: absolute;
	overflow: hidden;
	border-left: 1px solid;
}

.zarafa-calendar-border-right
{
	position: absolute;
	overflow: hidden;
	border-right: 1px solid;
}

.zarafa-calendar-border-top
{
	position: absolute;
	overflow: hidden;
	border-right: 1px solid;
	border-left: 1px solid;
	border-top: 1px solid;
}

.zarafa-calendar-border-bottom
{
	position: absolute;
	overflow: hidden;
	border-right: 1px solid;
	border-left: 1px solid;
	border-bottom: 1px solid;
}

/* Quick appointment CSS, drag and type */
.zarafa-calendar-textedit-body,
.zarafa-calendar-textedit-header
{
	border: 1px solid #000000;
	position : absolute;
	z-index : 999;
	overflow: hidden;
	resize: none;
}

/* the tabs of the calendars */
.zarafa-calendar-container-tabarea {
	position: absolute;

	.zarafa-calendar-tab-contents {
		cursor: pointer;
		height: $calendar-tab-height;
		line-height: $calendar-tab-height;
		float: left;
		margin-right: $padding-medium;
		padding: 0 $padding-large;
		position: relative;
		min-width: 84px;

		.zarafa-calendar-tab-title {
			position: relative;
			overflow : hidden;
			white-space:nowrap;
			color: white;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}

		/* cross icon is 7x7 px */
		.zarafa-calendar-tab-icon-close {
			position: relative;
			padding-left: $padding-medium;
			padding-right: $padding-medium;
			width: 7px;
			height: $calendar-tab-height;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}

		/* arrow_left_l icon is 5x9 px */
		.zarafa-calendar-tab-icon-merge {
			position: relative;
			padding-left: $padding-medium;
			padding-right: $padding-medium;
			width: 5px;
			height: $calendar-tab-height;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}

		/* arrow_right_l icon is 5x9 px */
		.zarafa-calendar-tab-icon-separate {
			position: relative;
			padding-left: $padding-medium;
			padding-right: $padding-medium;
			width: 5px;
			height: $calendar-tab-height;
			/* the float is needed because safari lowers the title otherwise (and I have no idea why)*/
			float: left;
		}
	}
	.zarafa-calendar-tab-contents.zarafa-with-merge-icon {
		padding-left: $padding-large - $padding-medium;
	}
	.zarafa-calendar-tab-contents.zarafa-with-close-icon,
	.zarafa-calendar-tab-contents.zarafa-with-separate-icon {
		padding-right: $padding-large - $padding-medium;
	}
	.zarafa-calendar-tab-contents.zarafa-with-close-icon.zarafa-with-separate-icon {
		.zarafa-calendar-tab-icon-close {
			padding-right: $padding-medium/2;
		}
		.zarafa-calendar-tab-icon-separate {
			padding-left: $padding-medium/2;
		}
	}

	.zarafa-calendar-tab-contents.light-background {
		.zarafa-calendar-tab-title {
			color: black;
		}
	}
}

/* We use elements inside canvas elements to pass some styling from the css files to the canvas*/
.zarafa-styling-element {
	position: absolute;
	top: -10000px;
	left: -10000px;
	visibility: hidden;
}

/* The headers of the calendars */
.zarafa-calendar-container-header {
	.zarafa-canvas-header-background {
		/* a styling element that we can use to set some styles of the header */
		.zarafa-styling-element {
			/* Note: although we can set the color here, it is not the css that sets the color but the javascript that will read this value
			 * and use it for the text it draws on the canvas
			 */
			color: white;
			/* the height value defines the height of the header */
			height: 30px;
			/* this is the padding that the js will use for the days in the header */
			padding-left: $padding-large;
			padding-right: $padding-medium;
		}
		.zarafa-styling-element.light-background {
			color: black;
		}

		/* a styling element that we can use to set some styles of the active header (current day) */
		.zarafa-styling-element-active,
		.zarafa-styling-element-current-day {
			position: absolute;
			top: -10000px;
			left: -10000px;
			visibility: hidden;
			/* Note: although we can set the color here, it is not the css that sets the color but the javascript that will read this value
			 * and use it for the text it draws on the canvas
			 */
			color: white;
			/* This is the color that the js will use as the background and border color of the current day */
			background-color: $green;
		}
	}
}

/* Timestrip */
.zarafa-calendar-timestrip-element div {
	color: $dark-grey;
	padding-right: 22px;
}

/* Margin between checkbox and calendar icon in hieracy */
.zarafa-hierachy-node-cb {
	margin-right: 6px;
}

/*
 * Appointment Dialog (HTML & Canvas)
*/
.zarafa-calendar-appointment-label-none
{
	background-color: transparent;
}

.zarafa-calendar-appointment-label-important
{
	background-color: #E98784;
}

.zarafa-calendar-appointment-label-work
{
	background-color: #8CA9D9;
}

.zarafa-calendar-appointment-label-personal
{
	background-color: #C0D98C;
}

.zarafa-calendar-appointment-label-holiday
{
	background-color: #DFCB47;
}

.zarafa-calendar-appointment-label-required
{
	background-color: #D9C18C;
}

.zarafa-calendar-appointment-label-travel-required
{
	background-color: #8CC6D9;
}

.zarafa-calendar-appointment-label-prepare-required
{
	background-color: #8C8CD9;
}

.zarafa-calendar-appointment-label-birthday
{
	background-color: #C48CD9;
}

.zarafa-calendar-appointment-label-special-date
{
	background-color: #D9928C;
}

.zarafa-calendar-appointment-label-phone-interview
{
	background-color: #9BD98C;
}

/*
 * Calendar timestrip (HTML & Canvas)
 */
.zarafa-calendar-timestrip
{
	position: absolute;
	background-color : #9fbf00;
	background-color: #f7f3f7;
	overflow : hidden;
	border-left: 1px solid black;
}

.zarafa-calendar-timestrip-element
{
	position: absolute;
	color: #393839;
	text-align:right;
}

.zarafa-calendar-timestrip-element div
{
	padding-top:4px;
	padding-right:6px;
}

.zarafa-calendar-timestrip-line
{
	overflow: hidden;
	position: absolute;
	background-color: $grey;
	margin-left: 2*$padding-extra-large;
}

.k-calendar-timestrip-indicator-icon
{
	height: 12px;
	width: 12px;
	left: 6px;
	position: absolute;
}

.k-calendar-timestrip-indicator-line
{
	height:1px;
	position:absolute;
	background-color: #e40023;
	overflow: hidden;
	left: 24px;
}

/*
 * Canvas Calendar
 */
.zarafa-canvas
{
	position : absolute;
}

/* Currently selected tab */
.zarafa-calendar-tabarea .zarafa-calendar-tab-selected .zarafa-calendar-tab-title
{
	font-weight:bold;
}

.zarafa-calendar-scrollable
{
    position: absolute;
    overflow-y : scroll;
    overflow-x : hidden;
}

.zarafa-calendar-header
{
	position: absolute;
}

.zarafa-calendar-bottomarea
{
	position: absolute;
}

/* Drag & Drop */

/* Calendar drag selection (selecting an new appointment) */
.zarafa-calendar-selection-dragging
{
	background-color : #7f7f7f;
}

.zarafa-calendar-selection
{
	overflow : hidden;
	position : absolute;
	cursor : move;
	z-index : 999;
	opacity:.5;
}

.zarafa-calendar-dragproxy-time {
	padding: $padding-small + 2px 0 0 $padding-small;
}

.zarafa-calendar-tabarea-stroke {
	border-top: $padding-medium solid $white;
	position: relative;
}

.zarafa-calendar-tabarea-stroke.zarafa-calendar-tab-selected {
	border-top-color: $action-bgcolor;
}
