body {
    width: 100%;
    height: 100%;
    background-image: url("/images/background.png");
    background-size: cover;
    background-position: center;
}

.login-card {
    padding: 80px 0;
}

    .login-card form {
        max-width: 320px;
        min-width: 90px;
        margin: 0 auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 4px;
        color: #505e6c;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
    }

    .login-card .illustration {
        text-align: center;
        padding: 0 0 20px;
        font-size: 100px;
        color: rgb(244,71,107);
    }

        .login-card .illustration img {
            height: 100px;
            width: auto;
            max-height: 100px;
        }

.mb-3 {
    margin-bottom: 1rem !important;
    width: 100%;
}

    .mb-3 .form-control {
        width: 100%;
        height: 42px;
        text-indent: 8px;
        padding: .375rem .75rem;
        border: none;
        border-bottom: 1px solid #000;
    }

        .mb-3 .form-control:focus {
            color: #212529;
            background-color: #fff;
            border-color: #86b7fe; /* this needs to change */
            outline: 0;
            box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
        }

.btn-primary {
    background: #f4476b;
    border: none;
    border-radius: 4px;
    padding: 11px;
    box-shadow: none;
    margin-top: 26px;
    text-shadow: none;
    outline: none !important;
    width: 100%;
    color: #fff;
}

    .btn-parim:hover, .btn-primary:active {
        background: #eb3b60;
    }

    .btn-primary:active {
        transform: translateY(1px);
    }

.alert {
    width: 95%;
    margin: 0 auto;
    text-align: left;
    border: 1px solid black;
    padding: 15px;
    margin-bottom: 25px;
}

.alert ul {
    list-style-type: none;
}
    .alert.alert-danger {
        background-color: #f4476b;
        color: #fff;
    }