Not able to change v-dialog style - vue.js

Question

I want to change the margin on the .v-dialog class and the max-height when it's not full screen.
The code from the console:
.v-dialog {
border-radius: 4px;
margin: 24px; <-------- want to change this
overflow-y: auto;
pointer-events: auto;
-webkit-transition: .3s cubic-bezier(.25,.8,.25,1);
transition: .3s cubic-bezier(.25,.8,.25,1);
width: 100%;
z-index: inherit;
-webkit-box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,
}
and:
.v-dialog:not(.v-dialog--fullscreen) {
max-height: 90%; <--------- want to change this
}
It's not enough just to add a class to the v-dialog component somehow it dosen't register it.

Answer 1

It's always a good idea to use the docs for reference, if you haven't done so already.
https://dev.vuetifyjs.com/en/components/dialogs#dialogs
You have to use the content-class property, instead of the normal class, if you want to attach a class to the v-dialog
Applies a custom class to the detached element. This is useful because
the content is moved to the beginning of the v-app component (unless
the attach prop is provided) and is not targettable by classes passed
directly on the component.
In this class you can then override the margin and max-height:
.custom-dialog.v-dialog{
margin: 10px;
}
.custom-dialog.v-dialog:not(.v-dialog--fullscreen) {
max-height: 50%;
}