:root
{
	--sidenavWidth: 240px;
	--darkDIV_width: calc(100% - var(--sidenavWidth));
	--sidenav_transitionDuration: 0.5s;
	--sidenav_headline_transitionDuration: 0.4s;
}

.sidenav
{
	position: absolute;
	width: var(--sidenavWidth);
	height: 100%;
	top: 0;
	left: calc(-1 * var(--sidenavWidth));
	transition-duration: var(--sidenav_transitionDuration);
	background-color: whitesmoke;
	z-index: 11;
	display: inline-block;
	overflow-y: auto;
}

	/* Dunkler Hintergrund (rechts neben der Seitennavigation): */
	.sidenav .dark
	{
		position: fixed;
		width: var(--darkDIV_width);
		height: 100%;
		right: calc(-1 * var(--darkDIV_width));
		top: 0;
		background-color: black;
		opacity: 0.5;
		transition-duration: var(--sidenav_transitionDuration);
	}
    /* -ENDE- Hintergrund */

	/* Überschrift: */
	.sidenav .headline
	{
		background-color: #e14338; /* Alt: #4bad33; */
		padding: 15px 15px;
		transition-duration: var(--sidenav_headline_transitionDuration);
		overflow: hidden;
	}

	/* Begrüßung: */
	.sidenav .headline h1
	{
		color: white;
		font-size: 1.6em;
		max-width: calc(100% - 25px);
		max-height: 1.6em;
		overflow: hidden;
	}

	/* Kreuz, um die Seitennavigation zu schließen: */
	.sidenav .closeBtn
	{
		position: absolute;
		transform: translateY(-50%);
		top: 32px;
		right: 22.5px;
		cursor: pointer;
	}
	.sidenav .closeBtn svg
	{
		stroke: #613117;
		stroke-width: 2.5;
		fill: none;
	}

	/* <span>-Element, das die Kalenderwoche anzeigt: */
	.sidenav .headline .calendarWeek
	{
		margin-top: 15px;
		font-size: 1.2em;
		color: white;
	}

		/* Benutzereinstellungen: */
		.sidenav .headline .userSettings
		{
			margin-top: 15px;
			color: white;
		}

			/* Container, in dem der Inhalt steht: */
			.sidenav .headline .userSettings .settingsContainer .settingsHeadline
			{
				cursor: pointer;
				width: calc(100% + 15px);
                position: relative;
			}

            .sidenav .headline .userSettings .settingsContainer img.logo
            {
                width: 40px;
                height: 40px;
                position: absolute;
                transform: translateY(-50%);
                top: 50%;
            }

            .sidenav .headline .userSettings .settingsContainer .userInfo
            {
                display: inline;
                left: 45px;
                position: relative;
            }

			#sidenav_userSettings_userName
			{
				font-weight: bold;
				font-size: 95%;
			}

			.sidenav .headline .userSettings .settingsContainer .settingsHeadline .schoolName
			{
				font-size: 90%;
			}

			.sidenav .headline .userSettings .settingsContainer .arrowDown
			{
				position: absolute;
				right: 20px;
				padding: 5px;
				transform: translate(5px, -15px);
				transition-duration: var(--sidenav_headline_transitionDuration);
			}

				/* Untermenü, das sich aufklappt, wenn man auf den Container (oben) klickt: */
				.sidenav .headline .userSettings .settingsContainer .submenu
				{
					display: none;
					padding: 7px 10px 5px 4px;
				}

				.sidenav .headline .userSettings .settingsContainer .submenu li
				{
					margin: 10px 5px 10px 20px;
				}
				.sidenav .headline .userSettings .settingsContainer .submenu li:last-child
				{
					margin-bottom: 0;
				}

				.sidenav .headline .userSettings .settingsContainer .submenu a
				{
					color: white;
				}
				/* -ENDE- Untermenü */
			/* -ENDE- Inhaltscontainer */
		/* -ENDE- Benutzereinstellungen */
	/* -ENDE- Überschrift */

	/* INHALT: */
	.sidenav .content
	{
		margin-top: 0;
	}

		/* Überschriften: */
		.sidenav .content .headlineSmall
		{
			display: inline-block;
			width: 100%;
			height: 35px;
			border-top: 0.5px solid #696969;
			padding: 12px 0 10px 5px;
			color: grey;
			font-size: 90%;
		}

		/* DIV's unter den Unterüberschriften: */
		.sidenav .content .headlineContent
		{
			color: darkgreen;
			padding: 8px 5px 10px 10px;
		}

			/* Inhalt der einzelnen Blöcke (<a> Elemente): */
			.sidenav .content .headlineContent a
			{
				cursor: pointer;
				padding: 8px 8px 8px 4px;
				display: inline-block;
                color: darkgreen;
                vertical-align: middle;
            }

            /* Gesperrte (disabled) Einstellungen (z.B. ist die "Tagesansicht" / "Wochenansicht" gesperrt, wenn der Benutzer nicht auf der Haupttabelle ist): */
            .sidenav .content .headlineContent .disabled
            {
                cursor: default;
                text-decoration: line-through;
                color: grey;
            }
            /* -ENDE- Gesperrte Einstellungen */
            
        /* Icons vor den Buttons */
        .sidenav .content .icons
        {
            width: 25px;
            vertical-align: middle;
        }

	/* -ENDE- Inhalt */

	/* Fußzeile: */
	.sidenav .footer
	{
		border-top: 0.5px solid #696969;
		padding: 25px 0 10px 0;
		text-align: center;
		font-size: 0.8em;
		color: #696969;
	}
	/* -ENDE- Fußzeile */