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