Some custom css overrides are not working

Hello,

I'm trying to override the elemets shown below by using custom CSS applied to the charm template. The changes that I expected are not taking place, particularly with the profile header. I'm using the light mode but want many of the greyish fonts to be black. Thanks in advance.

#es .es-profile-header__title {
color: #000000 !important;
}


#es .es-profile-header__meta {
color: #000000 !important;
}


#es .es-profile-header-nav {
color: #000000 !important;
}

#es .es-profile-header-nav__link {
color: #000000 !important;
}

#es .es-stream-embed__apps-context, #es .es-stream-embed__achievement-context {
color: #000000 !important;
font-weight: normal;
font-size: 12px;
display: block;
}



#es .es-stream-meta .es-stream-title {
color: #000000 !important;
}

This section can only be seen by users with a valid subscription.
If you have a valid subscription, please login now

Support is
Offline

It is currently a weekend from where we are at. Some answers may already be available on our documentation

Rest assured that we will get back to your posts as soon as the week starts!

Your time
Stack Ideas time