How do I specifically style the are you sure? (buttons) modal?

We have a specific stylesheet for all modals. For example, all 'next' buttons should be aligned right, while the secondary button should be aligned left. The "Are you sure?" microflow-button modal is styled in such way that the primary button is always the left button. Therefor I'm seeking a way to style this modal separate of all modal pages. Specifically the buttons I want to style, not the whole modal.   Update: I noticed that the modal gets the ID "mxui_widget_ConfirmationDialog_1" and I assume there cannot be multiple confirmation dialogs. So the AreYouSure modal, which is a confirmation dialog, is always the one and only. So that seems the way to go. Alternatively, I haven't found a different modal than the confirmation modal that has a real modal-footer class. So let's try that. If there are any other suggestions or feedback to this finding, please post.
3 answers

I think the safest would be

[id^=mxui_widget_ConfirmationDialog] {
// your styling


flex-direction: row-reverse;

to change button order.


I think you could use the 'mx-dialog' and 'mx-dialog-footer' classes. They are specific to the 'are you sure' pages.


I'm not sure you can change the styling for that without changing the styling for all mx-dialog boxes. It might be easier to just create your own confirmation pop-up.