/* Login /acceso: white form panel to the right of the photo */

html.bg-ink,
html.bg-ink body {
  background: #fff;
  color: #050507;
}

main.grid > aside + div {
  background: #fff !important;
  color: #050507;
}

main.grid > aside + div h1 {
  color: #050507 !important;
}

main.grid > aside + div label {
  color: rgba(5, 5, 7, 0.62) !important;
}

main.grid > aside + div input {
  color: #050507 !important;
  background: #f5f7fa !important;
  border-color: rgba(5, 5, 7, 0.14) !important;
}

main.grid > aside + div input::placeholder {
  color: rgba(5, 5, 7, 0.35) !important;
}

main.grid > aside + div form > button[type="button"] {
  color: rgba(5, 5, 7, 0.45) !important;
}

main.grid > aside + div form > button[type="button"]:hover {
  color: #050507 !important;
}

main.grid > aside + div p {
  color: #050507 !important;
}

main.grid > aside + div p button {
  color: #17A3AF !important;
}

main.grid > aside + div p button:hover {
  color: #146b52 !important;
}

main.grid > aside + div .h-px,
main.grid > aside + div > div.h-px {
  background: rgba(5, 5, 7, 0.1) !important;
}

main.grid > aside + div p.text-\[0\.65rem\],
main.grid > aside + div p[class*="uppercase"] {
  color: rgba(5, 5, 7, 0.4) !important;
}

main.grid > aside + div .grid button {
  background: #fff !important;
  border-color: rgba(5, 5, 7, 0.12) !important;
}

main.grid > aside + div .grid button:hover {
  border-color: rgba(5, 5, 7, 0.28) !important;
}

main.grid > aside + div .grid button[aria-pressed="true"] {
  border-color: #17A3AF !important;
}

main.grid > aside + div .grid button > span:last-child {
  color: #050507 !important;
}

main.grid > aside + div .grid button > span:first-child {
  background: rgb(23 163 175 / 0.1) !important;
}

main.grid > aside + div .trax-logo-on-dark {
  display: none !important;
}

main.grid > aside + div .trax-logo-on-light {
  display: block !important;
}

main.grid > aside + div form > button[type="submit"] {
  background: #012F37 !important;
  color: #fff !important;
}

main.grid > aside + div form > button[type="submit"]:hover {
  background: #013844 !important;
}

@media (min-width: 1024px) {
  main.grid > aside > .relative.flex.h-full.flex-col {
    justify-content: center !important;
  }

  main.grid > aside > .relative.flex.h-full.flex-col > a {
    position: absolute;
    top: 2rem;
    left: 2rem;
  }

  main.grid > aside .max-w-sm {
    max-width: 28rem;
    transform: translateY(-8%);
  }

  main.grid > aside .max-w-sm > p:first-child {
    font-size: 0.84rem !important;
    letter-spacing: 0.2em !important;
  }

  main.grid > aside .max-w-sm > p:last-child {
    margin-top: 0.85rem !important;
    font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
  }
}

@media (min-width: 1280px) {
  main.grid > aside > .relative.flex.h-full.flex-col > a {
    top: 2.5rem;
    left: 2.5rem;
  }
}