.inputok {
    width: 70%;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
.text-input, .text-input-tetel{
    border: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    padding: 8px;
    border-radius: 3px;
    width: 80%;
    outline: none;
    text-align: center;
    border-bottom: 3px solid grey;
    color: black;
}

.text-input:focus, .text-input-tetel:focus {
    border-bottom: 3px solid #1e7e34;
    transition:color 0.3s ease;
}
.text-input:focus::placeholder , .text-input-tetel:focus::placeholder{
    color: transparent;
}
.text-input::placeholder, .text-input-tetel::placeholder {
    color: black;
    transition: color 0.3s ease;
    font-size: 16px;
    text-align: center;
}

.inputok label{
    position:absolute;
    top:10px;
    left:80px;
    font-size:16px;
    color:#000;
    pointer-event:none;
    transition: all 0.5s ease-in-out;
}
.inputok input:focus ~ label,
.inputok input:valid ~ label{
    top:-12px;
    font-size:12px;

}

@media screen and (max-width: 900px) {

    .inputok label{
        position:absolute;
        top:10px;
        left:25px;
    }
    .inputok input:focus ~ label, .inputok input:valid ~ label{
        top:-12px;
        font-size:12px;

    }
    .inputok  {
        padding: 10px;
    }



}