html {
    background: url(../img/login-background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
}

.loginWrapper {
    position: absolute;
    background: url(../img/login-background.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.loginFormWrapper {
    position: absolute; /* absolute - beacuse fixed having issue on tablet */
    bottom: 4em;
    right: 4em;
    background: rgba(255, 255, 255, .6);
    padding: 3em 2em;
    border-radius: 2px;
    text-align: center;
    max-width: 340px;
}

.loginLogo {
    margin-bottom: 1.5em;
    padding: 0 1em;
    width: 90%;
}

.loginForm {
    position: relative;
}

.error-message-wrapper {
    position: relative;
}

.successfully-changed {
    color: rgb(65, 185, 176);
}

.loginInput {
    display: block;
    padding: 0.45em;
    margin-bottom: 1em;
    width: 100%;
    border-radius: 2px;
    border: 1px solid rgba(195, 195, 195, .8);
    color: rgb(65, 185, 176);
    outline: 0;
    -webkit-transition: border, .25s, ease;
    -moz-transition: border, .25s, ease;
    -ms-transition: border, .25s, ease;
    -o-transition: border, .25s, ease;
    transition: border, .25s, ease;
}

.forgotPassword {
    color: rgb(19, 168, 158);
    font-weight: 300;
    margin-top: -0.5em;
    cursor: pointer;
    font-size: .9375em;
    text-align: left;
}

.loginInput:focus, .loginInput:active {
    border: 1px solid rgb(65, 185, 176);;
}

.loginSubmit {
    width: 100%;
    padding: 0.9em;
    font-size: 0.9em;
    border: 0;
    color: rgb(255, 255, 255);
    background: rgb(45, 178, 169);
    margin-top: .5em;
    outline: 0;
    cursor: pointer;
    display: block;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
    -webkit-transition: background, .25s, ease;
    -moz-transition: background, .25s, ease;
    -ms-transition: background, .25s, ease;
    -o-transition: background, .25s, ease;
    transition: background, .25s, ease;
}

.loginSubmit:hover {
    background: rgb(52, 200, 190);
}

.loginSubmit:active {
    background-color: rgb(74, 78, 103);
    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .5);
    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .5);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .5);
}

/* Invalid States */

.inputInvalidMessage {
    font-size: 0.9375em;
    color: rgb(215, 71, 71);
    text-align: left;
    float: left;
    display: block;
    width: 100%;
    margin-bottom: 0.6em;
}

.inputInvalid, .inputInvalid:focus {
    border: 1px solid rgb(215, 71, 71);
}

.fadeOutLogin {
    display: none;
    opacity: 0;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -ms-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

.forgotPasswordForm {
    position: absolute; /* absolute - beacuse fixed having issue on tablet */
    bottom: 4em;
    right: 4em;
    background: rgba(255, 255, 255, .6);
    padding: 3em 2em;
    border-radius: 2px;
    text-align: center;
    max-width: 340px;
    opacity: 0;
    display: none;
}

.fadeInLogin {
    display: block!important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    opacity: 1;
}

.resetPasswordInfo {
    display: none;
}

.resetPasswordInfo p {
    color: rgb(45, 178, 169);
}

.welcome-note {
    color: rgba(0, 0, 0, .8);
    font-size: 16px;
}