@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap");

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.div-top {
	margin-top: 5em;
}

.div-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  background: #040404;
}

label {
  position: relative;
}

label input {
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  color: #f9f9f9;
  background: transparent;

  padding: 1rem 3.2rem 1rem 1.2rem;
  min-width: 24rem;

  border-radius: 0.2rem;
  border: 2px solid #7a7a7a56;

  transition: border-color 0.2s;
}

label input:focus {
  border-color: #ff4754;
}

label p {
  color: #f9f9f9;
  font-size: 1rem;
  user-select: none;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  margin-left: 0.8rem;
  padding: 0 0.4rem;

  background: #040404;

  transition: top 0.2s, font-size 0.2s, color 0.2s;
}

label .password-icon {
  display: flex;
  align-items: center;

  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  width: 1.2rem;

  color: #f9f9f9;
  transition: color 0.2s;
}

label .password-icon .feather-eye-off {
  display: none;
}

label .password-icon:hover {
  cursor: pointer;
  color: #ff4754;
}

label input:focus + p,
label input:not(:placeholder-shown) + p {
  top: 0;
  font-size: 0.9rem;
  color: #ff4754;
}

label input:not(:focus) + p {
  color: #7a7a7a56;
}