.content{

    width: 330px;
    border-radius: 10px;
    margin: 55px;
            }

.content .text {
        font-size: 33px;
        font-weight: 600;
        margin-bottom: 35px;
        color: #595959;
}

.content .field{
    height: 50px;
    width: 100%;
    display: flex;
    position: relative;
}
.field input {
    background: #fff;
    color: #525865;
    border-radius: 4px;
    border: 1px solid #d1d1d1;
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
    font-family: inherit;
    font-size: 1.1em;
    line-height: 1.45;
    outline: none;
    padding: 0.4em 1.0em 0.5em;
    -webkit-transition: .18s ease-out;
    -moz-transition: .18s ease-out;
    -o-transition: .18s ease-out;
    transition: .18s ease-out;
    width: 100%;
  }
 .field input:hover {
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
  }
  .field input:focus {
    color: #833488;
    border: 1px solid #B8B6B6;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
  }
.field:nth-child(2){
    margin-top: 20px;

}

.field span{
    position: relative;
    width: 40px;
    line-height: 40px;
    color: #a763ab;
    font-size: 19px;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);

}

.field label{
    position: absolute;
    top: 50%;
    left: 55px;
    pointer-events: none;
    color: #666666;
    transform: translateY(-50%);
}

.field input:valid ~ label {
    opacity: 1;
}