/*----------------------------------------------*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    border: none;
    height: 24px !important;
    line-height: 24px !important;
    /*border-radius: 0 4px 4px 0; */
    border-bottom: 1px solid #d2d2d2;
    background-position: center bottom;
}

input {
    border: 0;
    height: 24px;
    line-height: 24px !important;
    background-image: -webkit-linear-gradient(#d2d2d2, #d2d2d2);
    background-image: linear-gradient(#d2d2d2, #d2d2d2);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom;
}

    input:focus, input:-webkit-autofill:focus {
        background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#d2d2d2, #d2d2d2);
        background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#d2d2d2, #d2d2d2);
        -webkit-animation: input 0.5s forwards;
        animation: input 0.5s forwards;
        box-shadow: none;
        outline: 0;
        background-size: 0% 2px;
    }

@-webkit-keyframes input {
    0% {
        background-size: 0% 2px, 100% 2px;
    }

    100% {
        background-size: 100% 2px, 100% 2px;
    }
}

@keyframes input {
    0% {
        background-size: 0% 2px, 100% 2px;
    }

    100% {
        background-size: 100% 2px, 100% 2px;
    }
}