.login{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    overflow: hidden;
    background: var(--background-Work);    
}

.login .header {
    position:absolute;
    left:50%;
    transform: translate(-50%);
    top:60px;
    width:100%;
    max-width:320px;
    height:100px;
    
}
.login .header .title{
    text-align: right;
    font-size:15px;
    color:var(--color-Work);
    margin-top: -35px;
}
.loginForm1 {max-width:100%;}

.login .loginForm {
    font-size: 16px;
    position:absolute;
    background: var(--background-Form);
    color:var(--color-Form);
    width:100%;
    max-width:400px;
    height:100%;
    max-height:450px;
    left:50%;
    top:180px;
    transform: translate(-50%);    
    
    border-radius: 5px;
    box-shadow: 4px 6px 6px var(--color-FormShadow);
}


.login .loginForm .title     {
    margin-top:20px;
    text-align: center;
    font-size:24px;
    font-weight:thin;
}


    
.login .loginForm .input{
    margin-left:30px;
    margin-right:30px;
}
.login .loginForm .lostpassword {margin-top:30px;}
.login .loginForm .lostpassword span {cursor:pointer;}
.login .loginForm .lostpassword span:hover {color:var(--color-High);}
.login .loginForm input[type=text]{width:100%;height:35px;}
.login .loginForm input[type=password]{width:100%;height:35px;}
.login .loginForm .inputtitle{
    margin-left:30px;
    margin-right:30px;
}
.login .loginForm input[type=checkbox]{width:20px;height:20px;margin-top:10px}
.login label{cursor:pointer;vertical-align:middle}

.login .loginForm .errortitle {
    margin-left:30px;
    margin-right:30px;

    color: var(--red);
    font-size:12px;
    visibility:hidden;    
}
.login .loginForm .errordefault {
    font-size:16px;
    text-align: center;
}

.login .loginForm .button    {
    height:42px;
    background-image: var(--buttonBlue-submit-background);
    vertical-align: middle;
    text-align: center;
    border-radius: 6px;
    border:1px solid var(--buttonBlue-submit-Border);
    padding:6px;
    cursor:pointer;
    color:white;
    overflow:hidden;  
    margin-top:20px;
    margin-bottom:10px;
    width:100%;
}

.login .loginForm .button:hover {    
    background-image: var(--buttonBlue-submit-background-hover);
}            
.login .footer {
    position:absolute;
    left:-1px;
    height:400px;
    bottom:0px;
    right:0px;
    overflow: hidden;
}
.login .footer-background { 
    background-size:cover;
    background-position: right;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUwMDAiIGhlaWdodD0iNDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbC1ydWxlPSJldmVub2RkIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIFNWRy1lZGl0IC0gaHR0cHM6Ly9naXRodWIuY29tL1NWRy1FZGl0L3N2Z2VkaXQtLT4KIDxnIGNsYXNzPSJsYXllciI+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiMwMDQyMzAiIGZpbGwtb3BhY2l0eT0ibnVsbCIgaGVpZ2h0PSIzNSIgaWQ9InN2Z18xIiBzdHJva2U9IiMwMDQyMzAiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS1saW5lY2FwPSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiB3aWR0aD0iNTAwMCIgeD0iMSIgeT0iMzY1LjU2Ii8+CiAgPHBhdGggZD0ibTUwMDAsMzY1LjY2bDAsLTM2My40M2wtNTAwMCwzNjMuNDN6IiBmaWxsPSIjMDA0MjMwIiBmaWxsLW9wYWNpdHk9Im51bGwiIGlkPSJzdmdfMiIgc3Ryb2tlPSIjMDA0MjMwIiBzdHJva2UtZGFzaGFycmF5PSJudWxsIiBzdHJva2UtbGluZWNhcD0ibnVsbCIgc3Ryb2tlLWxpbmVqb2luPSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIvPgogPC9nPgo8L3N2Zz4=)no-repeat;
}


.mobil .loginForm .header {
    top:30px;
}

.mobil .loginForm {
    background : none;
    box-shadow : none;
    border: 0px;
    top:160px;
}