.mat-mdc-dialog-surface {
  background-color: var(--gray13) !important;
  box-shadow: var(--context-menu-shadow) !important;
  min-width: 420px !important;
  border-radius: var(--context-menu-border-radius) !important;
  border: var(--context-menu-border);

  .dialog-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 24px 0;

    .dialog-title {
      font-family: var(--font-family);
      color: var(--dialog-title-text);
      font-size: 13px;
      font-weight: 500;
      margin: 0;
      padding: 0;
    }
  }

  .dialog-outlet {
    padding: 0 24px 24px;
  }

  .dialog-body {
    padding: 24px 0;
    color: var(--gray4);
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}



.dialog-header-close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
  border-radius: 2px;
  color: var(--dialog-close-button-text);
  display: inline-flex;
  height: 20px;
  width: 20px;
  justify-content: center;
  vertical-align: middle;
  outline: none;

  .mat-icon {
    fill: currentColor;
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    vertical-align: middle;
  }

  &:hover, &:focus {
    background-color: var(--dialog-close-button-hovered-background);
  }
}

.cdk-overlay-dark-backdrop {
  background-color: transparent;
}
