Form Style Three

Style any form you like, as seen in the image here, by adding form-style-three to any form component you wish. 

Step 1

Add the following code to the header of your app.

<style>
    .form-style-three .af-form h3 {
        font-weight: 500;
        font-size: 2rem;
        margin-left: -3rem;
        margin-right: -3rem;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        color: #ffffffd1;
        margin-top: 0px;
        padding: 4rem 1rem 3rem 3rem;
    }

    .form-style-three .form-submit.row {
        margin-left: -3rem;
        margin-right: -3rem;
        padding-left: 14px;
        padding-top: 28px;
    }

    .form-style-three .af-form form {
        padding: 3rem;
        background: #12263f;
        border-radius: 1rem;
        display: grid;
        padding-top: 0rem;
        webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

    .form-style-three span.lbl {
        font-weight: 400;
        color: #ffffffd1;
    }

    .form-style-three .form-control {
        border-radius: 0.5rem;
        box-shadow: none;
        color: #fff;
        border: 0 !important;
        background-color: rgba(255, 255, 255, .15)
    }

    .form-style-three .date-input-group .btn.btn-default {
        background-color: #35465c;
    }

    .form-style-three .af-form-submit {
        border-radius: 1rem;
        color: #fff;
        border-color: #0c9;
        background-color: #0c9;

    }

    .form-style-three .af-form-submit:hover {
        color: #fff;
        border-color: #009973;
        background-color: #00a67c;
    }
</style>

Step 2

Add the CSS selector "form-style-three" to any form you want to style.