@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Cairo:wght@400;700&display=swap");
h2, h3, h4, strong {
  font-family: "Cairo", sans-serif;
  font-weight: 200;
}

h6 {
  font-family: "Cairo", sans-serif;
  font-weight: Bold;
}

[data-bs-theme=dark] {
  --bs-link-color: #7FB5C8;
  --bs-link-color-rgb: to-rbg(#7FB5C8);
  --bs-link-hovor-color: #7FB5C8;
  --bs-link-hovor-color-rgb: to-rbg(#7FB5C8);
  --bs-secondary: lighten(#4a4F55, 30%);
  --bs-secondary-rgb: to-rgb(rgb(149.1509433962, 155.3773584906, 162.8490566038));
}
[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: #4A4F55;
  --bs-btn-hovor-bg: var(--bs-secondary);
  --bs-btn-hovor-border-color: var(--bs-secondary);
  --bs-btn-hover-color: to-rgb(rgb(149.1509433962, 155.3773584906, 162.8490566038));
}
[data-bs-theme=dark] input:disabled, [data-bs-theme=dark] textarea:disabled, [data-bs-theme=dark] select:disabled {
  background-color: #000 !important;
  color: white;
  opacity: 1;
}

[data-bs-theme=light] input:disabled, [data-bs-theme=light] textarea:disabled, [data-bs-theme=light] select:disabled {
  background-color: rgb(219, 220, 221) !important;
  color: rgb(30, 32, 34);
  opacity: 1;
}

.dropdown-menu-auto-w {
  min-width: 420px !important; /* remove Bootstrap's fixed 10rem */
  width: auto !important;
}

.list-group-sm .list-group-item {
  padding: 0.25rem 0.5rem; /* smaller padding */
  font-size: 0.875rem; /* small font size */
}