.wrapper {display: flex; height: 100%; align-items: center; justify-content: center;}
.modal .modal-dialog .modal-content {max-width: 400px;}
.login-panel {width: 310px; padding: 20px 5px; background-color: rgba(0, 0, 0, 0.2); border: thin solid rgba(255, 255, 255, 0); box-sizing: border-box; text-align: center;}
.title h2 {margin-top: 5px; color: #6CCDE3; font-size: 18px; font-weight: 500;}
#frm-login {margin-top: 15px;}
.login-field > li {margin: 10px; list-style: none;}
.login-field input {width: 244px; height: 37px; padding-left: 36px; border: 1px solid #C9C9C9; color: #414141;}
.login-field #login {width: 244px; height: 37px; padding-left: 0; background-color: #1D80C2; background: linear-gradient(#1D80C2, #1369A3); background: -webkit-linear-gradient(#1D80C2, #1369A3); border: 1px solid rgba(255, 255, 255, 0.4); font-size: 14px; font-weight: bold; color: #FFFFFF; cursor: pointer;}
.login-field #login:hover {background-color: #1369A3; background: linear-gradient(#1369A3, #1D80C2); background: -webkit-linear-gradient(#1369A3, #1D80C2); border: 1px solid rgba(255, 255, 255, 0.4); font-size: 14px; font-weight: bold; color: #FFFFFF;}
.login-field #login:active {position: relative; top: 1px;}
#username {background: #FFFFFF url(../../../hub/assets/images/icon/login-user.png) no-repeat 10px center;}
#password {background: #FFFFFF url(../../../hub/assets/images/icon/login-pw.png) no-repeat 10px center;}
.footer {margin: 30px 5px 0 5px; font-size: 12px;}

@media only screen and (min-width: 768px) {
    .login-panel {width: 400px;}
}