.form-control {
    @include form-input($fs: var(--fs-14), $color: #9199A1, $py: 0.75rem, $max_width: rem(600px), $mx: auto, $border-color: #EDEAE9, $radius-size: 0.625rem);

    @include focus {
        background: white;
        box-shadow: none !important;
        border: 1px solid #4c4cf1 !important;
        border-radius: 0.625rem;
        box-sizing: border-box !important;
        line-height: unset !important;

        ~.search-icon {
            background: var(--frmx_brand_color);
            --search-icon: var(--clr-white);
            .dashicons {
                color: #fff;
            }
        }
    }
}

.easydocs-search-form {
    position: relative;
    max-width: rem(600px);
    flex: 1;
    @include margin(mx, auto);

    .search-icon {
        position: absolute;
        -webkit-transition: 0.3s ease-out;
        transition: 0.3s ease-out;
        left: 20px;
        transform: translateY(50%);
    }

    input#bbpc-search {
        color: #9199a1;
        padding: 10px 15px 10px 48px;
        border: 1px solid #EDEAE9;
        box-sizing: border-box;
        line-height: unset;
        box-shadow: 0 1px 1px rgba(11, 80, 115, 0.3), 0 1px 5px rgba(60, 64, 67, 0.1);
        background: rgb(255 255 255 / 35%);
        border-radius: 25px;
        &:hover {
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
        }
        &:focus {
            background: #fff;
            color: #242729;
            outline: none;
        }
    }
    @media screen and (max-width: 1440px) {
        margin: 0 10px;
    }
}