body {
    margin: 0;
    padding: 0;
}
#Login {
    background-image: url('../images/passbook-bg1.jpg');
    background-attachment:fixed;
    background-size:cover;
    background-repeat: no-repeat;
}
.login-form {
    position: absolute;
    width: 725px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #121212;
    box-shadow: 7px 7px 0px 7px #00000080;
    border-radius: 12px;
    opacity: 0.9;
}
.login-form-bg{
    position: relative;
    top: 0;
    left: 50px;
    width: 300px;
    height: 500px;
    background-color: #e8e6e7;
    box-shadow: 0px 0px 20px 6px #e8e6e7;
    border-radius: 12px;
    transform: scale(1.11);
}

.frm-background {
    box-shadow: 0px 0px 12px 5px rgb(154, 152, 153);
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    margin: 11px;
}

.login-form-pt-30{
    padding-top:30px;
}

.custom-sign{
    font-size:16px!important;
}

.fg-password {
    position: absolute;
    right: 0;
    color: #121212;
    margin: 0px 11px;
}

    .fg-password a {
        color: #121212;
    }

button,
button::after {
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;
}

span.error-msg {
    font-size: 12px;
    color: #e82f2f;
}

button {
    background: none;
    border: 3px solid #121212;
    border-radius: 5px;
    color: #121212;
    display: block;
    font-size: .85em;
    font-weight: bold;
    margin: 1em auto;
    padding: .75em 1em;
    position: relative;
    top: 35px;
    text-transform: uppercase;
    box-shadow: 0px 5px 12px #686969;
    background-color: #ffffff;
}

button::before,
button::after {
  background: #aeb1b2;
  content: '';
  position: absolute;
  z-index: -1;
}

    button:hover {
        color: #121212;
        transform: scale(1.05);
    }

.btn-3::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.btn-3:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.login-form-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 33px;
    text-align: center;
    color: #525252;
    margin: 29px;
    text-shadow: 0px 2px 0px #000;
    transform: translate(0%,-100%);
    font-family: sans-serif;
    margin-top: 20px;
    font-weight: bold;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);
}

div + p {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 14px;
    text-align: center;
    color: #525252;
    margin: 31px;
    transform: translate(0%,-100%);
    font-family: serif;
    margin-top: 40px;
    font-weight: 700;
    opacity: 0.9;
}

.user-input-wrp {
	position: relative;
	width: 250px;
    padding: 0px 20px;
    margin-bottom: 20px;
    color: #585758;
    /*font-weight:bold;*/
}
.user-input-wrp .inputText{
	width: 100%;
	outline: none;
	border:none;
	border-bottom: 1px solid #585758;
    background-color: transparent;
    line-height: 0;
}
.user-input-wrp .inputText:invalid {
	box-shadow: none !important;
    /*box-shadow: inset 0px 0px 8px rgb(166, 167, 168);*/ 
}
.user-input-wrp .inputText:focus{
	border-color: #8a888a;
	border-width: medium medium 1px;
}
.user-input-wrp .floating-label {
	position: absolute;
	pointer-events: none;
	top: 18px;
	left: 18px;
	transition: 0.2s ease all;
    /*line-height: 2;*/
}
.user-input-wrp .floating-label-list {
	position: absolute;
	pointer-events: none;
	top: 18px;
	left: 18px;
	transition: 0.2s ease all;
    /*line-height: 0.07143;*/
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
	top: 0px;
	left: 18px;
	font-size: 13px;
	opacity: 1;
}
.user-input-wrp select:focus ~ .floating-label-list,
.user-input-wrp select:valid ~ .floating-label-list
{
    top: 0px;
	left: 18px;
	font-size: 13px;
	opacity: 1;
    /*line-height:0!important;*/
}
.login-sec h2 {
    margin: 0px;
    font-weight: 800;
    font-size: 30px;
    color: #121212;
    text-align: center;
    padding: 30px;
}
    .login-sec h2:after {
        content: " ";
        width: 100px;
        height: 5px;
        background: #121212;
        display: block;
        margin-top: 20px;
        border-radius: 3px;
        margin-left: auto;
        margin-right: auto;
    }


@font-face {
    font-family: 'password';
    font-style: normal;
    font-weight: 400;
    src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

input.key {
    font-family: 'password';
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 1px solid #585758;
    background-color: transparent;
    line-height: 0
}

input.keyuser {
    font-size: 15px;
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 1px solid #585758;
    background-color: transparent;
    line-height: 0
}
.user-input-wrp {
    position: relative;
}

    .user-input-wrp .toggle-password {
        position: absolute;
        right: 10px; /* space from right edge */
        top: 60%; /* center vertically */
        transform: translateY(-50%);
        cursor: pointer;
        color: #555; /* adjust color */
        font-size: 16px;
    }
/* remove forcing dots on all inputs */
.key {
    -webkit-text-security: none; /* reset */
}

/* keep dots only when it's actually password type */
input[type="password"].key {
    -webkit-text-security: disc;
}