v-menubar-separator(Problems with changing the style)

Hello.
I don’t understand why my css style is overrided by base class.

mytheme.scss

{
.....
@override  the base clases in my theme
.v-menubar-popup{background-color: $c_blue_grey_900;top:25px;}
  .v-menubar {background-color: $c_blue_grey_800;border-radius: 0px 0px 5px 5px;height: 30px;border-bottom: 1px solid #232E33 }
  .v-menubar-submenu { }
  .v-menubar-menuitem {padding-left: 10px}
  .v-menubar-menuitem-caption {color: $c_blue_grey_300;font-size:12px}
  .v-menubar-menuitem-selected {box-shadow: none; }
  .v-menubar-submenu-indicator { }
  .v-menubar-separator{border-bottom: 1px solid $c_yellow_500} //<---MY SEPARATOR CUSTOM COLOR

}

My code is :


 MenuBar barmenu = new MenuBar();
        barmenu.addStyleNames(ValoTheme.MENUBAR_BORDERLESS,ValoTheme.MENUBAR_SMALL);

        MenuBar.MenuItem mWorkspaces = barmenu.addItem("Workspaces", null, null);
        mWorkspaces.addItem("Create",null,null);
        mWorkspaces.addSeparator();
        mWorkspaces.addItem("Workspace1",null,null);
        mWorkspaces.addItem("Workspace2",null,null);
        mWorkspaces.addItem("Workspace3",null,null);

42001.png