/* Author: Jonas Remmert
 * Written for: ScIP - GEFR
 */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border-collapse: collapse;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	scroll-behavior: smooth;
	user-select: none;
}

body {
	overflow: hidden;
	background-color: #EBEBEB;
}

:root
{
	--heading_top_height: 40px;
    --pageFadeInTime: 0.45s;
    --boxshadow_forFadedPages: none;/*-7px 0 7px -7px dimgrey; OR -2px 0 2px -2px dimgrey;*/
    --themeColor: #1874CD;
}

/* <a> Tags (Links) anpassen: */
a, a:hover, a:active, a:visited, a:focus
{
    text-decoration: none;
    color: var(--themeColor);
}
/* -ENDE- Links anpassen */

/* Einstellungen für die PC-Ansicht: */
.hideScrollbars
{
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.hideScrollbars::-webkit-scrollbar
{
    width: 0 !important;
}

.page_main .pcNavigation
{
    display: none;
    position: fixed;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

    .page_main .pcNavigation svg
    {
        cursor: pointer;
    }

    .page_main .pcNavigation svg:first-child
    {
        position: relative;
        left: 40px;
    }

    .page_main .pcNavigation svg:last-child
    {
        position: absolute;
        right: 0;
        transform: rotate(180deg);
    }
/* -ENDE- PC-Ansicht */

/* Allgemeingültige Buttons: */
.button
{
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    background-color: whitesmoke;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    padding: 5px;
    color: black;
    transition-duration: 0.3s;
    box-shadow: 0px 0px 10px 0px darkgrey;
    text-transform: uppercase;
}
.button:disabled
{
    border-style: dashed;
    background-color: darkgrey;
    text-decoration: line-through;
    color: dimgrey;
    cursor: not-allowed;
    box-shadow: none;
}
.button:disabled:hover
{
    background-color: darkgrey !important;
    color: dimgrey !important;
}

.bRed
{
    border-color: darkred;
}
.bRed:hover
{
    background-color: #D90000;
    color: white;
}

.bGreen
{
    border-color: darkgreen;
}
.bGreen:hover
{
    background-color: #00B000;
    color: white;
}
/* -ENDE- Buttons */

/* Slider (Allgemein) */
input:checked+.slider 
{
	background-color: darkgreen;
}
input:checked+.slider::before 
{
	-webkit-transform: translateX(14px);
	-ms-transform: translateX(14px);
	transform: translateX(14px);
}

/* Für neutrales aussehen: */
input:not([checked="true"])+.slider.neutral
{
    background-color: #EEA7A7;
}
input:checked+.slider.neutral
{
    background-color: #6B4B4B;
}

.sliderContainer 
{
	position: relative;
	display: inline-block;
	width: 29px;
	height: 15px;
	vertical-align: middle;
	cursor: pointer;
}

    .sliderContainer input 
    {
        display: none;
    }

    .slider 
    {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #B22222;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        border-radius: 3px;
    }

        .slider::before 
        {
            position: absolute;
            content: "";
            height: 7px;
            width: 7px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }
/* -ENDE- Slider */

/* Zurückpfeil (Allgemein): */
.arrowBack {
	position: fixed;
    top: calc(18px + var(--heading_top_height));
	margin-left: 5px;
	padding-right: 5px;
	z-index: 1;
}
.arrowBack img {
    width: 31px;
    padding: 2px 4px 2px 0;
    box-shadow: 0px 0px 10px 0px grey;
    background-color: navajowhite;
    opacity: 0.9;
    cursor: pointer;
}
/* -ENDE- Zurückpfeil */

/* Überschrift: */
.heading_top
{
	background-color: var(--themeColor);
	color: white;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--heading_top_height);
	line-height: var(--heading_top_height);
	font-size: 1.3em;
	text-align: center;
	font-weight: bold;
	z-index: 10;
}

	/* Button, zum ausklappen der Seitennavigation (SVG): */
	.heading_top svg
	{
		filter: invert(1);
		position: absolute;
		transform: translateY(-50%);
		top: calc(50% + 1px);
		left: 5px;
		border-radius: 6px;
		cursor: pointer;
		z-index: 10;
	}
    /* -ENDE- SVG */
    
    /* Offline-Symbol: */
    .heading_top img.offlineImg
    {
        display: none;
        position: absolute;
        width: 35px;
        height: 35px;
        transform: translateY(-50%);
        top: 50%;
        right: 10px;
        cursor: pointer;
    }

    .heading_top .runAnimation
    {
        animation: 4s cubic-bezier(0.68, -0.55, 0.27, 1.55) alertAnimation;
    }

    @keyframes alertAnimation {
        from {
            top: 50%;
            right: 10px;
            width: 35px;
            height: 35px;
        }

        50% {
            top: 170%;
            right: 50px;
            width: 90px;
            height: 90px;
        }

        to {
            top: 50%;
            right: 10px;
            width: 35px;
            height: 35px;
        }
    }
    /* -ENDE- Offline Symbol */

/* -ENDE- Überschrift */

/* ------------------------------------------------------------------------ */

/* Hauptteil der Seite: */
.page_main
{
	width: 100%;
}

    /* Zuletzt-Aktualisiert-Anzeige am unteren Ende der Seite: */
    #pageMain_lastUpdatedContainer
    {
        position: absolute;
        right: 0;
        bottom: 0;
        writing-mode: vertical-rl;
        transform: translate(0) rotate(180deg);
        margin: 6px;
        font-size: 80%;
        color: dimgray;
        letter-spacing: 0.3px;
        cursor: pointer;
    }

        #pageMain_lastUpdatedContainer img
        {
            transform: rotate(90deg);
            width: 2.5em;
            height: auto;
        }
    /* -ENDE- Zuletzt-Aktualisiert-Anzeige */

	/* Tabelle für die Stundenziffern und das Kalendericon oben links: */
	.page_main .mainTableLessonDIV
	{
		position: absolute;
		z-index: 1;
		top: calc((var(--heading_top_height) * 2) - 5px);
		height: calc(100% - (var(--heading_top_height) * 2) + 5px);
		overflow: hidden;
		scroll-behavior: initial;
	}
	/* Scrollbar für diesen DIV ausblenden: */
	.page_main .mainTableLessonDIV::-webkit-scrollbar
	{
		width: 0 !important;
	}
	.page_main .mainTableLessonDIV
	{
		overflow: -moz-scrollbars-none;
		scrollbar-width: none;
	}
	/* -ENDE- Scrollbars ausblenden */

		.page_main .mainTableLessonDIV #mainTable_calendar
		{
			position: fixed;
			top: var(--heading_top_height);
			transform: translateX(-50%);
			left: 20px;
			background-color: #C4C4C4;
			width: 41.5px;
			height: calc(var(--heading_top_height) - 4px);
			border-width: 1px 1px 1px 0;
			border-style: solid;
			border-color: grey;
		}

		.page_main .mainTableLessonDIV #mainTable_calendar img
		{
			height: 35px;
			width: 35px;
			left: 50%;
			position: relative;
			transform: translateX(calc(-50% + 0.5px));
			cursor: pointer;
		}

		.page_main .mainTableLessonDIV .lessonNumbersContent table tbody tr td
		{
			color: #313131;
			background-color: #C4C4C4; /* Oder: #ddd */
			height: 65px;
			width: 40px;
			text-align: center;
			border: 1px solid grey;
            border-left: none;
            font-size: 0.95em;
        }

            .page_main .mainTableLessonDIV .lessonNumbersContent table tbody tr td div
            {
                position: relative;
                height: 64px;
            }
        
                .page_main .mainTableLessonDIV .lessonNumbersContent table tbody tr td div .lessonStart
                {
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    font-size: 65%;
                    color: dimgrey;
                }

                .page_main .mainTableLessonDIV .lessonNumbersContent table tbody tr td div .lessonNumber
                {
                    position: absolute;
                    transform: translate(-50%, -50%);
                    top: 50%;
                    left: 50%;
                }

                .page_main .mainTableLessonDIV .lessonNumbersContent table tbody tr td div .lessonEnd
                {
                    position: absolute;
                    bottom: 3px;
                    right: 3px;
                    font-size: 65%;
                    color: dimgrey;
                }
	/* -ENDE- Linke Tabelle */

	/* Haupttabelle für die Informationen und ganz links die Seitenleiste: */
	.page_main .actualLessonDIV
	{
		position: absolute;
		display: none;
		margin-top: calc(var(--heading_top_height) - 5px);
		top: 0;
		left: calc(100% + 40px);
		width: calc(100% - 40px);
		height: 2px;
		background-color: #1874CD;/* #CC8918 */
		transition-duration: 0.25s;
	}
		.page_main .actualLessonDIV .triangle
		{
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 0 5px 10px;
			border-color: transparent transparent transparent #1874CD;
			transform: translate(-4px, -4px);
			position: relative;
			z-index: 2;
        }

	.page_main .mainTableDIV
	{
		position: absolute;
		top: var(--heading_top_height);
		left: 0;
		width: 100%;
		height: calc(100% - var(--heading_top_height));
		overflow: auto;
		background-color: transparent;
		scroll-snap-type: x mandatory; /* Sorgt dafür, dass beim scrollen auf der x-Achse das Fenster bei den Tabellen "einrastet". */
	}

	.page_main .mainTableDIV table
	{
		position: absolute;
		width: calc(100% - 40px);
		height: auto;
		scroll-snap-align: end; /* Markiert den Punkt, an dem die Tabelle einrasten soll. */
		scroll-snap-stop: always; /* Sagt, dass man nicht einfach eine Tabelle überspringen kann, sondern bei jeder anhält. */
	}

		/* Tabellenüberschrift: */
		.page_main .mainTableDIV table thead th
		{
			color: #313131;
			background-color: #C4C4C4;
			height: calc(var(--heading_top_height) - 5px);
			border: 1px solid grey;
			text-align: center;
            font-weight: bold;
            font-size: 0.95em;
            max-height: 100% !important;
		}
		.page_main .mainTableDIV table thead th:first-child
		{
			border-left: none;
		}
		.page_main .mainTableDIV table thead th:last-child
		{
			border-right: none;
        }
        
        .page_main .mainTableDIV table thead th div span:last-child
        {
            float: right;
            font-size: 85%;
            color: #5E6569;
            padding-right: 2px;
        }
		/* -ENDE- Überschrift */

		/* Haupttabelle: */
		.page_main .mainTableDIV table tbody tr
		{
			height: 65px;
		}

		.page_main .mainTableDIV table tbody td
		{
			color: grey;
			height: 65px;
			width: unset;
			text-align: center;
            border: 1px solid grey;
            white-space: nowrap;
            position: relative;
            max-width: calc((100vw - 40px) / 5); /* Sorgt dafür, dass der <td> nicht zu groß wird. */
            overflow: hidden;
        }

        .page_main .mainTableDIV table .weekView_td
        {
            width: calc((100vw - 40px) / 5);
        }
        .page_main .mainTableDIV table .dayView_td
        {
            width: calc(100vw - 40px);
        }

		.page_main .mainTableDIV table tbody td:first-child
		{
			border-left: none;
		}
		.page_main .mainTableDIV table tbody td:last-child
		{
			border-right: none;
        }
        
            /* Banner auf der linken Seite der Tabelle: */
            .page_main .mainTableDIV .banner
            {
                position: absolute;
                width: 40px;
                height: 100vh;
                background-color: #CC372D;
                color: white;
                font-size: 1.5em;
                line-height: 2;
                text-align: center;
                border-top: 1px solid grey;
            }

                .page_main .mainTableDIV .banner div
                {
                    margin-top: 40px;
                }

                    .page_main .mainTableDIV .banner div span:first-child
                    {
                        display: inline-block;
                        transform: rotate(180deg);
                    }
            /* -ENDE- Banner */
        /* -ENDE- Haupttabelle */

    .page_main .mainTableDIV .borrowDIV
    {
        width: calc(100% - 6px);
        height: 55px;
        margin: 1px;
        font-size: 11px;
        text-align: left;
        color: white;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }

        .page_main .mainTableDIV .borrowDIV .innerElements
        {
            vertical-align: middle;
        }

            .page_main .mainTableDIV .borrowDIV .innerElements .innerSpans
            {
                display: flex;
                margin: 2px;
                white-space: nowrap;
            }

    /* DIV, der in den Tabellenzellen anzeigt, wenn nicht alle Buchungen angezeigt werden können (smallBox): */
    .page_main .mainTableDIV .smallBox
    {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #1874CD;
        color: white;
        padding: 1px 2px 1px 2px;
        font-size: 85%;
        opacity: 0.85;
    }

    /* -ENDE- Übersicht DIV */
	/* -ENDE- Haupttabelle */

/* -ENDE- Hauptteil */