:root {
  --primary-color: #5d5cde;
  --bs-primary: #5d5cde;
  --bs-primary-rgb: 93, 92, 222;
}

.dark {
  --bs-body-bg: #181818;
  --bs-body-color: #f8f9fa;
  --bs-secondary-bg: #2d2d2d;
  --bs-tertiary-bg: #343a40;
  --bs-border-color: #495057;
}

body.dark {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.dark .bg-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

.dark .border {
  border-color: var(--bs-border-color) !important;
}

.dark .form-control,
.dark .form-select {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.dark .input-group-text,
.dark .form-check-input {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

.dark .text-muted {
  color: #adb5bd !important;
}

.dark .alert-info {
  background-color: rgba(13, 110, 253, 0.2);
  color: #cfe2ff;
  border-color: rgba(13, 110, 253, 0.3);
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: rgba(93, 92, 222, 0.9);
  border-color: rgba(93, 92, 222, 0.9);
}

.text-primary {
  color: var(--primary-color) !important;
}

.previewContainer {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .white-bg {
  background-color: white !important;
}