.e-dialog .e-dlg-header-content {
    background: var(--foo-blue-gradient);
}

.e-dialog .e-dlg-header {
    color: white;
}

.e-icon-dlg-close {
    color: white;
    font-size: 18px;
    background: transparent;
    border: none;
}
    .e-icon-dlg-close:hover,
    .e-icon-dlg-close:active,
    .e-dialog .e-btn.e-dlg-closeicon-btn:active {
        color: grey !important;
    }
.e-dialog {
      border: 0px;
    border-radius: 6px;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

/* Opt-in auto-height: dialog shrinks/grows to fit content.
   Apply via CustomCssClass="sf-dialog-auto-height" on any BaseEditor.
   Roll out to other dialogs once validated on UserEditor. */
.sf-dialog-auto-height.e-dialog {
    height: auto !important;
    min-height: 0 !important;
}

.sf-dialog-auto-height .e-dlg-content {
    height: auto !important;
    max-height: 70vh;
    overflow-y: auto;
    flex: 0 1 auto;
}