/* modal */
.modal{
  z-index: 1001 !important;
}
.modal-backdrop{
  z-index: 1000 !important;
}

.modal .modal-content {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.modal .close-button {
  color: var(--text-primary);
  background-color: transparent;
  border: none;
  margin-left: auto;
}

.modal .modal-dialog {
  max-width: 700px;
}

.modal .modal-title {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: var(--font-size4);
  line-height: 100%;
  letter-spacing: -0.46px;
  vertical-align: middle;
}

.modal .modal-subtitle {
  font-weight: 400;
  font-size: var(--font-size3);
  line-height: 100%;
  margin-top: 12px;
}

.modal-footer .btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  outline-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-color-with-primary) !important;
  box-shadow: none !important;
}
.modal-footer .btn-secondary,
.modal-footer .btn-secondary span {
  background-color: transparent !important;
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}
.modal-footer .btn-outline-danger,
.modal-footer .btn-outline-danger span {
  background-color: transparent !important;
  border-color: var(--danger-color) !important;
  color: var(--danger-color) !important;
}