<style>
    .spinner-icons > span{
        position: absolute;
        top: 5px;
        display: block;
        /* bottom: 0; */
        width: 25%;
        height: 35px;
        background: rgb(109,92,174);
        line-height: 2.5;
        text-align: center;
        color:white
            /*font-size: 21px;*/
            /*font-weight: bold;*/
    }
    .split-icons > span{
        top: 0 !important;
        width: 15% !important;
        background-color: #3b4752 !important;
    }
    .spinner-icons >span:first-child{
        /*        content: "-";*/
        left:0;
    }
    .spinner-icons >span:last-child{
        content: "+";
        right:0;
    }
    .spinner-icons{
        position:relative;
    }
    .spinner-icons input{
        padding-left:25%;
        padding-right:25%;
    }
    .op_prod_btn{
        height: 85px;
        padding:3% !important;
        overflow:hidden;
    }
    .header-button.spinner-icons.option-spinner{
        border:none !important;
    }
    .option-spinner{
        /*margin-right: 23%;*/
        margin-top:2%;
    }
    #op_main_div .btn{
        white-space: normal;
    }
    .op-spinner{
        width:100% !important;
    }
    #product_options_modal hr{
        margin-top:0px !important;
        margin-bottom:10px !important;
    }
</style>
<div class="modal fade" id="product_options_modal" data-backdrop="static"  data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content-wrapper">
            <div class="modal-content" style="max-height: calc(100vh - 40px);overflow: auto;">
                <div class="modal-header clearfix text-left" style='padding-top:0;'>
                    <h5 class="add-label bold"></h5>
                    <div id="option_alert"></div>
                </div>
                <div class="modal-body">

                    <div class="row form-group" style="margin:0;">
                        <div class="col-md-1">
                            <label style="line-height: 48px;"><?php echo CommonLanguage::getMessage('Quantity') ?></label>

                        </div>
                        <div class="col-md-2" >
                            <div class="option-spinner op_main_qty_div header-button spinner-icons" style="width:100%;">
                                <span class="fa fa-minus"></span>
                                <input type="text" id="op_main_qty"  class=" form-control borderStyle m-t-5 common-print"   >
                                <span class="fa fa-plus"></span>
                            </div>
                            <!--<input id="op_main_qty" class="form-control" type="number"/>-->
                        </div>
                    </div>
                    <div class="row ">

                        <div id="op_main_div">
                            <div class='col-md-12 op-block'>
                                <h5 style="margin:0;"><span class='op-title'><?php echo CommonLanguage::getMessage('choose_items_nb',null,false) ?></span></h5>
                                <hr>
                                <div class='op-block-det'>

                                </div>
                                <!--<br>-->

                            </div>


                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="cancel_btn" class="col-md-3 btn btn-danger  " data-dismiss="modal"><?php echo CommonLanguage::getMessage('Cancel') ?></button>
                    <button type="button" id="next_btn" class="col-md-3 btn btn-primary pull-right" ><?php echo CommonLanguage::getMessage('next') ?></button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class=" temp-op-div op-div btn-group col-xs-12 col-sm-6 col-md-2  m-b-10 hidden">

    <button type="button" class="btn btn-primary white w-100  op_prod_btn text-center full-width"  >

        <span class=" font-montserrat  op-prod-name" ></span>
    </button>
    <div class="option-spinner header-button spinner-icons">
        <span class="fa fa-minus"></span>
        <input type="text"  class="op-spinner form-control borderStyle m-t-5 common-print" value="0" placeholder="Persons" style="width:90px;">
        <span class="fa fa-plus"></span>
    </div>
</div>