body{
    font-family: 'Roboto', sans-serif !important;
    background-image: url('/img/background-login.png');
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;   
    background-repeat:   no-repeat;
    background-position: center center;
    
}

.bg-opacity-0 {
    background-color: #00000000 !important;
}

.login-input::placeholder {
    font-family: 'Roboto', sans-serif !important;
    color: white !important;
}

.login-input {
    font-family: 'Roboto', sans-serif !important;
    color: white !important;
}

.btn-login {
    background-color: white;
    font-family: "Roboto";
    color: rgb(83, 30, 39);
    text-align: center;
    border-radius: 10px;
    box-shadow: 3px 7px #00000055;
}

.btn-login:hover {
    background-color: white;
    font-family: "Roboto";
    color: rgb(83, 30, 39);
    text-align: center;
    border-radius: 10px;
    box-shadow: 3px 7px #00000055;
}

.form-control:focus {
    background-size: 100% 100%, 100% 100% !important;
    transition-duration: 2s !important;
    box-shadow: none !important;
}

.form-control:invalid {
    /* background-image: linear-gradient(to top, #fbfbfb 2px, rgba(244, 67, 54, 0) 2px), linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px) !important; */
}

.is-invalid {
    border-color: aqua !important;
}

.form-control.is-invalid2 ~ .invalid-feedback, .form-control.is-invalid2 ~ .invalid-tooltip {
    display: block;
}