:root {
    --primary-color: #007bff;
}


.input-effect {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}


.input-effect input {
    border: 0;
    padding: 4px 0;
    border-bottom: 1px solid #ccc;
    background-color: transparent;
    z-index:2;
    border-radius: 0px;
}


.input-effect input ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: 0.4s;

}
.input-effect input:focus ~ .focus-border,
.has-content .focus-border {
    width: 100%!important;
    transition: 0.4s!important;
}

.input-effect input ~ label {
    position: absolute;
    left: 0;
    width: 100%;
    top: 9px;
    color: #aaa;
    transition: 0.3s;
    z-index: 1;
    letter-spacing: 0.5px;
}

.input-effect input:focus ~ label,
.has-content label {
    top: -16px!important;
    font-size: 12px!important;
    color: $primary!important;
    transition: 0.3s!important;
}

.input-effect input:focus, .input-effect input:active {
    background-color:transparent;
    outline:0px !important;
    box-shadow:none !important;
    border:none;
}