/* MAGOWORK premium login */
html, body {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 10%, rgba(20,90,180,.20), transparent 28%),
    radial-gradient(circle at 15% 65%, rgba(0,140,255,.10), transparent 18%),
    radial-gradient(circle at 85% 65%, rgba(0,140,255,.10), transparent 18%),
    #02040a !important;
}
#app, #login, .login-page, .container-fluid {
  background: transparent !important;
}
#login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 40px;
}
#login form {
  width: min(100%, 520px) !important;
  margin: 0 auto !important;
  padding: 28px 30px 30px !important;
  position: relative;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(7,14,25,.96), rgba(4,9,18,.98)) !important;
  border: 1px solid rgba(61,133,255,.35) !important;
  box-shadow:
    0 0 0 1px rgba(59,130,246,.08) inset,
    0 25px 80px rgba(0,0,0,.55),
    0 0 30px rgba(30,136,229,.16) !important;
}
#login form::before {
  content: "";
  display: block;
  width: 100%;
  height: 260px;
  margin: -6px auto 14px;
  background: url('/static/img/drive-logo.png') center center/contain no-repeat;
}
#login form::after {
  content: "Bem-vindo de volta!\AEntre para acessar o portal da MAGOWORK";
  white-space: pre-line;
  display: block;
  text-align: center;
  margin: 0 0 18px;
  color: rgba(255,255,255,.92);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
}
#login form > img,
#login form > h1 {
  display: none !important;
}
#login form > input[type="password"] {
  display: block !important;
}

#login .input,
#login input.input {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  height: 60px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(8,15,25,.96) !important;
  color: #fff !important;
  font-size: 18px !important;
  padding-left: 18px !important;
  margin-bottom: 14px !important;
}
#login .button,
#login input.button {
  width: 100% !important;
  max-width: none !important;
  height: 60px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #2f8cff, #1766f5) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 30px rgba(23,102,245,.30) !important;
}
#login .button:hover,
#login input.button:hover {
  filter: brightness(1.05);
}
/* subtle footer-style text via form shadow area */
#login::after {
  content: "Segurança • inteligência • resultados";
  display: block;
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.38);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}


#login::after {
  content: "Segurança • inteligência • resultados";
  display: block;
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.38);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}