.login-wrapper { background:#327ab9; width:100vw; height:100vh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; background-size:cover; }
.alerts        { width:420px; }
.login-form    { width:420px; min-height:440px; box-shadow:0 16px 28px rgba(0,0,0,.22),0 25px 55px rgba(0,0,0,.21); padding:20px; border-radius:4px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.login-logo-wrapper { width:100%; display:flex; flex-direction:column; align-items:center; }
.login-logo    { width:250px; margin:20px 0 10px; }
.login-title-wrapper { width:100%; text-align:center; margin:20px 0; }
.login-title   { font-size:28px!important; font-weight:bold; color:#0c539b; margin:0; }
.field-wrapper { display:flex; flex-direction:row; align-items:center; width:100%; margin-bottom:16px; position:relative; }
.login-icon    { margin-right:10px; color:#575756; transition:color .3s; }
.icon-active   { color:#2165aa; }
.login-input   { flex:1; border:none; border-bottom:1px solid #9e9e9e; outline:none; background:transparent; padding:8px 0; font-size:16px; transition:border-color .3s; }
.login-input:focus { border-bottom-color:#2165aa; }
.input-effect::placeholder { color:#9e9e9e; }
.iconShowPassword { position:absolute; right:0; top:50%; transform:translateY(-50%); cursor:pointer; color:#575756; font-size:1.1rem; }
.login-btn-wrapper { width:100%; display:flex; justify-content:center; margin-top:16px; }
.btn-login     { background:#2165aa; color:#fff; border:none; border-radius:4px; padding:10px 60px; font-size:16px; cursor:pointer; transition:background .2s; }
.btn-login:hover { background:#1a5090; }
@media (max-width:480px) { .login-form,.alerts { width:90vw; } }