:root {
  --bkg-start-ipm: #5bb24b;
  --bkg-end-ipm: #235e36;
  --bkg-autofill: #def0db;
  --hover-ipm: #2e5926;
}

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

#main-container .branded-login .logo-brand {
  content: url("/integration/ipm/logo/ipm-424-white.svg");
}

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

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

#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-ipm);
}

#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-ipm);
  border-color: var(--bkg-start-ipm);
  transition: 0.2s ease;
  transition-property: color, border-color, background-color;
}

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

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

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