html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu,
section, summary, time, mark, audio, video {
margin:0; padding:0; border:0; outline:0; font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {display:block;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

::-webkit-input-placeholder {color: #000;}
     :-ms-input-placeholder {color: #000;}
         ::-moz-placeholder {color: #000; opacity: 1;}
          :-moz-placeholder {color: #000; opacity: 1;}

html, body  {width: 100%; height: 100%; min-width: 320px; min-height: 785px;}
body {position: relative; font-family: 'Open Sans', sans-serif; font-weight: 400;}
input, button {outline: none; border: none; font-family: 'Open Sans', sans-serif; font-weight: 400;}

.hide, .hidden {display: none;}
.code-result {position: absolute; top: 47px; left: 0; padding: 1px 5px; border-radius: 2px; font-size: 14px; font-family: Arial, sans-serif; color:#fff;}
.bad-code {background-color: #f00;}
.good-code {background-color: #468847;}

.centered {width: 100%; height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px;}

header {height: 100px; width: 100%; background-color: #fff;}
.header-content {display: -webkit-flex; display: flex; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items: center; align-items: center;}
.logo {display: block; max-height: 100px; max-width: 300px;}

.content {height: calc(100% - 100px); min-width: 320px; background:#fff url("https://hirevue-landing.s3.amazonaws.com/prudentialsg/images/bg_v2.jpg") no-repeat center; background-size: cover; padding-top: 100px;}

.big-logo {display: block; margin: 0 auto; max-height: 250px; max-width: 250px;}

.title {padding-bottom: 20px; font-size: 18px; font-weight: 400; color: #000;}

.manager-login {width: 430px; background: rgba(255,255,255,.7); border-radius: 20px; padding: 30px 60px 40px; margin: 0 auto;}
.ml-big-logo {padding: 15px 0 25px;}
.login-form {position: relative; width: 100%;}
.input-text {width: 100%; height: 45px; padding: 0 15px; margin-bottom: 15px; font-size: 18px; border: 1px solid #787777; border-radius: 5px; background: transparent; color: #000; font-weight:300;}

.keep-block {float:left;}
.keep-block label {float: left; cursor: pointer; color: #000; font-size: 14px;}
.keep-block .keep-signed-in  {float: left; height: 16px; width: 16px; padding: 0; margin: 0 5px 0 0; background-color: #fff; border: none;}
.forgot {float: right; color: rgb(237,27,46); font-size: 14px;}
.forgot:hover {text-decoration: none;}

.login-btn {width: 100%; height: 50px; margin-top: 15px; cursor: pointer; border-radius: 5px; border: none; background-color: rgb(237,27,46); box-shadow: 0 0 7px rgba(0,0,0,.5); font-weight: 300;}
.login-btn:hover {opacity: .9;}
.fa.fa-check {display: block; font-size: 35px; line-height: 50px; text-align: center; color: #fff;}

.alert {position: absolute; padding: 2px 5px; border-radius: 2px; z-index: 2; margin-top: 5px; font-size: 12px; font-family: Arial, sans-serif; text-align: left; color: #fff; background-color:#df0000;}
.user-disabled {margin-top: 40px;}

@media screen and  (max-width: 800px) {
    .content {position: relative; z-index: 1; padding-top: 0; height: calc(100% - 100px);}
    .content:after {position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: rgba(255,255,255,.6);}

    .centered {width: 90%; max-width: 500px; padding: 0;}
    header {height: 100px; padding-top: 0;}
    .header-content {-webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center;}
            
    .manager-login {width:290px; background: none; padding: 0;}
    .big-logo {padding: 50px 0 35px; height: 0;}

    .user-disabled {margin-top: 5px;}
}