/*---------------- calendar ----------------*/ 
#calendar								{ margin-bottom:10px; position:relative; 
	.header-block						{ margin:6px 0; overflow:hidden; 
		.month-current					{ float:left; font-size:28px; 
			.cmonth						{ font-weight:bold; }
		}
		.month-selector					{ float:right; display:inline-flex; margin-top:8px; 
			.month-action				{ display:inline-block; cursor:pointer; border:1px solid #bbb; border-radius:5px; height:21px; 
				svg						{ width:15px; height:15px; margin:3px 4px; fill:#595959; }
				&#month_today			{ padding:0 12px; color:#444; }
			}
			.trigger					{ cursor:pointer; display:inline-block; width:35px; height:23px; background:url(/modules/calendar/media/datepicker.svg) no-repeat right top; margin-right:5px; }
		}
	}
	.days								{ width:100%; border-collapse:collapse; empty-cells:show; clear:both; border-bottom:1px solid #bbb; table-layout:fixed; 
		.weekdays td					{ height:auto; font-weight:normal; font-size:14px; text-align:right; border-top:1px hidden #fff; border-left:1px hidden #fff; border-right:1px hidden #fff; padding-top:10px; }
		td								{ width:14.286%; vertical-align:top; 
			&.weekend-days				{ color:#888; }
			&.weekend					{ background-color:#f5f5f5; }
		}
		.day-wrapper					{ padding:2px 2px 0; margin-bottom:5px; min-height:80px; 
			.day-top					{ border-top:1px solid #bbb; 
				&.week					{ border-color:#FECECE; border-width:4px; 
					&.today				{ border-color:#B45959; }
				}
			}
			.day-num					{ font-size:14px; text-align:right; margin:5px 0; }
		}
		.not-in-month .day-num			{ font-weight:normal; color:#bbb; }
		.today							{ background-color:#fff5f5; 
			.day-num					{ color:#B45959; }
		}
		.event							{ cursor:pointer; overflow:hidden; 
			.event-title-bullet			{ font-size:24px; vertical-align:middle; line-height:5px; }
			.event-title				{ font-size:0.8em; }
			.event-time					{ font-size:0.7em; color:#b7b7b7; float:right; width:30px; text-align:right; padding-top:2px; }
			&.day-only .event-title		{ float:left; max-width:calc(100% - 32px); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
			&.day-span					{ position:absolute; 
				.event					{ padding:0; }
				.event-title-bullet		{ display:none; }
				.event-title			{ margin-left:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
			}
			&.no-time .event-title		{ max-width:100%; }
			&.no-time .event-time		{ display:none; }
		}
		.event-spacer					{ font-size:1em; margin-bottom:0.2em; }
	}
	.legend-container					{ margin-top:20px; font-size:12px; width:14.3%; 
		.legend							{ padding:5px; margin:1px; }
		.legend-title-bullet			{ font-size:24px; vertical-align:middle; line-height:5px; }
	}
	.qtip-default						{ min-width:300px !important; }
	.qtip-titlebar						{ font-size:18px; font-weight:bold !important; }
	#btn-month							{ margin-right:5px;}
	&.month								{ 
		#btn-month						{ background-color:#444; }
		.day-desc						{ display:none; }
		.event-time-pre					{ display:none; }
	}
	&.agenda							{ 
		#btn-agenda						{ background-color:#444; }
		.days							{ 
			tbody, tr, td				{ display:block; width:100%; }
			.weekdays, .day-num, .no-events, .event-time, .no-time .event-time-pre
										{ display:none; }
			td.weekend					{ background-color:inherit; }
			.day-desc					{ font-weight:bold; }
			.event-time-pre				{ display:inline-block; width:50px; }
			.event.day-only .event-title{ float:none; max-width:100%; overflow:auto; font-size:inherit; }
		}
	}
}

/*---------------- calendar-event-tip ----------------*/ 
.calendar-event-tip						{ font-size:1em; min-width:250px; 
	div									{ padding:5px 0; }
	.event-title						{ font-size:1.4em; }
	.event-maps							{ float:right; 
		img								{ margin:5px 0 0 5px; }
	}
	.event-url, .event-description, .event-attachment-title
										{ border-top:1px solid #ebebeb; }
	.event-location						{ border-bottom:1px solid #ebebeb; min-height:30px; }
	.event-time							{ }
	.event-attachment a					{ color:red; }
}

/*---------------- responsive calendar ----------------*/ 
@media print, screen and (max-width:780px)
										{ 
	#calendar							{ 
		.days							{ 
			.event						{ 
				.event-time				{ display:none; }
				&.day-only .event-title	{ max-width:100%; }
			}
		}
	}
}