:root {
  --modal-width-standard: 700px;
}

.modal-content {
  display: flex;
  width: var(--modal-width-standard);
  padding: var(--padding-spacious);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-spacious);
  border-radius: var(--radius-primary) !important;
  background: var(--bg-card) !important;
}

@media (max-width: 767.98px) {
  .modal-content {
    padding: var(--padding-comfortable);
  }
}

.modal-content.modal-responsive {
  width: min(
    clamp(0px, var(--modal-width-standard), var(--modal-width-standard)),
    90vw
  ) !important;
  max-width: min(
    clamp(0px, var(--modal-width-standard), var(--modal-width-standard)),
    90vw
  ) !important;

  .modal-dialog:has(&) {
    width: min(
      clamp(0px, var(--modal-width-standard), var(--modal-width-standard)),
      90vw
    ) !important;
    max-width: min(
      clamp(0px, var(--modal-width-standard), var(--modal-width-standard)),
      90vw
    ) !important;
  }
}

.modal-content.modal-responsive-xl {
  width: fit-content !important;
  max-width: min(clamp(0px, 1200px, 100vw), 90vw) !important;

  .modal-dialog:has(&) {
    width: fit-content !important;
    max-width: min(clamp(0px, 1200px, 100vw), 90vw) !important;
  }
}

.modal-header,
.modal-body,
.modal-footer {
  padding: 0;
  background-color: transparent !important;
  border: none;
  width: 100%;
}

.modal-header .close {
  padding: 0;
  margin: 0;
}

.modal-header h5 {
  font-size: 20px;
  margin: 0;
}

.modal.right .modal-content {
  width: 100%;
  max-width: 100%;
}

.modal.right .modal-body,
.modal.right .modal-body .dropdown-item {
  padding: 0 !important;
}

.modal-body form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-comfortable);
}

.eula-modal-content {
  max-height: 80vh;
  max-height: 80svh;
}