Search Widget Module CSS - Beaver Builder

/* CSS by BeaverHero.com */
/* Insert to Appearance > Customize > Additional CSS (Custom CSS) OR Layout CSS & JavaScript > CSS */
/* Detail: https://beaverhero.com/search-widget-module-css-bb */

/* 1. SEARCH FIELD */
.widget .search-field {
    background-color: grey;
    font-size: 25px;
    font-family: Roboto, sans-serif;
    text-transform: uppercase;
    border-color: red;
    border-width: 3px;
    border-style: solid;
    border-top-left-radius: 20px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0;
}
.widget .search-field::placeholder {
    color: #fff;
}
.widget .search-field:focus {
    background-color: #fff;
    border-color: #fff;
}

/* 2. SEARCH SUBMIT */
.widget input.search-submit {
    display: block;
    background-color: #B42208;
    color: #fff;
    font-weight: 400;
    font-family: Monsterrat, sans-serif;
    font-size: 20px;
    border-color: white;
    border-width: 2px;
    border-style: dotted;
    border-top-right-radius: 32px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 32px;
    border-bottom-left-radius: 50px;
    padding-top: 50px;
    padding-bottom: 10px;
    padding-left: 70px;
    padding-right: 200px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-right: 30px;
    animation: all 0.25s;
}
.widget input.search-submit:hover {
    background-color: #f8f8f8;
    color: #222;
    border-color: violet;
}

/* 3. CENTER SEARCH BUTTON */
.widget input.search-submit {
    margin: 0 auto;
}

/* 4. Inline Search Field & Button */
.widget .search-field {
    width: 70%;
    float: left;
}