I am unable to discrimiate badges

[lemimi64]

Good afternoon,
I try to adapt zabuto-calendar for my choral web site and I have a (big) problem. Heu, two : I am french and my english is sometime strange...

I have 3 types of rehearsal : ordinary, extra, and whole day rehearsal. there are also concerts. So I think I have to create 4 new event-types. OK. I would like to have 4 different colors but I am enable to write the correct lines in the css file. Yes, I am a newbie in HTML, CSS JavaScript...
I duplicate this section, changing event with extra-event, but I only obtain à red square, not a red badge.

/* actions and events */
div.zabuto_calendar .table tr td.extra-event div.day,
div.zabuto_calendar ul.legend li.extra-event {
background-color: red;
}
div.zabuto_calendar .extra-event,
div.zabuto_calendar div.legend span.extra-event {
background-color: red;
color: #ffffff;
text-shadow: none;
}

Could you help me ?
Best regards

[zabuto]

Sorry for the late response.
Please check out this example: https://jsfiddle.net/zabuto/ukbdfg52/18/