/* -- CUSTOM PROPERTIES -- */
    :root {
        --headlines: #5b6574;
        --navleftbackground: #333;

        --greenlight: #04AA6D;
        --greendark: #026641;

        --bluelight: #3274d6;
        --bluedark: #435165;

        --greylight:rgb(173, 173, 173)3;
        --greydark: #333333;

        --creme: #dee0e4; /*f2f2f2*/
        --cremelight: #f3f4f7;

        --white: #ffffff;

        --mainmenu: #2f3947;
    }

/* -- BASE -- */
    * {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    }
    body {
        background-color: var(--bluedark);
    }

    html, body {
        background-color: var(--greydark);
        margin: 0;
        padding: 0;
        height: 100%;
        font-size: 16px;
    }

    a {
        text-decoration: none;
    }

    /* -- ICONS -- */
        a i.fa-solid {
            padding-right: 10px;
            width: 30px;
            text-align: center;
        }

/* -- LOGIN PAGE -- */
    .login {
        width: 400px;
        background-color: var(--white);
        box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
        margin: 100px auto;
    }
    .login h1 {
        text-align: center;
        color: var(--headlines);
        font-size: 24px;
        padding: 20px 0 20px 0;
        border-bottom: 1px solid var(--creme);
    }
    .login form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 20px;
    }
        .login form label {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            background-color: var(--bluelight);
            color: var(--white);
        }
        .login form input[type="password"], .login form input[type="text"] {
            width: 310px;
            height: 50px;
            border: 1px solid var(--creme);
            margin-bottom: 20px;
            padding: 0 15px;
        }
        .login form input[type="submit"] {
            width: 100%;
            padding: 15px;
            margin-top: 20px;
            background-color: var(--bluelight);
            border: 0;
            cursor: pointer;
            font-weight: bold;
            color: var(--white);
            transition: background-color 0.2s;
        }
        .login form input[type="submit"]:hover {
        background-color: var(--bluelight);
            transition: background-color 0.2s;
        }

/* -- TOP NAV -- */
    .navbar {
        border-bottom: 2px solid var(--mainmenu);
    }



    .nav_top {
        background-color: #2f3947;
        overflow: hidden;
    }
        .nav_top a {
            float: left;
            color: var(--creme);
            text-align: right;
            padding: 20px 16px;
            text-decoration: none;
            font-size: 18px;
        }
            .nav_top a:hover, .nav_top a.active {
                background-color: var(--greenlight);
                color: var(--white);
            }
            .nav_top a.company, .nav_top a.company:hover {
                padding: 0;
            }

        /* -- PROFILE -- */
            .nav_top a.profile {
                float: right;
                color: var(--white);
                line-height: 80%;
                padding: 18px 16px 18px 16px;
            }
                .nav_top a.profile span.user {
                    font-size: 14px;
                    padding: 0;
                    font-weight: bold;
                }
                .nav_top a.profile span.tenant {
                    font-size: 12px;
                    padding: 0;
                }

        /* -- LOGOUT -- */
            .nav_top a.logout {
                float: right;
                color: var(--white);
                padding: 20px 16px;
            }

        /* -- INFO -- */
            .nav_top a.info {
                float: right;
                color: var(--white);
                padding: 20px 16px;
            }

/* -- CONTENT -- */
    body.loggedin {
        background-color: var(--cremelight);
    }
    .content_all {
        width: 100%;
        margin: 0;
        min-height: 100%; /* Mindesthöhe für moderne Browser */
        height: auto !important; /* Important Regel für moderne Browser */
        height: 100%; /* Mindesthöhe für den IE */
        overflow: hidden !important; /* FF Scroll-leiste */
    } 

    /* -- NAV LEFT -- */
        .nav_module {
            width: 7%;
            margin:0;
            background: var(--navleftbackground);
            float: left;
            height: 100%; /* Full height */
            position: fixed; /* Make it stick, even on scroll */
            overflow: auto; /* Enable scrolling if the sidenav has too much content */
        }
            .nav_module ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            .nav_module ul li {
                width: 100%;
                display: inline-block;
            }
            .nav_module a {
                float: left;
                width: 100%;
                text-align: left;
                color: var(--creme);
                padding: 10px 16px;
                text-decoration: none;
                font-size: 14px;
            }
            .nav_module a:hover {
                background-color: var(--greenlight);
                color: var(--white);
            }
            .nav_module a.active {
                background-color: var(--greendark);
                color: var(--white);
            }

        /* -- NAV LEFT -- BOTTOM -- */
            .nav_module ul.nav_left_bottom {
                position: fixed;
                bottom: 0;
                width: 7%;
            }

    /* -- CONTENT -- */
        .content {
            width: 89%;
            margin: 0 2% 0 9%;
            float: left;
        }
            .content h2 {
                margin: 0;
                padding: 25px 0;
                font-size: 22px;
                border-bottom: 1px solid #e0e0e3;
                color: var(--headlines);
            }
            .content > p, .content > div:not(.alert) {
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
                margin: 25px 0;
                padding: 25px;
                background-color: var(--white);
            }
            .content > p, .content > div.alert {
                margin: 25px 0 0 0;
            }
            .content > p table td, .content > div table td {
                padding: 5px;
            }
            .content > p table td:first-child, .content > div table td:first-child {
                font-weight: bold;
                color: var(--headlines);
                padding-right: 15px;
            }
            .content > div p {
                padding: 5px;
                margin: 0 0 10px 0;
            }

        /* -- TABLE -- */
            /* -- DEFINED STYLES -- */
                .content > p table td:first-child, .content > div table td:first-child {
                    font-weight: normal;
                }

            /* -- TABLE DEFINITION -- */
                .content thead {
                    border-bottom: 1px solid var(--headlines);
                }
                .content tfoot {
                    border-top: 1px solid var(--headlines);
                }

                /* -- TABLE MITGLIEDER -- */
                    .content table.mitglieder tbody tr:nth-child(odd) {
                        background-color: var(--cremelight);
                    }
                    .content table.mitglieder tbody tr:nth-child(even) {
                        background-color: var(--white);
                    }

        /* -- DIV -- */
            .content div.modules_list {
                float: left;
                width: 24%;
                border: 1px solid var(--headlines);
                padding: 1%;
                margin: 0 1% 1% 0;
            }
            .content div.non_available_module {
                color: var(--headlines);
            }
            .content div.available_module {
                color: var(--greenlight);
                border: 1px solid var(--greendark);
                font-weight: bold;
            }
                .content div.available_module a {
                    color: var(--greenlight);
                    text-decoration: none;
                }

        /* -- DEFINITION -- */
            .subtext {
                color: var(--greylight);
            }