.dialog-pane {
  -fx-background-color: -surface-color;
  -fx-effect: -drop-shadow-3;
  -fx-background-radius: px(5);

  // Padding only in the button-bar does not work, when the bar is not visible. So put it up here
  -fx-padding: 0 0 px(10) 0;

  & .dialog-header {
    -fx-padding: 0;
    -fx-background-color: -surface-color;
    -fx-background-radius: px(5);

    & .dialog-title {
      -fx-padding: px(30) px(30) 0 px(30);
      -fx-font-size: 1.5em;
      -fx-font-weight: 700;
      -fx-text-fill: -on-surface-color;
    }
  }

  & .dialog-content-pane {
    -fx-padding: px(20) px(30) px(20) px(30);

    & .label {
      -fx-font-size: 1.2em;
      -fx-font-weight: 600;
      -fx-text-fill: -on-surface-color;
      -fx-opacity: .54;
    }

    & .input-container {
      -fx-spacing: px(10);
    }

    & .textfield-container {
      -fx-spacing: px(10);
    }

    & .error-details-titled-pane {
      -fx-padding: px(20) 0 0 0;
    }
  }

  & .button-bar .button {
    -fx-background-color: transparent;
    -fx-text-fill: -secondary-color;
    // When the bar is not visible, the padding bottom also. So put it to the .dialog-pane
    -fx-padding: px(10) px(15) 0 px(15);
    -font-size: 1.25em;
    -fx-font-weight: 700;
    -fx-cursor: hand;
  }
}
