.vn-login { color: #333; font-size: 1.1em; font-weight: normal; height: inherit; } /* Navigation bar */ .vn-login .navbar { z-index: 10; position: fixed; background-color: #333; width: 100%; height: 3.5em; top: 0; color: white; } .vn-login .navbar div { margin-top: 1em; text-align: center; } /* Body */ .vn-login .body { height: inherit; } .vn-login .column { position: relative; margin: 0 auto; max-width: 40em; height: inherit; background-color: white; box-shadow: 0 0 .3em 0 rgba(1, 1, 1, 0.4); min-height: } /* Login */ .vn-login .login { position: relative; height: inherit; max-width: 15em; margin: 0 auto; } .vn-login form { position: absolute; top: 50%; margin-top: -20em; width: 100%; padding: 2em 0; } .vn-login form > div { margin: 1em 0; } .vn-login p { margin: .4em 0; } /* Header */ .vn-login .header { margin-bottom: 2em; } .vn-login .header img { display: block; width: 100%; /* box-shadow: 0 0 .3em 0 rgba(1, 1, 1, 0.4);*/ } .vn-login .version-code { color: red; text-align: right; margin: .2em auto; font-weight: bold; height: 1.4em; display: none; } /* Body */ .vn-login .form-inputs { margin: 0 auto; max-width: 15em; } .vn-login label { margin: 0; } .vn-login .form-group label { display: block; font-size: inherit; } .vn-login input { margin: 0.3em; } .vn-login input[type=text], .vn-login input[type=password] { margin: 0; margin-top: .5em; padding: 0 .5em; width: 100%; border: 1px solid #AAA; height: 2.6em; } .vn-login input[type=text], .vn-login input[type=password], .vn-login input[type=submit], .vn-login input[type=button], .vn-login input[type=reset], .vn-login button, .vn-login .button { border-radius: .1em; box-shadow: 0 .1em .1em rgba(1, 1, 1, 0.4); } .vn-login input[type=checkbox] { padding: 0; margin: 0; width: initial; height: initial; margin-right: .5em; } .vn-login input[type=submit], .vn-login input[type=button], .vn-login input[type=reset], .vn-login button, .vn-login .button { margin: 0 auto; background-color: #9CBC28; border: 1px solid #8A1; height: 2.4em; width: 100%; color: #240; text-transform: uppercase; } .vn-login input[type=submit]:hover, .vn-login input[type=button]:hover, .vn-login input[type=reset]:hover, .vn-login button:hover, .vn-login .button:hover { background-color: #8A1; } hr { border: solid 1px #333; margin: 0; padding: 0; display: block; } .vn-login .enter { position: relative; } .vn-login .wrapper { width: 0; overflow: visible; position: absolute; top: 0; right: 0; } .vn-login .htk-spinner { margin: .3em 1em; position: absolute; } /* Footer */ .vn-login .footer { margin-top: 2em; } .vn-login .contact { text-align: center; } @media (max-height: 50em) { .vn-login .column { min-height: 45em; } .vn-login .login { display: flex; align-items: center; } .vn-login form { top: 0; position: relative; margin-top: 0; padding-top: 5.5em; } }