.principal-input {
  position: relative;
  width: 263px;
}

/* INPUT */
.input {
  border-radius: 6px !important;
  background: none;
  padding: 1rem;
  font-size: 1.2rem;
  color: rgb(53, 154, 104);
  transition: border 150ms cubic-bezier(0.4,0,0.2,1);
  width: 100%;
  height: 40px;
  border: 1px solid rgb(53, 154, 104);
}

/* LABEL */
.user-label {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #359a67;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  transform: translateY(-50%);
  transition: 150ms cubic-bezier(0.4,0,0.2,1);
  background-color: transparent;
}

/* EFECTO FOCUS (FUNCIONA CON EL DIV INTERMEDIO) */
.principal-input:focus-within .user-label {
  transform: translateY(-220%) translateX(-15px) scale(0.9);
  background-color: transparent;
  color: #359a67;
  padding: 0 .2em;
}

/* BORDE ACTIVO */
.principal-input:focus-within .input {
  outline: none;
  border: 1.5px solid #359a67;
}

/* CUANDO EL INPUT TIENE VALOR (OPCIONAL CON JS) */
.principal-input.filled .user-label {
  transform: translateY(-220%) translateX(-15px) scale(0.9);
  background-color: transparent;
  padding: 0 .2em;
}

/* QUITAR SPINNERS EN NUMBER */
.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input {
  -moz-appearance: textfield;
}