Angular MDB Bootstrap 4 Date Picker doesn't apply the styles

Expected behavior I expect to be able to style the mdb-date-picker input element to change the font size, paddings and general look after adding specifically targeting the datepicker either through the component.scss file of the component using the datepicker or the general scss file of the application.

Actual behavior The styles are not applied and upon the inspection of the element in the browser, it is discovered that the css is not being parsed to the element. It is like the css file was never added. I have used ::ng-deep, added the css styles to the tags within the index.html but it still didn't detect or read the style. The baffling thing however, is that the element in the browser reads the style and the style is applied but the main input under mdb-date-picker never reads the style and is never applied.

Resources (screenshots, code snippets etc.) Here is the component itself:

<div class="md-form mt-0">
      <mdb-date-picker [inline]="true" formControlName="dob" [placeholder]="'DOB (mm/dd/yyyy)'" mdbInput
        [options]="myDatePickerOptions"></mdb-date-picker>
      <mdb-error *ngIf="f.dob.errors && f.dob.dirty || f.dob.touched && f.dob.invalid">
        <span *ngIf="f.dob.errors?.required">Your Date of Birth is required </span>
      </mdb-error>
    </div>

In the component.scss file of the component with the date picker, I used the following styles but none of them were applied to the element in the browser:

mdb-date-picker input.mydp-date.form-control {
    padding: 30px !important;
}

The style above was also added to the root styles.scss and index.html file of the project but it didn't work.

I also checked the API tab of the documentation for date picker and no styling methods were specified.

How do I apply the styles? Thank you