:root {
    --bkg-start-dre-res: #013F78;
    --bkg-end-dre-res: #010E31;
    --bkg-autofill: #d3e3ec;
    --hover-dre-res: #4d79a1;
}

#main-container .branded-login .background {
    background: linear-gradient(135deg, var(--bkg-start-dre-res, #444) 5%, var(--bkg-end-dre-res, #777) 95%);
}

#main-container .branded-login .logo-brand {
    content: url("/bootstrap/integration/dre-res/logo/logo.png");
}

#main-container .branded-login .ilustration-line {
    background-image: url('/bootstrap/img/brand/ilustrations/cnst.svg');
}

#login-box input:focus {
    border-color: var(--hover-dre-res);
}

#login-box .float-input-box input:not(:placeholder-shown)~label,
#login-box .float-input-box input:focus~label,
#login-box .float-input-box input:-webkit-autofill~label,
#login-box .float-input-box input:-webkit-autofill:hover~label,
#login-box .float-input-box input:-webkit-autofill:focus~label,
#login-box .float-input-box input:autofill~label {
    color: var(--hover-dre-res);
}

#login-box input:-webkit-autofill,
#login-box input:autofill,
#login-box input:-webkit-autofill,
#login-box input:autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--bkg-autofill) inset;
}

#main-container .branded-login .login-btn {
    color: var(--bkg-start-dre-res);
    border-color: var(--bkg-start-dre-res);
    transition: 0.2s ease;
    transition-property: color, border-color, background-color;
}

#main-container .branded-login .login-btn:hover {
    color: #fff;
    background-color: var(--hover-dre-res);
    border-color: var(--hover-dre-res);
    text-shadow: none;
}

#main-container .branded-login .login-link {
    transition: color 0.2s ease;
}

#main-container .branded-login .login-link:hover {
    color: var(--hover-dre-res);
}