/* txtPurpleIconPurpleBlue
   Textbox roxo. Ícone roxo, e azul depois de preenchido certo.
   Sem texto e sem foco: 52%. Em foco e preenchido: 86%. */
.txtPurpleIconPurpleBlue > div {
  z-index: 2;
}
.txtPurpleIconPurpleBlue svg {
  color: #b537f2;
  opacity: 0.52;
  filter: none;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.txtPurpleIconPurpleBlue input {
  border: 2px solid rgba(181, 55, 242, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.txtPurpleIconPurpleBlue:focus-within svg {
  color: #c45cf2;
  opacity: 0.86;
  filter: drop-shadow(0 0 4px rgba(181, 55, 242, 0.55));
}
.txtPurpleIconPurpleBlue:focus-within input {
  border-color: #b537f2;
  box-shadow: 0 0 20px rgba(181, 55, 242, 0.5);
}
.txtPurpleIconPurpleBlue.campo-ok:not(:focus-within) svg {
  color: #00d9ff;
  opacity: 0.86;
  filter: drop-shadow(0 0 4px rgba(0, 217, 255, 0.5));
}