/* CountBricks Graphite, appearance-only. Never opt these dialogs into Details
   layout rules: every existing size, offset, scroll region and field stays owned
   by its create component. SfDialog can copy classes to its modal container. */
.wfx-create-graphite.e-dialog {
    background: #1e1d21 !important;
    color: #f3f4f6;
    border-color: var(--details-border, rgba(255, 255, 255, .14)) !important;
    border-radius: 12px !important;
    font-family: Roboto, sans-serif;
}

.wfx-create-graphite.e-dialog > .e-dlg-header-content {
    background: transparent !important;
    color: #f3f4f6;
    border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 var(--details-border, rgba(255, 255, 255, .14));
}

.wfx-create-graphite.e-dialog > .e-dlg-header-content > .e-dlg-header,
.wfx-create-graphite.e-dialog > .e-dlg-header-content > .e-dlg-header :is(div, h1, h2, h3, h4, h5, h6) {
    font-weight: 600 !important;
    color: #f3f4f6;
}

.wfx-create-graphite.e-dialog > .e-dlg-content {
    background: transparent !important;
    color: #f3f4f6;
}

.wfx-create-graphite.e-dialog > .e-footer-content {
    background: transparent !important;
    color: #f3f4f6;
    box-shadow: inset 0 1px 0 var(--details-border, rgba(255, 255, 255, .14));
}

.wfx-create-graphite.e-dialog .wfx-create-surface {
    background: var(--details-surface, #282828) !important;
    border-color: var(--details-border, rgba(255, 255, 255, .14));
    box-shadow: inset 0 0 0 1px var(--details-border, rgba(255, 255, 255, .14));
}

.wfx-create-graphite.e-dialog .wfx-create-inset {
    background: var(--details-surface-2, #353434) !important;
}

.wfx-create-graphite.e-dialog .wfx-create-surface:focus-within {
    box-shadow: inset 0 0 0 1px var(--details-accent, #75b9fa);
}

.wfx-create-graphite.e-dialog .wfx-create-heading {
    color: #f3f4f6 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.wfx-create-graphite.e-dialog .wfx-create-muted {
    color: var(--details-muted, #b8bdc7) !important;
}

.wfx-create-graphite.e-dialog :is(.e-btn, .mdc-button, .btn) {
    border-radius: 8px;
}

.wfx-create-graphite.e-dialog :is(.e-btn, .mdc-button, .btn):not(.wfx-save-action):focus-visible {
    outline: 2px solid var(--details-accent, #75b9fa);
    outline-offset: 2px;
}