body{ 
    box-sizing: border-box;
    color: #565656;
}

.roboto {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
}

.floating-label {
    position: absolute;
    top: 0.6rem;
    left: 0.75rem;
    font-size: 1rem;
    color: gray;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
  }

  .input-wrapper:focus-within .floating-label,
  .input:not(:placeholder-shown) + .floating-label,
  .select:valid + .floating-label {
    top: -0.5rem;
    left: 0.65rem;
    font-size: 0.75rem;
    color: #2563eb; /* blue-600 */
    background: white;
    padding: 0 0.25rem;
  }

  /* .input, .select {
    padding-top: 1.25rem;
  } */

  select:invalid {
    color: gray;
  }

.text-xxs{
    font-size: 0.685rem; /* 10px */
}