:root {
    --color-sn-primary: #00abe9 !important;
    --color-sn-primary-darken-10: #0091c5 !important;

    --color-primary: var(--color-sn-primary) !important;
    --color-primary-darken-10: var(--color-sn-primary-darken-10) !important;

    --color-secondary: var(--color-sn-primary) !important;
    --color-secondary-darken-10: var(--color-sn-primary-darken-10)  !important;

    --color-primary-background: #fff !important;

    --color-brand-bg: var(--color-primary-background) !important;
    --color-brand-border: var(--color-brand-bg) !important;
    --logo-path: url(../img/stuttgart-netze-logo.svg) !important;
    --logo-height-small: 60px !important;
}

div.login div.wrapper-left {
    background-color: var(--color-primary-background) !important;
}

div.wrapper-left {
    background-image: none !important;
}

div.brand-login-wrapper > div.brand-login {
    background-image: var(--logo-path) !important;
    background-size: contain !important;
}

#activation_page div.brand-wrapper, #forgotpassword_page div.brand-wrapper, #register_page div.brand-wrapper {height: 84px !important;}


div.brand-login-wrapper-top-link {
    margin: 20px !important;
    position: absolute !important;
}

.login div.wrapper-middle {
    position: relative !important;
    width: 20vw !important;
    height: var(--vh) !important;
    float: left !important;
}
.login div.wrapper-middle div {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
}

.login .wrapper-right,.login .wrapper-left {
    width: 40vw !important;
}
.header-functions-wrapper {height: 100% !important;}

@media only screen and (orientation: landscape)and (max-height:40em)and (max-width:63.938em) {
    .login div.wrapper-middle {
        display: none !important;
        width:100vw !important;
        float: unset !important;
    }
    .login div.wrapper-middle div {
        position: relative !important;
        top:unset !important;
        height: 75vh !important;
    }
    .login .wrapper-right {
        width: 100vw !important;
        float: unset !important;
    }
    .login .wrapper-left {
        width: 100vw !important;
        float: unset !important;
    }
}