Change padding of an X panel when I add class in a Y panel (both of the same parent panel)

Good evening, my people,

I have a screen where I have a sidebar on the left side. When I define it with the CSS class .compacto it stays 50 pixels wide by adjusting the buttons and layout. When I put the .modoExpandido class it gets the average size. My root panel is an AnchorPane so I can leave the expandable buttons in compact mode as in the following code:

#PainelRoot #PainelMenuEsquerda {
    -fx-background-color: #222;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-padding: 0px;
    -fx-spacing: 14px;
}

#PainelRoot #PainelMenuEsquerda #PainelTitulo .label {
    -fx-content-display: LEFT;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-graphic-text-gap: 14px;
    -fx-max-width: Infinity;
    -fx-padding: 14px;
    -fx-text-fill: #FFF;
}

#PainelRoot #PainelMenuEsquerda #PainelTitulo .button {
    -fx-content-display: GRAPHIC_ONLY;
}

#PainelRoot #PainelMenuEsquerda #ListaOpcoes {
    -fx-spacing: 7px;
}

#PainelRoot #PainelMenuEsquerda #ListaOpcoes .button, #PainelMenuEsquerda #PainelTitulo .button {
    -fx-alignment: CENTER_LEFT;
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-cursor: HAND;
    -fx-font-size: 14px;
    -fx-max-width: Infinity;
    -fx-padding: 14px 17.5px 14px 14px;
    -fx-text-fill: #FFF;
}

#PainelRoot #PainelMenuEsquerda #ListaOpcoes .button:hover, #PainelMenuEsquerda #PainelTitulo .button:hover {
    -fx-background-color: #3399FF99;
}

#PainelRoot .modoCompacto {
    -fx-padding: 0px 0px 0px 50px;
}

#PainelRoot .modoExpandido {
    -fx-padding: 0px 0px 0px 224px;
}

#PainelRoot .modoExpandido #ListaOpcoes .button {
    -fx-content-display: LEFT;
    -fx-graphic-text-gap: 14px;
    -fx-pref-width: 224px;
}

#PainelRoot .modoCompacto, .modoCompacto #PainelTitulo .button {
    -fx-max-width: 50px;
    -fx-min-width: 50px;
}

#PainelRoot .modoCompacto #PainelTitulo {
    -fx-max-width: 224px;
    -fx-min-width: 224px;
    -fx-rotate: -270.0;
    -fx-translate-x: -87px;
    -fx-translate-y: -87px;
}

#PainelRoot .modoCompacto #PainelTitulo .button {
    -fx-rotate: -90.0;
}

#PainelRoot .modoCompacto #PainelTitulo .button .image-view, .modoCompacto #ListaOpcoes .button .image-view {
    -fx-translate-x: 3.5;
}

#PainelRoot .modoCompacto #ListaOpcoes .button {
    -fx-content-display: GRAPHIC_ONLY;
    -fx-graphic-text-gap: 35px;
}

#PainelRoot .modoCompacto #ListaOpcoes .button:hover {
    -fx-content-display: LEFT;
    -fx-min-width: 224px;
}

Now let's go to what I need.

When I add the .modoCompact class in the Side Panel, I wanted the PanelContainer to have a custom padding. What would be the syntax to do this more proficiently? I wanted it when I added this class to the sidebar it already changed the PanelContainer. Both are from the same parent panel PanelRoot.