<style>
    /* .main {
        width: 73%;
        height:20%;
        margin: 40px auto;
    }

    /* Bootstrap 4 text input with search icon

    .has-search .form-control {
        padding-left: 2.375rem;
    }

    .has-search .form-control-feedback {
        position: absolute;
        z-index: 2;
        display: block;
        width: 2.375rem;
        height: 2.375rem;
        line-height: 2.375rem;
        text-align: center;
        pointer-events: none;
        color: #aaa;
        border: #000
    }

    .card {
        transition: 1s;
    }

    #inner-card:hover {
        background: whitesmoke;
        /* font-style: oblique;
        transform:translateY(5px)
    }

    .center {
        margin-left: auto;
        margin-right: auto;
    }

    .card-footer {
        clear: both;
        position: relative;
        height: 40px;
        /* margin-top: -200px;
        background: PapayaWhip;
    }

    .a, #a {
        /* font-style:oblique;
        color: cadetblue;
    }

    #nomor {
        width:20px;
    }

    #perda {
        width:40px;
    }

    #form {
        /* background-image:url('/frontend/img/baner-hukum.jpg');
        padding-left: 60px;
        padding-right: 60px;
        padding-top:40px;
        padding-bottom:40px;
        width:100%;
    } */

    /* codepen search  */

    /* bbootstrap search */
    /* body{
				background: #eee;
			}

			.input-group-overlay {
position: relative;
width: 100%;
}


.mt-100{

	margin-top:100px;
}
.form-control {
    display: block;
    width: 100%;
    height: 47px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.input-group-append-overlay {
    right: 0;
}

.input-group-append-overlay, .input-group-prepend-overlay {
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 5;
}

.input-group-text {
    border: 0;
    background-color: transparent;
}

.input-group-text {

    display: flex;
    align-items: center;
    padding: .625rem 1rem;
    margin-bottom: 2px;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4b566b;
    text-align: center;
    white-space: nowrap;
    border-radius: .3125rem;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    outline: 0;
     box-shadow: 0 0 0 0rem rgba(0,123,255,.25) !important;
}


.input-group-text i{

	font-weight: 500; */
}
/*  end */

/* search sec  */
/*search box css start here*/
.search-sec{
    padding: 2rem;
}
.search-slt{
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #55595c;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    height: calc(3rem + 2px) !important;
    border-radius:0;
}
.wrn-btn{
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    height: calc(3rem + 2px) !important;
    border-radius:0;
}
@media (min-width: 992px){
    .search-sec{
        position: relative;
        top: -114px;
        background: rgba(26, 70, 104, 0.51);
    }
}

@media (max-width: 992px){
    .search-sec{
        background: #1A4668;
    }
}


    </style>
<div class="container">
{{-- <div class="" style="background-image:url('');"> --}}
{{-- <form action="{{ url('fperda/cariPerda')}}" method="post" class="" id=""> --}}
    @csrf
    <section class="search-sec">
        <div class="container">
            <form action="{{ url('fperda/cariPerda')}}" method="post" novalidate="novalidate">
                @csrf
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-4 col-md-3 col-sm-12 p-0">
                                <input type="text" name="cariPerda" class="form-control search-slt" placeholder="Judul Peraturan">
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-12 p-0">
                                <select class="form-control search-slt" id="exampleFormControlSelect1">
                                    @foreach ($dihs_opsi ?? [] as $key => $dih)

                                         <option value="{{ $key }}">{{ $dih }}</option>

                                   @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-12 p-0">
                                <input type="text" name="cariNomor" class="form-control search-slt" placeholder="Nomor Peraturan">
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-12 p-0">
                                <input type="text" name="cariTahun" class="form-control search-slt" placeholder="Tahun Peraturan">
                            </div>

                            <div class="col-lg-1 col-md-3 col-sm-12 p-0">
                                <button type="button" class=" btn btn-danger wrn-btn"> <i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

{{-- </form> --}}

      {{-- {!! $cariPerda->withQueryString()->links('pagination::bootstrap-4') !!} --}}

</div>
</div>