Blazor css multiple styling for same element type

I need to implement different styles for one type of element in my project's page. But I am not able to have more than one fully functional styling.

In this example I have my PartPage.razor with its PartPage.razor.css. and I am implementing two identical styles with different naming, trying to get the same result while implementing through different style names:

PartPage.razor

@page "/part"<th><label class="form-label-another-label">SomeLabel</label><label class="form-label">SomeLabel</label><input type="text" class="form-control" placeholder="SomeText" /><input type="text" class="form-control-another-control" placeholder="SomeText" /></th>

PartPage.razor.css

.form-label{    color: aqua}.form-label-another-label {    color: aqua }.form-control {    color: #077df2;    background: #f2f0f0;}.form-control-another-control {    color: #077df2;    background: #f2f0f0;}

and this is what it does in the app:blazor app

It seems like it works allright for text adjustment, but not for the form control. Why is that? Is there a way how to have two stylings for same element?

The css is correctly connected to the razor page as this:page css