
 .container .login-box {
	 height: 360px;
	 width: 340px;
	 background: white;
	 border-radius: 15px;
	 padding: 35px;
	 display: flex;
	 flex-direction: column;
}
 .container .login-box .heading {
	 text-align: center;
	 margin-top: 20px;
	 margin-bottom: 20px;
}
 .container .login-box .heading h3 {
	 font-size: 23px;
}
 .container .login-box .heading p {
	 position: relative;
}
 .container .login-box .heading p::after {
	 content: "";
	 width: 70px;
	 height: 4px;
	 background-color: #141e30;
	 position: absolute;
	 bottom: -30%;
	 left: 40%;
}
 .container .login-box form {
	 display: flex;
	 flex-direction: column;
	 height: 100vh;
}
 .container .login-box form .form-group {
	 position: relative;
	 margin-top: 35px;
}
 .container .login-box form .form-group input {
	 width: 100%;
	 position: relative;
	 outline: 0;
	 background: #fff;
	 padding: 10px 0px;
	 border-radius: 5px;
	 transition: all 650ms ease;
	 border: 1px solid #273463;
	 font: 12px 'Poppins';
}
 .container .login-box form .form-group label {
	 position: absolute;
	 left: 10px;
	 top: 7px;
	 font: 16px 'Poppins';
	 transition: all 0.3s ease;
	 color: #273463;
}
 .container .login-box form .form-group input:focus, .container .login-box form .form-group input:valid {
	 background: #fff;
	 color: #273463;
	 padding-left: 10px;
	 margin-left: -5px;
	 font-size: 14px;
	 -webkit-box-shadow: -2px 2px 13px 0px rgba(185, 185, 185, 0.75);
	 -moz-box-shadow: -2px 2px 13px 0px rgba(185, 185, 185, 0.75);
	 box-shadow: -2px 2px 13px 0px rgba(185, 185, 185, 0.75);
}
 .container .login-box form .form-group input:focus ~ label, .container .login-box form .form-group input:valid ~ label {
	 transform: translate3d(0px, -31px, 0px);
	 font: 16px/42px 'Poppins';
	 color: #141e30;
	 left: 0px;
	 top: 0px;
}
 .container .login-box form .check-box {
	 display: inline-block;
	 font-family: sans-serif;
	 font-size: 14px;
	 padding: 15px 0px 5px 0px;
	 color: #141e30;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;
}
 .container .login-box form .check-box:hover {
	 cursor: pointer;
}
 .container .login-box form .check-box::before {
	 width: 33%;
	 position: absolute;
	 height: 2px;
	 content: "";
	 background: rgba(39, 52, 98, 0.822);
	 margin: auto;
	 left: -34%;
	 top: 94%;
	 z-index: -1;
	 -webkit-transition: 650ms all ease;
	 transition: 650ms all ease;
}
 .container .login-box form .check-box:hover::before {
	 left: 0;
}
 .container .login-box .login-btn {
	 width: 100%;
	 height: 45px;
	 background: #fff 0d;
	 border-radius: 8px;
	 border: 2px solid #334b79;
	 font-size: 15px;
	 font-weight: bold;
	 color: #334b79;
	 -webkit-transition: 0.5s all ease;
	 transition: 0.5s all ease;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;
	 margin-top: auto;
}
 .container .login-box .login-btn:before {
	 width: 50%;
	 height: 100%;
	 content: "";
	 margin: auto;
	 position: absolute;
	 top: 0%;
	 left: -50%;
	 background: #334b79;
	 transition: all 0.5s ease;
	 z-index: -1;
}
 .container .login-box .login-btn:after {
	 width: 50%;
	 height: 100%;
	 content: "";
	 margin: auto;
	 position: absolute;
	 top: 0%;
	 left: 100%;
	 background: #334b79;
	 transition: all 0.5s ease;
	 z-index: -1;
}
 .container .login-box .login-btn:hover {
	 color: white;
	 cursor: pointer;
}
 .container .login-box .login-btn:hover:before {
	 top: 0;
	 left: 0;
}
 .container .login-box .login-btn:hover:after {
	 top: 0;
	 left: 50%;
}

