body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
}

header {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    padding: 10px;
    text-align: center;
    justify-content: center;
    background-color: #333;
    color: white;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 8vh;
    position: sticky;
    #welcometext{
        top: 1.25vh;
        position: fixed;
    }
    #logout {
        text-align: center;
        padding: 0px;
        top: 2vh;
        right: 100px;
        position: fixed;
        width: 30px;
        height: auto;
        .btn-teriträr{
            background-color: #333;
            color: white;
            padding: 12px 28px;
        }
        .btn-teriträr:hover{
            background-color: #4b4b4b;
            color: white;
        }
    }
    #tohub {
        text-align: center;
        padding: 0px;
        top: 2vh;
        left: 100px;
        position: fixed;
        width: 30px;
        height: auto;
        .btn-teriträr{
            background-color: #333;
            color: white;
            padding: 12px 28px;
        }
        .btn-teriträr:hover{
            background-color: #4b4b4b;
            color: white;
        }
    }
}


main{
    top: 10%;
    min-height: 100%;
    position: relative;
    text-align: center;
    overflow: hidden;
}

footer {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: visible;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    text-align: center;
    background-color: #333;
    color: white;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    height: 4vh;
    position: fixed;
    a{
        color: white;
    }
    a:visited{
        color: white;
    }
}


.flex-container {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: space-between;
    background-image: url("../images/background/panoischgl.jpg");
    background-repeat: no-repeat;
    background-size: 100%, auto;
    .form-container{
        display: none;
    }
    #functions{
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 14.5vh);
        padding: 1.5vh;
        background-color: #8b8b8b;
        .btn-quarter{
            margin-top: 2vh;
            padding: 20px 40px;
            background-color: #4b4b4b;
            color: white;
            width: 350px;
        }
        .btn-quarter:hover{
            border: 3px solid black;
        }
    }
    #reg-bahn, #reg-nutzer, #del-bahn, #del-nutzer{
        direction: ltr;
        display: flex;
        flex-direction: column;
        background-color: #8b8b8b;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 14.5vh);
        justify-items: center;
        padding: 1.5vh;
        font-size: clamp(17px, 0.7vw, 26px);
        .bahn-form, .reg-form{
            justify-items: center;
            input, button{
                border: 3px solid #333;
                margin: 0.25vh;
                text-align: center;
                width: 30vh;
                padding: 1vh 2vh;
            }
            select{
                border: 3px solid #333;
                margin: 0.3vh;
                text-align: center;
                width: 35vh;
                padding: 1vh 2vh;
            }
            .btn-bahn-submit, .btn-reg-submit{
                margin-top: 1vh;
                input, button{
                    text-align: center;
                    width: 15vh;
                    padding: 1vh 2vh;
                }
            }
            .check-bahn{
                width: 35vh;
                text-align: center;
                padding: 3vh;
                input[type="checkbox"]{
                    justify-content: center;
                    text-align: center;
                    max-width: 4vh;
                    height: 4vh;
                    appearance: none;
                    -webkit-appearance: none;
                    background-image: url("../images/icons/cross.png");
                    background-repeat: no-repeat;
                    background-size: 100%, auto;
                    background-position: center;
                    border: hidden;
                }
                input[type="checkbox"]:checked{
                    background-image: url("../images/icons/check.png");
                }
            }
        }
        .error{
            text-align: center;
            color: rgb(255, 46, 46);
            background-color: #333;
            border: 3px solid gray;
            max-width: 35vh;
            position: sticky;
        }
        .success {
            text-align: center;
            color: green;
            font-size: clamp(17px, 0.7vw, 26px);
            text-size-adjust: 10px;
            position: sticky;
        }
    }
}

.container{
    background-image: url("../images/background/skiweltbahn.JPG");
    background-repeat: no-repeat;
    background-size: 100%, auto;
    #loginbody{
        display: flex;
        min-height: 100vh;
        margin: 0;
        flex-direction: column;
        text-align: center;
        justify-content: space-around;
        position: sticky;
        .form-group{
            h1{
                text-align: left;
                margin-left: 38%;
                color: rgb(0, 0, 0);
                font-size: 75px;
            }
            input[name="email"]{
                padding: 12px calc(125vh - 50%);
                margin: 8px 0;
                box-sizing: border-box;
                border: 2px solid black;
                background-image: url('../images/icons/email.png');
                background-position: 5px, 5px;
                background-size: 25px, auto;
                background-repeat: no-repeat;
                padding-left: 40px
            }
            input[name="password"]{
                padding: 12px calc(125vh - 50%);
                margin: 8px 0;
                box-sizing: border-box;
                border: 2px solid black;
                background-image: url('../images/icons/lock.png');
                background-position: 5px, 5px;
                background-size: 25px, auto;
                background-repeat: no-repeat;
                padding-left: 40px
            }
            input[name="email"]:focus{
                border: 5px solid rgb(178, 201, 212);
            }
            input[name="password"]:focus{
                border: 5px solid rgb(178, 201, 212);
            }
            .form-group-button{
                display: flex;
                justify-content: space-around;
                text-align: center;
                margin-left: 30%;
                margin-right: 30%;  
                .btn-primary{
                    background-color: white;
                    color: #333;
                    padding: 12px 28px;
                }
                .btn-primary:hover, .btn-primary:focus{
                    background-color: #333;
                    color: white;
                }
            }
            .error{
                text-align: center;
                color: red;
                font-size: 1.2em;
                text-size-adjust: 10px;
                font-weight: 300;
                position: sticky;
            }
        }
    }
   /* #regbody {
        min-height: 100vh;
        margin: 0;
        flex-direction: column;
        text-align: center;
        justify-content: space-around;
        display: flex;
        position: sticky;
        background-color: #333;
        h1{
            color: white;
            font-size: 75px;
        }
        input[type="text"], input[type="email"], input[type="password"], input[type="confirm_password"]{
            width: 25%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 5px solid rgb(178, 201, 212);
        }
        .form-group-button{
            display: flex;
            justify-content: space-around;
            text-align: center;
            margin-left: 40%;
            margin-right: 40%;
            .btn-primary{
                background-color: white;
                color: #333;
                padding: 12px 28px;
            }
            .btn-primary:hover, .btn-primary:focus{
                background-color: #333;
                color: white;
            }
        }
        .error{
            text-align: center;
            background-color: #333;
            color: red;
            font-size: 15px;
            text-size-adjust: 10px;
            position: sticky;
        }
        .success {
            text-align: center;
            background-color: #333;
            color: green;
            font-size: 15px;
            text-size-adjust: 10px;
            position: sticky;
        }
    }*/
}

#welcome {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content:center;
    align-items: center;
    color: white;
    text-align: center;
    font-size: 200%;
    font-size: clamp(25px, 1vw, 45px);
    background-image: url("../images/background/skiweltbahn.JPG");
    background-repeat: no-repeat;
    background-size: 100%, auto;
}

.seilbahn{
    overflow: hidden;
    background-color: #a1e2f8;
    main{
        display: flex;
        justify-content: space-between;
        .gondel{
            text-align: center;
            overflow-y: hidden;
            overflow-x: hidden;
            height: calc(100vh - 12vh);
            flex-grow: 1;
            flex-shrink: 0;
            position: sticky;
            margin: 1%;
            max-width: calc(100% - 350px);
            table{
                font-size: clamp(17px, 0.7vw, 26px);
                display: flex;
                justify-content: center;
                max-width: 50%;
                margin: 1%;
                margin-left: 25%;
                text-align: center;
                width: 90%;
                height: 50px;
                padding-right: 1%;
                .tablefest{
                    text-align: right;
                    margin-right: 20px;
                }
            }
            .pic-else{
                img{
                    width: 150vh;
                    height: auto;
                }
            }
            .pic-db{
                img{
                    max-height: calc(100vh - 70vh);
                    max-width: calc(100vh - 30vh);
                    width: auto;
                    height: auto;
                }
            }
        }
        .auswahl{
            color: rgb(2, 2, 99);
            max-width: 300px;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: calc(100vh - 12vh);
            flex-grow: 1;
            margin-left: 1%;
            text-align: left;
            h2{
                text-decoration: underline;
                font-size: 30px;
                font-weight: bold;
            }
            form[method="POST"]{
                display: inline;
                padding-right: 90%;
                text-align: center;
                button{
                    border-radius: 4px;
                    background-color: white;
                    color: black;
                    padding: 15px 20px;
                    border: 3px solid white;
                    margin: 3px;
                    width: 200px;
                    height: 75px;
                    font-size: 16px;
                    text-align: center;
                    display: inline-block;
                }
                button:focus, button:hover{
                    background-color: rgb(2, 2, 99);
                    color: white;
                    border: 3px rgb(2, 2, 99) solid;
                }
            }
        }
    }
}

#Datenschutz{
    #header-datenschutz{
        text-align: center;
    }
    #adress-datenschutz{
        margin-bottom: 20px !important;
        text-decoration: none !important;
    }
    #rechte-datenschutz{
        margin-bottom: 20px;
        text-decoration: none !important;
        
        #adress-datenschutz{
            margin-bottom: 20px !important;
            text-decoration: none !important; 
        }
    }
    .lhl{
        text-decoration: underline;
    }
    ol, ul{
        list-style-position: inside;
    }
    width: 50%;
    height: 87vh;
    margin: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    justify-content: center;
    text-align: center;
}