Expected behavior Update the styling like border radius for a input, select, calendar input or anything thats within an mdb-form-control

Actual behavior current if i add css to the mdb-form-control to update the border-radius: 2px nothing happens. it still shows the rounded radius. I was able to get the input to work by adding a class to the input and changing it but I cannot get it to work for the mdb-select and mdbInput for calendar

Resources (screenshots, code snippets etc.) HTML Calendar

<mdb-form-control class="audit-log-bg"> <input mdbInput [mdbDatepicker]="toDatepicker" type="text" class="form-control form-input" id="toDatepicker" placeholder="Select end date" formControlName="endDate" /> <mdb-datepicker-toggle [mdbDatepicker]="toDatepicker"></mdb-datepicker-toggle> <mdb-datepicker [format]="'mm/dd/yyyy'" [inline]="true" #toDatepicker (dateChanged)="onDatechanged('end_date')"></mdb-datepicker> </mdb-form-control>

HTML Select

<mdb-form-control class="audit-log-bg"> <mdb-select formControlName="type" (selected)="updateFilter('action_type')" class="form-input"> <mdb-option *ngFor="let option of actionOptions" [value]="option.value">{{option.label}}</mdb-option> </mdb-select> </mdb-form-control>

CSS

.form-input { border-radius: 2px!important }