CSS Style rules not being overridden if first in the list

So in my CSS file, I have some styles for some inputs:

div.playerForm input[type="text"], input[type="number"], input[type="submit"], input[type="date"], input[type="checkbox"] {
background-color: rgb(195, 59, 34);
font-weight: 900;
color: rgb(245, 240, 224);

border-color: rgb(245, 240, 224);
border-width: 0.8vw;
border-radius: 0.8vw;
border-style: inset;
padding: 0.3vw; 
}

Now I am also using a rule to use some fixed values when the screen size gets to a certain size:

@media screen and (min-width:1200px) {
div.playerForm input[type="text"], input[type="number"], input[type="submit"], input[type="date"], input[type="checkbox"] {
    font-size: 30px;
    padding: 3.0px;
    border-width: 9.6px;
    border-radius: 9.6px;
    padding: 3.6px;
}

However, when inspecting the code on my website, the rules for input[type="text"] are not being overridden and so the border continues to grow, however all the other input types abide to this rule.

If I swap the order in the first block of code above, so that input[type="number"] is now the first in the list, the issue now happens with that, and input[type="text"] behaves as it should.

How do I make sure every element in this list is overridden, not just everything after the first?