Using the latest of everything (12.0.1 Angular/CLI/IgniteUI/etc.).

I'm trying to style a bunch of components in a blue background:

• checkbox
• combo/dropdown
• button

I want them all to match:

• For the checkbox, I want the check, the box, and the text to be white and the fill of the checkbox to be a light blue (#00C7FE just an example).
• For the combo/dropdown, white fill and that light blue for the text/boxes/blocks signifying it is selected.
• For the button, similar to combo/dropdown. This is the easiest and I have already been able to modify it.

I also need the combo/dropdown to be on the same line as the text labeling it (start/end WW) and the current parameter from the scenario details to be selected, which isn't working, even using [(ngModel)]. Here's an image of what I have right now.

My current CSS: 

igx-checkbox {
    color: white;
}

button {
    color: #00C7FE !important;
    background-color: white;
    margin: 10px;
}

igx-combo {
    color: #00C7FE !important;
    background-color: white;
}

I've tried styling by a bunch of different features I can see when I inspect the checkbox and combo, but none of them seem to have any affect.

My current HTML:

<div class="container-fluid" *ngIf="scenario && scenario.name && scenario.name.length > 0">
    <div class="row bg-primary text-white">
        <div class="col-sm-1"></div>
        <div class="col-sm-3 d-inline-block">
            Scenario: {{scenario.name}} <br/> Families: {{scenario.families}} <br/> Start WW:
            <igx-combo *ngIf="scenario.active == 'Active' && !scenario.locked && scenario.scenarioType != 'Actual'" [(ngModel)]="scenario.startWw" [data]="workweeks" [igxFocus]="true"></igx-combo>
            {{scenario.active !== 'Active' || scenario.locked || scenario.scenarioType == 'Actual' ? scenario.startWw : ''}}
        </div>
        <div class="col-sm-4 d-inline-block">
            <igx-checkbox [checked]="scenario.locked" labelPosition="before">Locked: </igx-checkbox>
            <br/> Facilities: {{scenario.facilities}} <br/> END WW:
            <igx-combo *ngIf="scenario.active == 'Active' && !scenario.locked && scenario.scenarioType != 'Actual'" [(ngModel)]="scenario.endWw" [data]="workweeks" [igxFocus]="true"></igx-combo>
            {{scenario.active !== 'Active' || scenario.locked || scenario.scenarioType == 'Actual' ? scenario.endWw : ''}}
        </div>
        <div class="col-sm-3 d-inline-block">
            <igx-checkbox [checked]="scenario.private" labelPosition="before">Private: </igx-checkbox>
            <br/>
            <button *ngIf="scenario.active == 'Active' && !scenario.locked && scenario.scenarioType != 'Actual'" igxButton (click)="updateHorizon()">Update Horizon</button>
        </div>
    </div>
</div>

I'm having a similar issue with advanced/excel filtering in removing the blaring pink that shows up everywhere. I'm hoping you guys can give me a way to change it to match the theme of the app I'm building. Those checkboxes don't work for me there, either. Everything else in that frame is fine, though.