.login { height: 100vh; min-height: 500px; background: #002a37; text-align: center; &:before { height: ~"calc(100% - 110px)"; width: 1px; content: ""; } } .l-wrap, .login:before { display: inline-block; vertical-align: middle; } .l-wrap { width: 80%; max-width: 500px; margin-top: -50px; &.toggled { display: inline-block; } .input-group:not(:last-child) { margin-bottom: 40px; } } .l-footer { height: 110px; padding: 0 50px; } .lf-logo { float: right; img { width: 40px; } } .lf-server { float: left; color: rgba(255, 255, 255, 0.4); font-size: 20px; font-weight: 400; padding-top: 40px; } @media (max-width: @screen-sm-min) { .lf-logo, .lf-server { float: none; display: block; text-align: center; width: 100%; } .lf-logo { margin-bottom: 5px; } .lf-server { font-size: 15px; } } .lw-btn { width: 50px; height: 50px; border: 1px solid @white; display: inline-block; border-radius: 50%; font-size: 22px; color: @white; .transition(all); .transition-duration(300ms); opacity: 0.3; background-color: transparent; line-height: 45px; padding: 0; &:hover { color: @white; opacity: 0.8; border-color: @white; } i { display: block; width: 100%; padding-left: 3px; } } .openid-login { margin-top: 30px; } .openid-btn { display: inline-block; margin-top: 30px; border-width: 1px; border-style: solid; opacity: 0.6; font-size: 14px; &:hover { color: @link-color; opacity: 1; } } .or { display:flex; justify-content:center; align-items: center; color:grey; } .or:after, .or:before { content: ""; display: block; background: grey; width: 10px; height: 1px; margin: 0 10px; } /*------------------------------ Chrome autofill fix -------------------------------*/ input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px #002a37 inset !important; -webkit-text-fill-color: @white !important; caret-color: white; }