body.home-base{background-image:linear-gradient(45deg,#00adef,#396bbf,#183873);min-height:100vh}body.home-base main{display:flex;flex-direction:column;height:100vh;justify-content:center}body.home-base .main-content{background-color:#fff;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);padding:100px 50px;position:relative}body.home-base .main-content .background-image{bottom:20px;opacity:.1;position:absolute;right:20px;z-index:1}body.home-base .main-content .background-image img{filter:grayscale(100%);height:auto;width:300px;z-index:10}body.home-base .main-content .main-logo{display:block;margin-left:auto;margin-right:auto;max-width:250px}body.home-base .main-content .page-content{position:relative;z-index:5}body.login{background-color:red;background-image:linear-gradient(45deg,#00adef,#396bbf,#183873);min-height:100vh}body.login>.row{align-items:center;min-height:100vh}body.login>.row .form-container{background-color:#fff;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);padding:100px 50px;position:relative}body.login>.row .form-container .background-image{bottom:20px;opacity:.1;position:absolute;right:20px;z-index:1}body.login>.row .form-container .background-image img{filter:grayscale(100%);height:auto;width:300px;z-index:10}body.login>.row .form-container .main-logo{display:block;margin-left:auto;margin-right:auto;max-width:250px}body.login>.row .form-container .login-content{position:relative;z-index:5}body.login>.row .form-container form{position:relative;z-index:30}body.login>.row .form-container form h1{color:#183873}body.login>.row .form-container form .input{margin-bottom:20px;position:relative}body.login>.row .form-container form .input .icon{color:#b3b3b3;left:0;margin-left:20px;position:absolute;top:50%;transform:translateY(-50%);transition:all .1s ease-in-out}body.login>.row .form-container form .input .form-control{border:none;color:#484848;padding-left:50px}body.login>.row .form-container form .input .form-control::placeholder{color:#b3b3b3}body.login>.row .form-container form .input:after,body.login>.row .form-container form .input:before{background-color:#b3b3b3;bottom:0;content:"";height:1px;left:0;position:absolute;width:100%;z-index:40}body.login>.row .form-container form .input:before{background-color:#00adef;background-image:linear-gradient(45deg,#00adef,#396bbf,#00adef);left:50%;transform:translateX(-50%);transition:all .3s ease-in-out;width:0;z-index:80}body.login>.row .form-container form .input.focus .icon{color:#00adef}body.login>.row .form-container form .input.focus:before{width:100%}body.login>.row .form-container form .contexts{height:300px;overflow-y:scroll}body.login>.row .form-container form .submit{background-image:linear-gradient(225deg,#00adef,#396bbf,#183873);background-size:180% 180%;font-weight:700;transition:all .1s ease-in-out}body.login>.row .form-container form .submit:hover{background-position:-200px 0}