body {
      display: grid;
      grid-template-columns: auto minmax(min-content, 50%);
      height: auto;
      /* padding: 8px; */
      background-color: #fcfcfd;
      height: 100vh;
      padding: 1rem;
      font-family: "Open Sans", sans-serif;
      font-optical-sizing: auto;
      font-variation-settings:
          "wdth" 100;
      gap: 1rem;
  }

  * {
      user-select: none;
      -moz-user-select: -moz-none;
  }

  #cadastro {
      font-size: smaller;
      text-align: center;
      width: 100%;
  }

  button#secundario {
      background-color: rgb(231, 233, 243);
      color: var(--primary);
      border-color: var(--border);
  }

  #ou {
      display: flex;
      align-items: center;
      font-size: smaller;
      gap: 12px;
      color: lightslategray;
  }

  #ou::before,
  #ou::after {
      content: "";
      flex: 1;
      height: 1px;
      background-color: lightslategray;
  }

  button:disabled {
      cursor: not-allowed;
      background-color: var(--muted) !important;
      color: var(--muted-foreground) !important;
  }

  body>div#login {
      display: flex;
      flex-direction: column;
      justify-items: center;
      justify-content: center;
      align-items: center;
      gap: 1rem;
  }

  label {
      font-size: smaller;
  }

  form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }

  div#login>* {
      width: 60%;
  }

  h3 {
      font-size: medium;
      color: dimgrey;
      font-weight: 400;
  }

  #ajuda {
      font-size: smaller;
      color: var(--muted-foreground);
  }

  a {
      text-decoration-line: none;
      color: var(--secondary);
  }

  body img#zdoc {
      filter: brightness(0) invert(1);
      width: 3rem;
      translate: 0 -0.19rem;
  }

  #powered-by {
      position: relative;
      font-weight: 600;
      gap: 0.8ch;
      display: inline-flex;
      flex: auto;
      flex-direction: row;
      align-items: center;
      height: fit-content;
  }

  input {
      width: 100%;
      background-color: var(--input);
      border: 1px solid rgb(0, 0, 0, 0.1);
      border-radius: 0.5rem;
      padding: 0.5rem 1rem 0.5rem 1rem;

  }

  input:focus {
      outline: var(--primary) 2px solid;
      /* box-shadow:
          0 0 0 2px var(--primary),
          0 0 12px var(--secondary); */
  }


  input.input-validation-error:placeholder-shown {
      outline: #ef4444 2px solid;
  }

  .validation-summary-errors ul {
      margin: 0;
  }

  .validation-summary-valid {
      display: none;
  }

  div.abaixo-input {
      font-size: smaller;
      display: inline-flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
  }

  div.abaixo-input>*:not(:only-child) {
      margin-top: 0.3rem;
  }

  button {
      cursor: pointer;
      width: 100%;
      border: 1px solid rgb(0, 0, 0, 0.1);
      border-radius: 0.5rem;
      padding: 0.5rem 1rem 0.5rem 1rem;
      background-color: var(--primary);
      color: var(--secondary-foreground);
      text-transform: uppercase;
      font-weight: 700;

  }

  footer {
      color: white;
      position: relative;
      width: 100%;
      font-weight: bold;
      background: #303D94;
      background: linear-gradient(45deg, rgba(0, 12, 87, 1) 0%, rgba(48, 61, 148, 1) 100%);
      border-radius: 1rem;
      overflow: hidden;
      backdrop-filter: blur(100%);
      background-color: rgba(255, 255, 255, 0.5);
  }

  footer .conteudo {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      justify-items: start;
      height: 100%;
      padding: 2rem;
  }

  footer #back {
      scale: 2;
      overflow: hidden;
      position: absolute;
      inset: 0;
      pointer-events: none;
      user-select: none;
      mask-image: linear-gradient(to bottom, white, transparent);
      -webkit-mask-image: linear-gradient(to bottom, white, transparent);
  }

  footer #cta {
      font-size: xx-large;
      text-transform: uppercase;
      font-weight: 200;
      letter-spacing: 0.5ch;
  }

  footer #back>* {
      left: 80%;
      top: 20%;
      position: absolute;
      border-radius: 9999px;
      border: 1px solid var(--secondary);
      filter: blur(20px);
      background: rgb(from var(--secondary) r g b / 0.25);
      box-shadow:
          0 10px 15px -3px rgb(0 0 0 / 0.1),
          0 4px 6px -4px rgb(0 0 0 / 0.1);
      transform: translate(-50%, -50%) scale(1);
      animation: ripple 4s ease-in-out infinite alternate;
  }

  #particle-canvas {
      width: 100%;
      height: 100%;
      position: absolute !important;
      bottom: 0;
      z-index: 0;
  }

  #particle-canvas>* {
      background-color: transparent !important;
  }

  @keyframes ripple {
      0% {
          transform: translate(-50%, -50%) scale(1);
          opacity: inherit;
      }

      100% {
          transform: translate(-50%, -50%) scale(1.8);
          opacity: 0;
      }
  }