body {
    background-image: linear-gradient(#CBC3E3, lavender);
}

.box-area {
    width: 58.125rem;
    max-width:100%;
}

.input-group-text {
    padding: 0;
    width: 2.9rem;
    height: 100%;
}

.login-page-img {
    max-width: 100%;
    max-height: 100%;
}

.left-box {
    background: lavender;
}

.right-box {
    padding: 40px 30px 40px 40px;
}

::placeholder {
    font-size: 1rem;
    color: #aaa;
}

#btnLogin {
    background-color: darkslateblue;
    border-color: indigo;
    transition: background-color 0.3s, border-color 0.3s;
}

input:focus,#btnLogin:focus{
    outline:2px solid darkslateblue;
}
    #btnLogin:hover {
        background-color: rebeccapurple;
        border-color: rebeccapurple;
    }

@media only screen and (max-width: 768px) {
    .box-area {
        margin: 0 10px;
    }

    .left-box {
        height: auto;
        overflow: hidden;
    }

    .right-box {
        padding: 20px;
        
           
    }
}