.vn-login { color: #333; font-size: 1.1em; font-weight: normal; height: inherit; background-color: white; } /* Body */ .vn-login .body { height: inherit; } .vn-login .column { position: relative; margin: 0 auto; max-width: 40em; height: inherit; background-color: white; min-height: } /* Login */ .vn-login .login { position: relative; height: inherit; max-width: 18em; margin: 0 auto; } .vn-login form { position: absolute; top: 50%; margin-top: -380px; width: 100%; padding: 2em 0; } .vn-login form > div { margin: 1em 0; } .vn-login p { margin: .4em 0; } /* Header */ .vn-login .header { margin-bottom: 80px; } .vn-login .header img { display: block; width: 100%; } .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 .remind-block { margin: 20px 0; } .vn-login .remind-forgot { margin: 40px 0; } .vn-login input { margin: 0.3em; } .vn-login input[type=text], .vn-login input[type=password] { margin: 0; padding: 0 .5em; width: 100%; border-bottom: 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; } .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: #0d1115; border-radius: 25px; height: 50px; width: 100%; color: white; transition: transform 200ms ease-out; transition-property: background-color; } .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: #7d8185; } .vn-login .button.guest { margin-top: 15px; border: 1px solid #0d1115; background-color: white; color: #0d1115; } .vn-login .button.guest:hover { border-color: #7d8185; background-color: #7d8185; color: white; } 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: 80px; font-size: 14px; text-align: center; } .vn-login .contact { margin-top: 15px; color: grey; } .vn-login .footer a { font-weight: bold; } @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; } }