.ics-calendar {
	clear: both;
	display: block;
	margin: 1.5em 0;
}
.ics-calendar:first-child { margin-top: 0; }

	.ics-calendar .phone_only { display: none; }

	.ics-calendar-error { font-style: italic; }

	.ics-calendar.current_week_only tbody tr { display: none; }
	.ics-calendar.current_week_only tbody tr.current-week { display: table-row; }

	.ics-calendar .events {
		overflow: visible;
	}

		.ics-calendar .events .time {
			cursor: help;
		}
		.ics-calendar .events .time .show_on_hover {
			display: inline-block;
			font-size: 90%;
			font-weight: normal;
			visibility: hidden;
		}
		.ics-calendar .events .time:hover .show_on_hover { visibility: visible; }
		.ics-calendar.hide_times .events .time { display: none !important; }

		.ics-calendar .events .title.has_desc, .ics-calendar .events .eventdesc[title] { cursor: help; }
	
		.ics-calendar .event {
			position: relative;
			z-index: 1;
		}
		.ics-calendar .event:hover {
			z-index: 2;
		}
		
			/* Source:  https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ */
			.ics-calendar .event * {
				-ms-word-break: break-all;
				word-break: break-all;
				word-break: break-word;
				-webkit-hyphens: auto;
				-moz-hyphens: auto;
				-ms-hyphens: auto;
				hyphens: auto;
			}

			.ics-calendar .event .descloc {
				display: block;
				font-size: 85%;
				font-weight: normal;
				line-height: 1.4em;
			}

			.ics-calendar.r34ics_toggle .event .descloc {
				display: none;
			}
	
			.ics-calendar.r34ics_toggle .event.open .descloc {
				display: block;
			}
			
			.ics-calendar .event .descloc .organizer_email {
				background: transparent url('icon-mail.svg') left center no-repeat;
				background-size: 10px 10px;
				display: block;
				padding-left: 14px;
			}
	
	.ics-calendar-title { }
	
	.ics-calendar-description { }
	
	.ics-calendar-select {
		float: right;
		font-size: 80%;
		margin-right: 0;
		max-width: 200px;
		min-width: 200px;
		width: 200px;
	}
	
	.ics-calendar-list-wrapper { }

		.ics-calendar-list-wrapper .events .sublabel {
			display: block;
			font-size: 75%;
			font-weight: normal;
			line-height: 1.4em;
		}
		
	.ics-calendar-month-wrapper { }
	
		.ics-calendar-label { }
		
		.ics-calendar-month-grid {
			border-collapse: collapse;
			line-height: 1.4em;
			table-layout: fixed;
			width: 100%;
		}
		
			.ics-calendar-month-grid th, .ics-calendar-month-grid td {
				border: 1px solid rgb(187,187,187);
				border-top: 0;
				font-size: 70%;
				overflow: visible;
				padding: 0;
				position: relative;
				text-align: left;
				vertical-align: top;
				width: 14.2857%;
				z-index: 1;
			}
			.ics-calendar-month-grid th:hover, .ics-calendar-month-grid td:hover {
				z-index: 2;
			}
			
			.ics-calendar-month-grid th {
				background: rgb(171,171,171);
				padding: 0.5em 0.8em 0.2em 0.8em;
				text-align: center;
				text-transform: uppercase;
			}
			
			.ics-calendar-month-grid .off {
				background: rgb(246,246,246);
				color: rgb(153,153,153) !important;
			}
			
			.ics-calendar-month-grid .day {
				background: rgb(226,226,226);
				font-weight: bold;
				padding: 0.2em 0.8em;
			}
						
			.ics-calendar-month-grid .past {
				background: rgb(250,250,250);
				opacity: 0.75;
			}
			
			.ics-calendar-month-grid .today .day {
				background: rgb(102,102,102);
				color: rgb(255,255,255);
			}
			
			.ics-calendar-month-grid ul.events {
				list-style: none;
				margin: 0;
				min-height: 6em;
				padding: 0;
			}
			
				.ics-calendar-month-grid ul.events li {
					border-bottom: 1px solid rgb(226,226,226);
					margin: 0;
					padding: 0.4em 0.8em;
				}
				.ics-calendar-month-grid ul.events li.all-day {
					background: rgb(245,245,245);
					border-bottom: none;
					font-weight: bold;
					padding: 0.4em 0.8em;
				}
				.ics-calendar-month-grid ul.events > li:last-of-type { border-bottom: 0; }
				
					.ics-calendar-month-grid .events .all-day-indicator {
						display: block;
						font-size: 80%;
						font-weight: normal;
						line-height: 1.4em;
						text-transform: uppercase;
					}
			
					.ics-calendar-month-grid .events .time {
						display: block;
						font-size: 90%;
						font-weight: bold;
						line-height: 1.4em;
					}
				
					.ics-calendar-month-grid .events .title {
						display: block;
						line-height: 1.4em;
					}
				
					.ics-calendar-month-grid .events .sublabel {
						display: block;
						font-size: 60%;
						font-weight: normal;
						line-height: 1.4em;
						text-transform: uppercase;
					}

	.ics-calendar-week-wrapper { }

	.ics-calendar-color-key {
		clear: both;
		display: inline-block;
		font-size: 85%;
		margin: 1.5em 0;
		width: auto;
	}
	
		.ics-calendar-color-key-item {
			padding: 0.1em 0.5em;
		}


/* Non-phone breakpoint */
@media screen and (min-width: 783px) {

	.ics-calendar .event .hover_block {
		background: rgb(255,255,255);
		border: 1px solid rgb(187,187,187);
		box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
		display: none;
		max-width: 400px;
		min-width: 240px;
		padding: 0.4em 0.6em;
		position: absolute; top: calc(100% - 0.4em); left: 3em;
		width: 50%;
	}
	.ics-calendar td:last-child:not(:first-child) .event .hover_block {
		left: 3em;
	}
	.ics-calendar td:last-child:not(:first-child) .event .hover_block {
		right: 3em; left: auto;
	}
	.ics-calendar .event .has_desc:hover + .hover_block, .ics-calendar .event .hover_block:hover {
		display: block !important;
	}

}


/* Phone breakpoint */
@media screen and (max-width: 782px) {

	body:not(#tinymce) .ics-calendar:not(.nomobile) .no_phone { display: none !important; }
	body:not(#tinymce) .ics-calendar.nomobile .no_phone { display: inherit !important; }
	body:not(#tinymce) .ics-calendar:not(.nomobile) .phone_only { display: inherit !important; }

	.ics-calendar-select {
		float: none;
		margin-bottom: 1em;
		width: 100%;
	}
	
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid { margin-bottom: 3em; }

	.ics-calendar:not(.nomobile) .ics-calendar-month-grid,
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid tbody,
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid tr,
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid th,
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid td
	{
		border: none;
		display: block;
		font-size: 100%;
		width: 100%;
	}
	
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid thead,
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .off,
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .past,
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .empty
	{ display: none; }

	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .day {
		padding: 0.5em 0.8em;
	}

	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .day * { display: inline-block !important; }
	
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid ul.events { min-height: 0; }

	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .events .all-day-indicator { font-size: 75%; }

	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .events .time { font-size: 100%; }

	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .events .title { font-size: 100%; }

	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .events .sublabel { font-size: 75%; }
	
	/* Don't show day-of-week in grid if .nomobile is on! */
	.ics-calendar.nomobile .ics-calendar-month-grid .events .day > .phone_only { display: none; }

}