Jewel TabBar CSS hover has stopped working

[Maria Jose Esteve]

Hi,
About a month ago, I created a Ribbon in my project with a Jewel TabBar control 
that I applied CSS to to give it a "hover" effect.
Since the changes that were made in September it seems that it does not apply 
and I don't know why ...

My TabBar has a custom itemRenderer ...

                <j:TabBar id="tabbarApp" selectedIndex="-1" sameWidths="true"
                    className="tabbarAppItemRenderer"
                    change="selectedChart()" 
dataProvider="{appModel.tabBarAppData}">
                </j:TabBar>

..., where I have a Jewel Card "cardThumbnail"

    <j:Card id="cardThumbnail">
        <j:beads>
            <j:ToolTip localId="tt" toolTip="{dataThumb.description}"/>
        </j:beads>
        <j:CardHeader>
            <j:Label text="{dataThumb.label}" className="primary" 
style="font-size: 0.75em;"/>
        </j:CardHeader>
        <j:CardExpandedContent itemsHorizontalAlign="itemsCenter" 
itemsVerticalAlign="itemsCenter">
            <j:Image localId="img" src="{dataThumb.thumbnail}" height="50">
                <j:beads>
                    <j:ResponsiveSize phoneWidth="35"/>
                    <js:ErrorImage emptyIsError="true"/>
                </j:beads>
            </j:Image>

        </j:CardExpandedContent>
    </j:Card>

My CSS:


.tabbarAppItemRenderer
{
    IItemRenderer: 
ClassReference("com.proj.example.itemRenderers.TabBarThumbnailItemRenderer");
}

#cardThumbnail{
  background: white;
  padding: 10px;
  margin: 10px;
  text-transform: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}

#cardThumbnail::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease-in-out;
}

#cardThumbnail:hover {
  transform: scale(1.1, 1.1);
  box-shadow: 0px 0px 5px 3px  rgba(0, 0, 0, 0.3);
}

#cardThumbnail:hover::after {
    opacity: 1;
}

#cardThumbnail .card-header{
  border-bottom: 0px transparent;
  padding-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  font-weight: bold;
}
/* Since the beginning of September it does not work:
#tabbarApp .indicator>.indicatorContent{*/
#tabbarApp .indicator-content{
  background-color: white;
}

Could someone give me a clue of the error? Before the changes it worked fine, 
when we were on the tab it produced a very cool shadow effect, but now the only 
CSS that is applied is the "#tabbarApp .indicator-content"

Any ideas?

Thx.
Hiedra.