<script>

</script>
<style>
    #modal-add-habit_profile {
        overflow-y: scroll;
    }
</style>
<div class="modal fade" id="modal-add-habit_profile" name="modal-add-habit_profile" role="dialog" aria-hidden="true">
    <form role="form" id="habit_form" name="habit_form" action="#" method="post">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="widget-header">
                    <h5 class="widget-title">Add Habit</h5>
                    <div class="widget-toolbar">
                        <div class="widget-menu">
                            <a href="#" class="close" data-action="close" data-dismiss="modal">
                                <i class="ace-icon fa fa-times"></i>
                            </a>

                        </div>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="role">habit Name</label>
                        <input type="hidden" class="form-control" name="habit_id" id="habit_id" value="" required />
                        <input type="text" class="form-control" name="habit" id="habit">

                    </div>
                    <div class="widget-toolbox padding-8 clearfix">
                        <button type="button" class="btn btn-info btn-sm save_button" onclick="validate();"><i class="ace-icon fa fa-floppy-o bigger-110"></i>Save </button>
                        <button type="button" class="btn btn-danger  btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times bigger-110"></i>Cancel</button>
                    </div>

                </div>
            </div>
    </form>
</div>