.line{
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 59px;
        width: 300%;
        transform: translateX(-66.66%);
        opacity: 0.4;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMjAwIDYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMyMTIxMjEiIGQ9Ik0wLDU2LjVjMCwwLDI5OC42NjYsMCwzOTkuMzMzLDBDNDQ4LjMzNiw1Ni41LDUxMy45OTQsNDYsNTk3LDQ2Yzc3LjMyNywwLDEzNSwxMC41LDIwMC45OTksMTAuNWM5NS45OTYsMCw0MDIuMDAxLDAsNDAyLjAwMSwwIi8+PC9zdmc+
        );
        background-position: center bottom;
        pointer-events: none;
        transition: transform 0s cubic-bezier(0, 0.25, 0.5, 1), opacity 0.4s;
}

.form-control:focus +.line{
        transform: translateX(0);
        transition-duration: 0.8s, 0.4s;
        opacity: 1;
}