A general pro-tip is to not use "!important" unless there's no other way to do what u want. By default, more-specific selectors will override less-specific ones, and the latest instance of the same selector will be prioritized. However, "!important" overrides all of this behavior (unless they also have "!important")

So, any ".warning" styling that is already set is probably being overridden by "color: #ffffff !important;"