Hello,

I am currently going through the Lightning trailhead and I am building the expense app. When an expense is marked as reimbursed it's supposed to get a green background thanks to the .slds-theme--success class. However this style looks like it is being overridden by the .slds-card white background. Has anyone experienced this error? I could fix it by adding something like this to the component.
 

/*.slds-theme--success.THIS {
    background-color: rgb(4, 132, 75)!important;
}*/

But that honestly feels like cheating. Has anyone faced this issue. I've copied and pasted the code straight from Trailhead but it's not working as expected. Here is the component code and a screenshot illustrating the problem.

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="formatdate" type="Date"/>
    <aura:attribute name="expense" type="Expense__c"/>
 
 
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

Thanks in advance!