Details Style 1

This is a solution to style your pages by adding "details-style-1" to any details component you wish.

Step 1

Add the following code to the header of your app.

<style>
    .details-style-1 {
        margin-top: 25px;
        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);
        padding: 15px;
        border-radius: 15px;
        background-color: white;
        position: relative;
    }

    .details-style-1 {
        padding-left: 25px
    }

    .details-style-1 .form-group:not(:last-child) {
        border-bottom: 1px solid #dbdfea;
        padding-bottom: 25px;
    }

    .details-style-1 .form-group .col-md-8 {
        text-align: right;
    }
</style>