.text-label-top {
    position: relative;
    /*padding: 15px 0 0;*/
    /*margin-top: 10px;*/
    width: 100%;
}

.text-label-top-input {
    font-family: inherit;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #9b9b9b;
    outline: 0;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.5s;
}

.text-label-top-input::placeholder {
    color: transparent;
}

.text-label-top-input:placeholder-shown ~ .text-label-top-label {
    cursor: text;
    top: 3px;
}

.text-label-top-label {
    position: absolute;
    top: -10px;
    display: block;
    transition: 0.5s;
    color: dimgrey;
}

.text-label-top-input:focus {
    border-width: 2px;
    border-color: rgba(42, 187, 155, 0.7);
    border-image-slice: 1;
}

    .text-label-top-input:focus ~ .text-label-top-label {
        position: absolute;
        top: -10px;
        display: block;
        transition: 0.2s;
        font-size: 0.8rem;
        color: dimgrey;
    }

/* reset input */
.text-label-top-input:required, .form__field:invalid {
    box-shadow: none;
}

.text-label-top-span {
    margin-top: 10px;
}

.text-label-top-label-span {
    position: absolute;
    top: -17px;
    display: block;
    transition: 0.5s;
    color: dimgrey;
}

/* demo */
/*body {
    background-color: #222222;
}*/