@import url("/demo/joker/login.css");

:root {
  --purple: #005596;
  --purple-soft: #e8f1f8;
  --peach: #f2f6f9;
  --ink: #152a3b;
}

body {
  background:
    radial-gradient(circle at 13% 18%, rgba(227, 6, 19, .16), transparent 27%),
    radial-gradient(circle at 88% 82%, rgba(0, 85, 150, .18), transparent 30%),
    #eef4f8;
}

body::before { border-color: rgba(0, 85, 150, .22); }

.login-card {
  border-color: rgba(0, 85, 150, .18);
  box-shadow: 0 35px 90px rgba(0, 55, 100, .16);
}

.ina-brand {
  display: grid;
  gap: 10px;
  min-width: 210px;
  padding: 19px 22px;
  border-radius: 16px;
  color: #fff;
  background: #005596;
  box-shadow: inset 0 -5px 0 #e30613;
}

.ina-brand img {
  width: 150px;
  color: #fff;
}

.ina-brand span {
  color: rgba(255, 255, 255, .78);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.eyebrow { color: #e30613; }
.login-form input:focus {
  border-color: #005596;
  box-shadow: 0 0 0 4px rgba(0, 85, 150, .12);
}

.login-form button { background: #005596; }
.login-form button:hover { background: #e30613; }
.login-form button:disabled { cursor: wait; opacity: .65; }

@media (max-width: 620px) {
  .ina-brand { min-width: 180px; }
  .ina-brand img { width: 128px; }
}