.root {
	display: flex;
	margin: 0;
	max-width: 100%;
	height: 100%;
}

.small-calendar {
	text-align: right;
	border-collapse: collapse;
}

.small-calendar thead {
	border-bottom: 1px solid black;
}

.small-calendar .prev,
.small-calendar .next {
	color: grey;
}

.small-calendar td {
	padding: 5px;
}

.small-calendar td:nth-child(7).cur {
	color: red;
}

.text-day {
	border-left: 2px solid black;
	border-top: 2px solid black;
	padding-left: 2px;
	margin-top: 1em;
}

.text-day header h2 {
	width: 100%;
	text-align: center;
	font-size: 14pt;
}

.sideinfo {
	width: 20em;
	height: 100%;
}

.sideinfo .about {
	display: flex;
	justify-content: center;
	height: 20%;
}

.sideinfo .eventlist {
	overflow: scroll;
	max-height: 80%;
}

.sideinfo .eventlist article {
	border-bottom: 1px solid black;
	margin-top: 1em;
	border-left-style: solid;
	border-left-width: 6px;
	padding-left: 2px;
}

.sideinfo .eventlist main {
	white-space: pre-line;
	font-size: 10pt;
}

.sideinfo .eventlist h3 {
	font-size: 12pt;
	border-bottom: 1px solid gray;
	margin-bottom: 0;
	font-weight: 300;
}

.hidelink {
	color: inherit;
	text-decoration: none;
}

.calendar {
	height: 100%;
	max-width: calc(100% - 20em);
	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%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.meta .dayname {
	position: absolute;
	left: 5;
	top: 2;
	color: grey;
}

.meta .daydate {
	font-size: 200%;
}

.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); border-width: 2px; }
.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); border-width: 2px; }
.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); }