Separate styling for multiple dialog widgets on the same page.

Separate styling for multiple dialog widgets on the same page.

Hello,
So there must be something very fundamental I'm not getting here.
Let's say I have two different modal dialogs on the same page.
I know I can add styles to manipulate the defaults like:

  1.             .ui-dialog .ui-dialog-buttonpane { 
  2.                 text-align: center;
  3.             }
  4.             
  5.             .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
  6.                 float: none!important;
  7.             }
  8.             
  9.             .ui-dialog {
  10.                 left: 50% !important;
  11.                 top: 30% !important;
  12.                 margin-left: -400px !important; 
  13.                 margin-top: -190px !important; 
  14.             }
Which is great... the one dialog that I'm styling is using these and working well.
However, now I introduce modal dialog #2 to that same page and the styling I want to use for this other dialog is entirely different from the first. The above example are in the global space so they will impact both modal widgets, I can't figure out how I would associated a specific set of styles to a specific dialog. I was expecting to find some process to inject a class or id into the rendered object to allow me to target the styles accordingly, such as:

  1.             div.my-first-dlg.ui-dialog {
  2.                 left: 50% !important;
  3.                 top: 30% !important;
  4.                 margin-left: -400px !important; 
  5.                 margin-top: -190px !important; 
  6.             }
but that doesn't work... I can't wrap the modal.
There must be some way to do this.

This sounds like a very brain dead question, but I've run out of ideas. I've read the documentation on this, that's how I was able to style out the first dialog. Now I'm here.
Thanks for any help on this.