body{
     background-color: #e9ecef;
}
#login-card{
     height: 100%;
     width: 350px;
     justify-content: center;
     margin: 0 auto;
     border: 1px solid rgba(200, 200, 200, 0.7);
     border-top: 5px solid black;
     border-radius: 3px;
     align-self: center;
     margin-top: 18%;
     background-color: #ffffff;
     box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

#login-card .logo{
     background-color: #fff;
     display: flex;
     justify-content: center;
     margin: 0 auto;
}
#login-card img{
     width: 150px;
     height: 100%;
     margin: 10px 0px;
}
#login-card form{
     padding: 15px;
}
.input-group-append{
     background: #fff;
}
.input-group-append i{
     height: 25px;
     margin-top: 4px;
     cursor: pointer;
}
#login-card .button
{
     text-align: right;
     margin-top: 20px;
     margin-bottom: 5px;
}
#login-card .button button
{
     padding: 7px 25px;
}
#login-card .button i {
    width: 20px;
    margin-right: 5px;
    font-size: 14px;
}
#login-card input:focus,
#login-card input:active{
    outline: none !important;
    box-shadow: none !important;
    border-color: #ced4da;
}
#login-card button:hover{
    background-color: #000;
    color: #d4874a;
}
#login-card button:focus,
#login-card button:focus-visible,
#login-card button:active{
    outline: none !important;
    box-shadow: none !important;
}

@media only screen and (max-width: 480px) {

     #login-card{
          width: 90%;
     }
}