.dDialog {
  --min-width: 25%;
  min-width: var(--min-width);
  --max-width: 25%;
  max-width: var(--max-width);
  --min-height: 25%;
  min-height: var(--min-height);
  --max-height: 25%;
  max-height: var(--max-height);
  --z-index: 1001;
  z-index: var(--z-index);
  border: none;
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); /*TODO: make it configurable*/
}

.dDialog,
.dDialog:hover {
  background: white; /*TODO: make it configurable*/
  color: var(--color-text); /*TODO: make it configurable*/
}

.backdropTransitionEnterActive,
.backdropTransitionLeaveActive {
  opacity: 0;
}

.transitionEnterActive,
.transitionLeaveActive {
  opacity: 0;
  transform: translate3d(-50%, -45%, 0);
}

.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.title {
  overflow: hidden;
}

.closeButton {
  margin-left: auto;
  height: var(--size);
  width: var(--size);
}

.content {
  margin: var(--padding);
  margin-left: 0;
  margin-right: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: var(--grid-column-gap);
  margin-top: auto;
}

.cancelButton,
.acceptButton {
  flex: auto;
}