CSS not working as expected for some entities

Third party integrations Floorplan
1

I have 2 groups, one for RGB bulbs and one for regular.
The RGB bulbs opacity when off works as expected. They are all currently off.

The ones I circles do not. Where am I going wrong?

Thanks!!

chrome_JNcVaU2LlD
chrome_JNcVaU2LlD1677×979 154 KB

    - name: Lights
      entities:
        - light.cabinet
        - light.kitchenmotion
        - light.livingroomlight
        - light.living_room_wall_switch
        - light.pantry
        - light.playroom
        - alarm_control_panel.alexa_guard
      states:
        - state: 'on'
          class: 'light-on'
        - state: 'off'
          class: 'light-off'
      action:
        domain: homeassistant   


    - name: Lights Color
      entities: 
        - light.bathroom_color
        - light.hall
        - light.jacob
        - light.jonas
        - light.leglamp
        - light.sleep
      rgb_template: '
        return "off-state";
        '

and my .css

/* Light */

.off-state {
fill: rgba(222, 245, 13, 0.247) !important;
}

.light-off {
fill: rgba(255, 255, 153, 0.082) !important;
}

.light-on {
fill: #FFFF99 !important;
}

.light-unavailable {
fill: #c2c2d6 !important;
fill-opacity: 0.3 !important;
transition: opacity 0.3s;
}