General CSS styling issues

[benkeen]

Just working on adding this script to the Alberta Leps Guild site:
https://www.albertalepguild.ca/inat

I'm finding targeting the various elements kinda fiddly. This'll take some parsing, but here are the styles I've had to hack together. Also check order of styles here. I kinda figured I could just defined the styles + they'd get higher specificity. Is the pre-baked CSS added second?

.inat-tabs li[class*="tabs-module_selected"] {
  color: white !important;
}
.inat-tab-desc, [class*="general-module_tabDesc"] {
  color: #aaaaaa;
}
article[class*="observation-module_obs"] {
  background-color: #566c59;
  padding-top: 3px;
}
article[class*="observation-module_obs"]:hover {
  background-color: #68896b;
}
label[class*="general-module_count"] {
  background-color: #2B312A;
  color: #ffc269;
}
[class*="summary-module_countSummary"] {
  color: #999999;
}
.tickLabel {
  fill: #999999 !important;
}

Also the colours of the graph are hard to style. I was able to change the main body, but couldn't figure out the border.