.fullcalendar(@light,@normal,@dark) {

	// The header
	.fc-header-title h2 {
		font-size: 1.5em;
		color: @app-neutral-color-dark;
		cursor: default;
	}
	.fc-button {
		background-color: @normal;
		border-width: 0;
		background-image: none;
		padding: 0 0.5em;
		color: @app-neutral-color-white;
	}
	.fc-text-arrow {
		margin: 0;
	}
	.fc-button.fc-state-disabled {
		opacity: 1;
		background-color: transparent;
		color: @app-neutral-color-dark;
	}
	.fc-button.fc-state-default {
		border-radius: 0;
		text-shadow: none;
	}
	.fc-button + .fc-button {
		border-left: 1px solid @light;
	}

	// The events table
	.fc-content {
		background-color: @app-neutral-color-white;
		color: @app-neutral-color-dark;
		font-size: 0.8em;
	}
	.fc-state-highlight {
		background-color: @light;
	}

	// Single event in events table

	.fc-ltr .fc-event-hori.fc-event-end,
	.fc-rtl .fc-event-hori.fc-event-start,
	.fc-ltr .fc-event-hori.fc-event-start,
	.fc-rtl .fc-event-hori.fc-event-end {
		border-radius: 0;
		background-color: @normal;
		border-color: @normal;
		cursor: pointer;
	}

	// selected days for event creation
	.fc-cell-overlay {
		background-color: @normal;
	}

	/* ##### Small calendar ####### */
	.small-calendar {
			width: 225px;

		.fc-header {
			background-color: @normal;
			margin-bottom: 5px;
		}
		.fc-header .fc-button {
			background-color: @dark;
		}
		.fc-header > * {
			line-height: 0;
		}
		.fc-header .fc-header-title h2 {
			font-size: 1.2em;
			line-height: 1.5em;
			margin-bottom: 0;
			color: @app-neutral-color-white;
		}

		table.fc-border-separate {
			// gap between TDs does not really work.
			// border-spacing: 2px;
		}

		.fc-day,
		.fc-day-header {
		  border-spacing: 10px;
		  border-collapse: separate;
			// hack to set TD width
			// min-width: 30px;
			// max-width: 30px;
			height: 20px;
		}

		.fc-day-number,
		.fc-day-header {
			line-height: 1.8em;
		}
		.fc-day:hover {
			background-color: @light;
		}

		.fc-day-header,
		.fc-border-separate tr.fc-last th,
		.fc-border-separate tr.fc-last td,
		.fc-border-separate tr.fc-last th,
		.fc-border-separate tr.fc-last td {
			border-width: 0;
		}

		.fc-day {
			border: 1px solid @app-neutral-color-light;
		}
		.fc-day.selected {
			background-color: @normal;
			color: @app-neutral-color-white;
		}

		.fc-border-separate tbody tr.fc-first td,
		.fc-border-separate tr.fc-last td {
			border-width: 1px;
		}

		.fc-day.fc-other-month:hover {
		border-color: transparent;
		}
		.fc-other-month .fc-day-number {
			color: transparent;
		}
		.fc-border-separate tbody .fc-day.fc-other-month {
			border-width: 0;
		}
	}

	.modal .modal-sm .small-calendar {
		width: 100%;
	}


	// ##### Date picker popup widget #######

	.pickDateButton .pickDateBox {
		width: 200px;
		height: 200px;
		background-color: red;
	}
}

.app-main {
	.fullcalendar(@app-main-color-light,@app-main-color,@app-main-color-dark);
}
.app-calendar {
	.fullcalendar(@app-calendar-color-light,@app-calendar-color,@app-calendar-color-dark);
}
.app-files {
	.fullcalendar(@app-files-color-light,@app-files-color,@app-files-color-dark);
}
.app-documents {
	.fullcalendar(@app-documents-color-light,@app-documents-color,@app-documents-color-dark);
}
.app-poll {
	.fullcalendar(@app-poll-color-light,@app-poll-color,@app-poll-color-dark);
}
.app-marketplace {
	.fullcalendar(@app-marketplace-color-light,@app-marketplace-color,@app-marketplace-color-dark);
}
.app-todos {
	.fullcalendar(@app-todos-color-light,@app-todos-color,@app-todos-color-dark);
}
.app-etherpad {
	.fullcalendar(@app-etherpad-color-light,@app-etherpad-color,@app-etherpad-color-dark);
}
