CSS not being respected when selected

Third party integrations Floorplan
1

I am trying to get a floorplan implemented and am starting simple with an example that already exists.
I have a very simple CSS file but when I select the item, the CSS doesn’t seem to be implemented and I can’t for the life of me see why (its the same as an example)

Toggle action works (so clicking the area does change the toggle state)

Dashboard Config:

type: custom:floorplan-card
full_height: true
config:
  image: /local/floorplan/3dGroundFloor.svg
  log_level: info
  console_log_level: info
  rules:
    - element: garage_left_light
      entity: switch.garage_simp_1
      state_action:
        acton: call-service
        service: floorplan.class_set
        service_data: entitystate-$(entity.state)
      tap_action:
        action: call-service
        service: homeassistant.toggle
  stylesheet: /local/floorplan/home.css

css file (www/floorplan/home.css)

.entitystate-on{
  opacity: 0;
}

.entitystate-off{
  opacity:0.7;
  fill: rgb(49,54,45)!important;
}
2

You can use the browser developer tools to see what styles are getting applied. I do notice you don’t have a space between opacity: and 0.7 but not sure if that is causing the issue. So my first suggestion is to fix that and then use the tools (in Chrome right click>>INSPECT make sure the ELEMENTS tab is selected then on the right hand side there will be a series of sections and some will have in them. See if they change with the state change)