Expected behavior

By adding the code postet below to my styles.scss I expect the code to overwrite the color of a mdb-select label, border & box-shadow, if its validationstatus is valid.

Actual behavior

The actual behaviour is that somehow my styles.scss gets compiled after the styles which come from the "mdb styles class". And because the "mdb styles class" also has !important i it, it overwrites my code.

Resources (screenshots, code snippets etc.)

styles.scss:

$yodafontgreen: rgb(154, 168, 4);

mdb-select.validate-success.ng-valid.ng-touched label,
mdb-select.validate-success.ng-valid.ng-touched + label {
  color: $yodafontgreen !important;
}

mdb-select.validate-success.ng-valid.ng-touched div.multiple,
mdb-select.validate-success.ng-valid.ng-touched div.single {
border-bottom: 1px solid $yodafontgreen !important;
box-shadow: 0 1px 0 0 $yodafontgreen !important;
}

source code of one of the over 200 mdb-select I use in my app

<div class="col-md-4 col-xs-12">
      <div class="md-form mt-0">
        <mdb-select mdbValidate [visibleOptions]="8" name="pdurationselect" [options]="PeriodDurationDefault"
              formControlName="moduleperiodduration">
          </mdb-select>
        <label>{{ Y.L('Period Duration') }}</label>
    </div>
</div>

screenshot of a mdb-select next to a standard inputfield, where the select has the default color and the inputfield has the color I want the mdb-select to have:

style of the inputfield validation:

input.form-control.validate-success.ng-valid.ng-dirty, 
input.form-control.validate-success.ng-valid.ng-touched,
.form-submitted input.form-control.validate-success.ng-valid {
  border-bottom: 1px solid $yodafontgreen !important;
  box-shadow: 0 1px 0 0 $yodafontgreen !important;
}

input.form-control.validate-success.ng-valid.ng-dirty + label, 
input.form-control.validate-success.ng-valid.ng-touched + label, 
.form-submitted input.form-control.validate-success.ng-valid + label {
  color: $yodafontgreen !important;
}

source code of the inputfield:

<div class="col-md-4 col-12">
    <div class="md-form mt-0">
        <input mdbInput mdbValidate type="number" name="inpperiod_overlap_factor"
            formControlName="moduleperiodoverlapfactor"
            id="inpperiod_overlap_factor" class="form-control">
        <label for="inpperiod_overlap_factor" class="">{{ Y.L('Period Overlapping [%]')}}</label>
    </div>
</div>

Using !important is bad, but I have no other choice since MDB uses !important for many of their styles including the mdb-select valid style, which is, as you can see in this case, pretty annoying.

Now my question: Is there a way to fix this / overwrite the MDB styling, or do I have to wait until MDB refactors its code so there are less !important in it?

Thanks in advance

Lukas