@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }
  input[type=date]:invalid::-webkit-datetime-edit {
    color: transparent;
  }
  .wrapper{
    width: 100%;
  }
  .wrapper .input-data{
    height: 40px;
    width: 100%;
    position: relative;
  }
  .wrapper .input-data input{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 17px;
    border-bottom: 2px solid silver;
  }
  .input-data input:focus ~ label,
  .input-data input:not([value=""]) ~ label{
    transform: translateY(-20px);
    font-size: 15px;
    color: #4158d0;
  }
  .wrapper .input-data label{
    position: absolute;
    bottom: 15px;
    left: 0;
    color: rgb(128, 128, 128);
    pointer-events: none;
    transition: all 0.3s ease;
  }
  .input-data .underline{
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 0;
  }
  .input-data .underline:before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    /* background: #4158d0; */
    /* background: lightgrey; */
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
  }
  .input-data input:focus ~ .underline:before,
  .input-data input:valid ~ .underline:before{
    transform: scaleX(1);
  }