.material-input {
    position: relative;
}

textarea {
    resize: none;
}

.material-input > input:disabled {
    color: gray;
}

.material-input > input,
.material-input > textarea {
    background: none;
    color: black;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #c6c6c6;
}

    .material-input > input:focus,
    .material-input > textarea:focus {
        outline: none;
    }

        .material-input > input:focus ~ label, input:valid ~ label,
        .material-input > input:disabled ~ label,
        .material-input > textarea:focus ~ label,
        .material-input > textarea:valid ~ label,
        .material-input > textarea:disabled ~ label {
            top: -14px;
            font-size: 12px;
            color: #2196F3;
        }

        .material-input > input:focus ~ .material-input-bar:before,
        .material-input > textarea:focus ~ .material-input-bar:before {
            width: 100%;
        }

    .material-input > input[type=password] {
        letter-spacing: 0.3em;
    }

.material-input > label {
    color: black;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 300ms ease all;
}

.material-input-bar {
    position: relative;
    display: block;
    width: 100%;
}

    .material-input-bar:before {
        content: "";
        height: 2px;
        width: 0;
        bottom: 0px;
        position: absolute;
        background: #2196F3;
        transition: 300ms ease all;
        left: 0%;
    }