div.single-event {
	margin: 0;
	border: none;
	border-bottom:1px solid var(--light-border-color);
	box-shadow: none;
	background-color: none;
}
div.single-event > .hinweise {
	display: none;
}
div.single-event.selected {
	margin: -1px -4px; 
	padding: 0 3px; 
	border: 1px solid rgba(0,0,0,0.1);
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
	background-color: var(--sidebar-background-color);
x	background-color: #fff;
}
div.single-event.selected > .hinweise {
	display: flex;
}

div.lfdi-flex-container.header {
	font-weight: bold;
	background-color:var(--sidebar-background-color);
	border-bottom:1px solid var(--light-border-color);
}
div.lfdi-flex-container > .header {
	padding: 5px 0 3px;
}
div.lfdi-flex-container.row {
}
div.display-lub {
	width: 16px;
}
div.display-stand {
	width: 8em;
}
div.display-stand .ampel,
div.hinweise .ampel {
	width: 9px;
	aspect-ratio: 1 / 1;
}
div.display-stand .stand {
	display: inline-block;
	width: 1.5em;
	text-align: right;
}
div.display-titel {
	width: 25%;
	font-weight: bold;
}
div.display-id {
	width: 10%;
	min-width: 6em;
	text-align: center;
}
div.display-datum {
	width: 10%;
	min-width: 6em;
}
div.display-datum.partial {
	width: 10%;
	min-width: 8em;
}
div.display-anmeldeschluss {
	width: 10%;
	min-width: 6.5em;
	text-align: center;
}
div.display-ort {
	width: 10%;
}
div.display-zielgruppe {
	width: 25%;
}
div.display-zielgruppe.partial {
	width: 15%;
}
div.lfdi-flex-container.hinweise {
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
div.lfdi-flex-container.hinweise > div {
	width: 25%;
}


:root {
	--background-color: rgba(64,64,32,.05);
	--lfdi-ds-color: #0f70b7;
	--paper-color: #ffffff;

	--color-base: 64,64,64; /* rgba(64,64,64,1) = #404040 */
	--backdrop-color: rgba(var(--color-base),.1);
	--light-border-color: rgba(var(--color-base),.2);
	--medium-border-color: rgba(var(--color-base),.4);
	--button-color: var(--banner-color);
	--border-color: rgba(var(--color-base),.6);
	--banner-color: rgba(var(--color-base),.775);
	--text-color: rgba(var(--color-base),1);

x	--box-shadow: none;
	--box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
	--single-day-width: 28px;
	--single-day-height: 36px;
	--single-day-padding: 4px;
}

x* {
	font-family: "Open Sans";
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
xbody {
	width: 100vw;
	background-color: var(--background-color);
	color: var(--text-color);
	cursor: default;
}
a.day-anchor {
	font-weight: bold;
	text-decoration: none !important;
	color: var(--text-color) !important;
}
xh1 {
	margin: 1em 0 .5em;
}
xh2 {
	margin: .75em 0 .25em;
}
xp {
	margin-bottom: .5em;
}

x.page {
	width: 90vw;
	margin: 0 5%;
	border: 1px solid;
	border-color: transparent var(--light-border-color);
	background-color: var(--paper-color);
	padding: 1.5em 3em;
}

.calendar-container {
	margin: .5em 1.5em 1em 2em;
x	border: 1px solid var(--medium-border-color);
	padding: 0 .5em .75em;
x	box-shadow: var(--box-shadow);
	background-color: var(--paper-color);
	float: right;


	font-family: "Open Sans";
	padding: 0;
	margin: 0;
	box-sizing: border-box;

}

.calendar {
	width: max-content;
	width: 278px;
	padding: 0 5px;
	overflow: visible;
}

.calendar-header {
	align-items: center;
	text-align: center;
	font-size: 109%;
	font-weight: bold;
	padding: 5px 0 10px;
}

.calendar-title {
	margin: 0;
	width: 100%;
	text-align: center;
	font-size: 180%;
	font-weight: 900;
}

.month-year {
	width: 100%;
	height: calc(.707 * var(--single-day-height));
	display: grid;
	grid-template-columns: calc(100% - 5.7em) 1.2em 1.1em 1.1em 1.1em 1.2em;
	column-gap: 0;
}

.shift-container {
	text-align: center;
}
.shift-container a {
	color: var(--text-color) !important	;
}

.shifter {
	display: inline-block;
	width: 100%;
	width: 100%;
	height: 100%;
	margin: 1.5px 0 -1.5px;
	line-height: 1;
	color: var(--button-color);
	font-size: 119%;
	font-weight: normal;
	cursor: pointer;
	overflow: hidden;
}

#this-month {
	line-height: 1.25;
}

#month-year {
	padding: 0 .3em;
	text-align: left;
}

#month-year-display {
	letter-spacing: -1px;
	white-space: nowrap;
	overflow: visible;
}

#month-display {
}

#year-display {
}

.calendar-body {
}

.calendar-week-days {
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	width: 100%;
	padding: 4px 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	font-weight: bold;
}

.calendar-week-days div {
	place-items: center;
	padding: 0;
	text-align: center;
	font-size: 91.7%;
}

.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px 12px;
	overflow: visible;
}

.calendar-days div {
	width: var(--single-day-width);
	height: var(--single-day-height);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px var(--single-day-padding) 3px;
	font-size: 91.7%;
	position: relative;
	cursor: default;
	overflow: visible;
}

.calendar-days div.current-date,
.calendar-days div.current-date > a {
	text-align: center;
	letter-spacing: -1px;
}
.calendar-days div.current-date div {
	text-align: left;
	letter-spacing: 0;
}
.calendar-days #TGIF,
.calendar-days #TGIF > a {
	letter-spacing: -.9px;
}
.calendar-days #TGIF div.tgif-display {
	padding: 0 0 10px;
	line-height: .95;
	font-size: 70.7%;
	font-weight: normal;
	white-space: nowrap;
	overflow: visible;
	cursor: pointer;
}
.calendar-days #TGIF div > div {
	letter-spacing: 0;
}

.calendar-days div div.day-events {
	width: calc(12 * var(--single-day-width));
	max-width: 95vw;
	height: auto;
	border: 1px solid var(--medium-border-color);
	padding: 0 0 5px;
	background-color: var(--paper-color);
	text-align: left;
	color: rgba(64, 64, 64, 1);
	font-size: 109%;
	font-weight: normal;
	box-shadow: var(--box-shadow);
	position: absolute;
	z-index: 10;
	top: 42px;
	left: calc(-6 * var(--single-day-width) + 0.5 * var(--single-day-width));		/* @media */
	display: none;
}

.calendar-days div div.day-events::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;												/* @media */
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--border-color) transparent;
}

.calendar-days div div.day-events div {
	width: 100%;
	height: auto;
	padding: 0 5px;
	display: block;
}

.calendar-days div div.day-events div.events-header {
	width: 100%;
	margin: 0;
	padding: 10px 0 9px;
	font-size: 100%;
	color: var(--banner-color);
	text-align: center;
	font-weight: 900;
}

.calendar-days div div.day-events div.events-body {
	height: auto;
	padding: 0 2.5% 5px;
}

.calendar-days div div.day-events div div.events-type {
	margin-top: 7.5px;
	color: var(--banner-color);
}

.calendar-days div div.day-events div div.events-title {
	margin: 5px 0 7.5px;
	font-size: 100%;
	font-weight: bold;
}

.calendar-days div div.day-events div div.events-list {
	margin-left: 1.75em;
	width: calc(100% - 1.75em);
	text-indent: -.8em;
	padding-bottom: 5px;
}

.calendar-days div div.day-events div div.events-list .events-status-icon {
	display: inline-block;
	margin: .05em .55em -.05em -.65em;
	padding: 5.5px;
	background-image: none;
	background-position: center center;
	background-size: 11px;
	background-repeat: no-repeat;
}

.calendar-days div div.day-events div div.events-list span.genericons-neue {
	width: .7em;
	font-size: 109%;
	color: var(--border-color);
}

.calendar-days div div.day-events div div.events-list span.genericons-neue.genericons-neue-link {
	vertical-align: -2.5px;
}

.calendar-days div div.day-events hr {
	margin: 0 25% 12px;
	border: 0;
	border-top: 1px solid var(--medium-border-color);
}

.calendar-days div div.day-events hr.events-divider {
	margin: 3px 2.5% 13px;
	border-top: 1px solid var(--light-border-color);
}

.day-anchor {
	width: calc(100% + 2 * var(--single-day-padding));
	margin: 0 calc(0px - var(--single-day-padding)) 0;
	display: inline-block;
	background-color: rgba(255,255,255,0);
	padding: 5px 0;
	text-align: center;
	color: var(--text-color);
	cursor: pointer;
	font-weight: 900;
}

.events-list .genericon {
	padding-right: 7px;
	vertical-align: -3px;
}
/* Media */
@media only screen and (max-width: 570px) {
	.calendar-container {
		width: calc(1em + 82px + 7 * var(--single-day-width));
		margin: 1.5em calc(50% - .5 * ( 1em + 82px + 7 * var(--single-day-width)));
		float: none;
	}

	.calendar-days div.w0 div.day-events {
		left: calc(-21px - 0.5 * var(--single-day-width));
		
	}
	.calendar-days div.w1 div.day-events {
		left: calc(-21px - 12px - 1.5 * var(--single-day-width));
	}
	.calendar-days div.w2 div.day-events {
		left: calc(-21px - 2 * 12px - 2.5 * var(--single-day-width));
	}
	.calendar-days div.w3 div.day-events {
		left: calc(-21px - 3 * 12px - 3.5 * var(--single-day-width));
	}
	.calendar-days div.w4 div.day-events {
		left: calc(-21px - 4 * 12px - 4.5 * var(--single-day-width));
	}
	.calendar-days div.w5 div.day-events {
		left: calc(-21px - 5 * 12px - 5.5 * var(--single-day-width));
	}
	.calendar-days div.w6 div.day-events {
		left: calc(-21px - 6 * 12px - 6.5 * var(--single-day-width));
	}

	.calendar-days div.w0 div.day-events::before {
	  left: 12.4%;
	}
	.calendar-days div.w1 div.day-events::before {
	  left: 24.9%;
	}
	.calendar-days div.w2 div.day-events::before {
	  left: 37.4%;
	}
	.calendar-days div.w3 div.day-events::before {
	  left: 49.9%;
	}
	.calendar-days div.w4 div.day-events::before {
	  left: 62.4%;
	 }
	.calendar-days div.w5 div.day-events::before {
	  left: 74.9%;
	}
	.calendar-days div.w6 div.day-events::before {
	  left: 87.4%;
	}
}	

/* Fonts */
@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Regular.ttf");
	font-weight: normal;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Semibold.ttf");
	font-weight: bold;
}
@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Bold.ttf");
	font-weight: 900;
}