.calendar {
	height: 100%;
	display: flex;
}

.clockbar {
	/* This is relative for the .clock */
	position: relative;
	height: calc(100% - 50px - 10px);
	width: 2.5em;
}

.sideclock {
	/* border-right: 2px solid gray; */
	z-index: 1;
	height: 100%;
	padding: 0;
}

.sideclock .meta {
	border-bottom: 2px solid transparent;
}

.sideclock .day {
	border: 1px transparent;
	min-width: 0;
}

.days .meta {
	border-bottom: 2px solid gray;
}

.days {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
}

.events {
	position: relative;
	width: 100%;
	height: calc(100% - 50px);
}

/*
 * This makes the borders of the object be part of the size.
 * Making placing it on the correct line much simpler.
 */
.clock, .event {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	display: block;
}

.clock {
	color: gray;
	border-top: 1px dotted gray;
}

.sideclock .clock {
	border: none;
}

.clocktext {
	z-index: 1;
	text-align: right;
}

.day {
	position: relative;

	height: 99%;
	width: 100%;
	min-width: 300px;

	margin-left: 0.5em;
	border: 1px solid black;

	scroll-snap-align: start;
}

.day .clock {
	width: calc(100% + 0.5em);
}

.meta {
	height: 50px;
	width: 100%;

}

.meta .dayname {
	font-size: 2em;
}

.event {
	width: 100%;

	border: 2px solid black;
	font-size: 8pt;

	overflow: hidden;

	z-index: 0;
}

.event.continuing {
	border-bottom: none;
	background-image: linear-gradient(to top, #0007 0%,#FFF0 4em);
}

.event.continued {
	border-top: none;
	background-image: linear-gradient(to bottom, #FFF7 0%,#FFF0 6em);
}

.event.continued.continuing {
	border-top: none;
	border-top: none;
	background-image:
		linear-gradient(to bottom,
			#FFF7  0%, #FFF0 10%,
			#FFF0 90%, #0007 100%);
}

.selected {
	width: 100% !important;
	left: 0 !important;
	z-index: 1 !important;

	margin-top: 3mm;
	margin-left: 3mm;
}

.clock-0  { top: calc(100%/24 *  0); }
.clock-2  { top: calc(100%/24 *  2); }
.clock-4  { top: calc(100%/24 *  4); }
.clock-6  { top: calc(100%/24 *  6); }
.clock-8  { top: calc(100%/24 *  8); }
.clock-10 { top: calc(100%/24 * 10); }
.clock-12 { top: calc(100%/24 * 12); }
.clock-14 { top: calc(100%/24 * 14); }
.clock-16 { top: calc(100%/24 * 16); }
.clock-18 { top: calc(100%/24 * 18); }
.clock-20 { top: calc(100%/24 * 20); }
.clock-22 { top: calc(100%/24 * 22); }
.clock-24 { top: calc(100%/24 * 24); }