Hello,

Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

-

We are limited with our Support when it comes to customizations, 

but we can help you get started with some basics.

Here are some CSS selectors you can use to manipulate the styles of the Master Details Pop-Up Modal. 

You can experiment and try various CSS properties/styles, 

place them in the custom CSS on the customize Tab of the Table settings if you just wish to have a specific style for one table;

or if you need to apply the same 'global' style to all tables, add it in main plugin settings/Custom JS and CSS/Custom CSS:

* responsive breakpoint width, if equal or more than 768 px */
@media (min-width: 768px)
.wpdt-c .modal-dialog {
    width: 600px;
    margin: 30px auto;
}
@media (min-width: 768px)
.wpdt-c .modal-content {
    -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
    box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
}
.wpdt-c .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}
.wpdt-c .modal .modal-content {
    box-shadow: 0 5px 20px rgb(0 0 0 / 31%);
    border-radius: 3px;
}
.wpdt-c .modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid transparent;
}
.wpdt-c .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}
/* modal header */
.wpdt-c .modal .modal-header {
    background: none;
padding: 23px 26px;
border-bottom: 1px solid transparent;
}
/* image inside the modal*/
.wpdt-c img {
    vertical-align: middle;
}
.wpdt-c img {
    border: 0;
}
.wpdt-c .modal .modal-body {
    padding: 0 26px 10px;
}
.wpdt-c .modal-body {
    position: relative;
    padding: 15px;
}

This one is for images in the modal -

.wpDataTableID-27 th.column-image { 
  width: 200px !important;
}

For that selector, just change the ID 27 it to your Table ID.

-

For example, i just tried some of the more detailed CSS in our Demo site for one Master Detail table.

Wei change the background color to blue, set text to white, changed font-family to cursive with this CSS:

.wpdt-c .modal-content {    
    background-color: blue !important; 
   border: 1px solid transparent;  
  border-radius: 2px;  
  color: white !important; 
   font-family: cursive !important;
}

You an also add "Media Query breakpoints", if you wish to have, for example one style property for mobile screen, another for Tablet, and so on.

Let me know if that helps and if you have any further questions.

Thanks.