Controlling the datepicker calendar margin off of the date field with JQuery

I'm working with the Bootstrap Datepicker Plugin and I noticed the datepicker calendar' arrow for the dropdown overlaps the date field by at least 3 pixels. See image below. I thought of giving the main calendar container ( the dropdown that contains the calendar and the arrow by css pseudoclass ::after) a margin-top:5px; But no cigar. Basically because the javascript overwrites it. I looked for any fallback options in the documentation and nothing of the like. So I am assuming I am going to need a custom jQuery to manipulate the calendar in the DOM and correct the top:##px by -+5px depending on whether is opening top or bottom.

EDIT I also tried overwriting the top:##px; and giving it an extra 5px and an !important so that it actually overwrite it, but the problem with that is that the top positioning must be handled at the DOM according to the position of the datepicker field control otherwise, all datepickers will show in the same spot.

This image shows the output

The Bootstrap DatePicker Documentation can be found here

And the code I have in looks like this:

<div class="form-group">
    <label class="control-label">Date Of Birth</label>
    <div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
         <input type="text" class="form-control">
         <span class="input-group-addon">
             <i class="fa ion-calendar"></i>
         </span>
    </div>
</div>

$('.date').datepicker({
    todayHighlight: true,
    autoclose: true
});

Very simple.

Here is an image of the inspector and you can see the postion top value added by the JS.

Any idea on how to bring that sucka down?

Here is a CODEPEN with my problem