/*
** ========================================================================================
** ======================================= Dialogs ========================================
** ========================================================================================
*/
.my-dialog[open] {
  animation: my-dialog-appear 0.005s cubic-bezier(0, 1.8, 1, 1.8);
}

.my-dialog::backdrop {
  background: linear-gradient(45deg, rgba(104, 104, 104, 0.5), rgba(200, 204, 206, 0.5));
}

@keyframes my-dialog-appear {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.my-dialog {
  border: none;
  padding: 0px;
  border-radius: 3px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.25);
  max-width: 90vw;
  min-width: 300px;
}

.my-dialog-header {
  background-color: lightgoldenrodyellow;
  border-radius: 3px 3px 0px 0px;
  padding: 3px 6px;
  border: grey 1px solid;
  border-left-width: 0px;
  border-right-width: 0px;
  font-weight: 600;
  font-size: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-dialog-header-right {
  font-size: 1.2em;
  font-weight: 400;
  color: #666;
  padding: 0em 0.2em;
}

.my-dialog-header-right:hover {
  background-color: #da4949;
  color: black;
}

.my-dialog-footer {
  border-radius: 0px 0px 3px 3px;
  display: flex;
  padding: 0.5rem;
  margin: 5px;
  border-top: #aaa 1px solid;
  justify-content: flex-end;
}

.my-dialog-footer button {
  margin-left: 1em;
  font-size: 1em;
  font-weight: 500;
}

.my-dialog-main {
  padding: 0.5rem;
}

/* ============================================================== jquery override ===*/
/*
.ui-widget {
      font-size: 1em;
}

.ui-dialog-titlebar {
      background-color: lightsteelblue;
} */
.ui-dialog {
  box-shadow: 1px 1px 1px 0px gray;
  min-width: 501px;
  max-width: 1801px;
  width: 802px;
}

.ui-widget-overlay {
  opacity: 0.3 !important;
  /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=30) !important;
  background: black !important;
  /* This will make it darker */
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0px 0px;
  background: none;
  overflow: auto;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.01em 0.2em;
}

.dialogx-button-pane {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 10px 5px 1px 5px;
  padding: 8px 0px 0px 0px;
  border: 1px solid #aaa;
  border-width: 1px 0 0 0;
}

.dialogx-button-pane * {
  margin-left: 10px;
}