.modal {
  width: 200px;
  height: 200px;
  display: block;
  background: white;
  color: white;
  border: 5px solid black;
}

.modal-wrapper .ui-dialog {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
}

.modal-wrapper .ui-widget-header {
  background: none;
  border: none;
}

.modal-wrapper .ui-dialog .ui-dialog-buttonpane {
  border: none;
}

.modal-wrapper .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none;
  display: flex;
  justify-content: flex-end;
}

.modal-wrapper .ui-dialog .ui-dialog-buttonpane button {
  margin: 5px;
}

.modal.ui-dialog-content.ui-widget-content {
  padding: 24px;
}

div.modal-body {
  padding: 0 0 10px;
}

/* For the "Report to build" modal, make it scrollable when a lot of template are present */
.confirm-dialog .ui-dialog-content:has(input[name="templatetype-radio"]) {
    max-height: 80vh !important;
    overflow-y: auto !important;
}
 
@media screen and (max-width: 480px) {
  .ui-dialog-buttonset {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of buttons onto the next line */
  }

  .ui-dialog-buttonset button {
    flex: 1 1 auto;
    min-width: 100px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}