html {
    height:100%;
}

body.login-page {
    height: 100%;
    display: flex;
    width: 100%;
    align-content: center;
    align-items: center;
    justify-content: center;
}

body.login-page section {
    width:100%;
}

.login_frame {
    margin:40px auto;
}

.login_frame .slam_logo {
    text-align: right;
    margin:0 auto 80px auto;
}

.login_frame .slam_logo img {
    width:250px;
    height:auto;
    padding:20px;
    background-color: #fff;
}

#card {
    max-width:700px;
    margin:0 auto;
}

#card .front,
#card .back {
    box-shadow: 0 0 5px var(--header-button-grey);
    padding:60px;
    height:auto!important;
    min-height: 600px;
    background-color: #fff;
    transform-style: unset!important;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#card .front .logo_in_box,
#card .back .logo_in_box {
    width:250px;
    display:block;
    margin:0 auto 60px auto;
}

#card .tab {
    max-width:400px;
    width:100%;
    margin:0 auto;
}

.card_selector {
    display:flex;
    list-style-type: none;
    color:var(--grey);
    margin:0 0 40px 0;
    justify-content: center;
}

.card_selector li {
    margin:0 20px;
}

.card_selector li:not(:last-of-type)::after {
    content:' ';
    width:1px;
    height:30px;
    display:inline-block;
    margin-left:20px;
    background-color: var(--dark-grey);
    position: absolute;
    margin-top:-5px;
    z-index: -1;
}


.card_selector li.active {
    font-weight: bold;
    color:var(--black);
}

.card_selector li a {
    color:var(--dark-grey);
}

.card_selector li a:hover {
    text-decoration: underline;
}

#card h1 {
    text-align: center;
    margin-bottom:40px;
}

form {
    text-align: center;
}

form .field {
    position: relative;
    margin-bottom:30px;
}

form .field::before {
    position: absolute;
    content:' ';
    width:30px;
    height:30px;
    left: 3px;
    top: 3px;
    z-index:3;
    -webkit-mask-size: contain;
    mask-size: contain;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color:var(--accent);
}

form .field.user_field::before {
    -webkit-mask-image: url('../images/icon_user.svg');
    mask-image: url('../images/icon_user.svg');

}

form .field.email_field::before {
    -webkit-mask-image: url('../images/icon_email.svg');
    mask-image: url('../images/icon_email.svg');

}

form .field.pw_field::before {
    -webkit-mask-image: url('../images/icon_passwort.svg');
    mask-image: url('../images/icon_passwort.svg');

}

form input {
    display:block;
    width:100%;
    border:none;
    border-bottom: 1px solid var(--grey);
    padding:10px 10px 10px 45px;
    font-size:1rem;
    position: relative;
    z-index: 2;
}
form input:focus {
    outline:none;
}


form .forgotten_pw {
    margin-bottom:20px;
}

form .forgotten_pw a {
    font-size:0.8em;
    text-decoration: underline;
    color:var(--dark-grey);

}

form .forgotten_pw a:hover,
.message  strong {
    font-family: 'WS Calibri Bold';
}

.submit_btn {

}

.submit_btn button {
    min-width:150px;
}

.message {
    margin: -20px 0 40px 0;
    padding: 10px;
    background-color: #eee;
    font-size: 0.8em;
    text-align: left;
}

.message.error_message {
    border-left:5px solid var(--accent);
}

.message.success_message {
    border-left:5px solid green;
}
.message.hint_message {
    border-left:5px solid orange;
}

.message a {
    text-decoration: underline;
}

.message a:hover {
    color:var(--accent);
}


@media only screen and (max-width: 768px) {

    #card .front, #card .back {
        padding:20px;
    }

    .login_frame .slam_logo {
        margin-bottom:20px;
    }

    .login_frame {
        margin:0 auto;
    }

}