/* 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-dialog.modal-first-access {
  max-width: 360px;
}

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

.toast {
  box-shadow: 0 0 5px 0 color-mix(in srgb, transparent 80%, var(--text-primary));
}
.toast-body {
  border-bottom-left-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}
.toast-header,
.toast-body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}
.toast-close {
  background-color: transparent;
  border: none;
  color: var(--text-primary) !important;
}
.icon-warning {
  margin-right: 10px;
  color: var(--warning-color);
}
.icon-success {
  margin-right: 10px;
  color: var(--success-color);
}
.icon-error {
  margin-right: 10px;
  color: var(--danger-color);
}

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