:root {
  /* Dark theme (default) */
  --bg-gradient-1: rgba(59,130,246,.06);
  --bg-gradient-2: rgba(34,197,94,.05);
  --bg-base-1: #0a0f1d;
  --bg-base-2: #0f172a;
  --bs-link-color-rgb: 248, 250, 252; /* slate-50 RGB */
  --bs-link-hover-color-rgb: 241, 245, 249; /* slate-100 RGB */
}

[data-bs-theme="light"] {
  --bg-gradient-1: rgba(59,130,246,.15);
  --bg-gradient-2: rgba(34,197,94,.12);
  --bg-base-1: #f8fafc;
  --bg-base-2: #e2e8f0;
  --bs-link-color-rgb: 71, 85, 105; /* slate-600 RGB */
  --bs-link-hover-color-rgb: 51, 65, 85; /* slate-700 RGB */
}

html {
  height: 100%;
}

body {
  background:
    radial-gradient(900px 500px at 100% -10%, var(--bg-gradient-1), transparent 60%),
    radial-gradient(800px 500px at 0% 0%, var(--bg-gradient-2), transparent 60%),
    linear-gradient(180deg, var(--bg-base-1), var(--bg-base-2) 40%) fixed;

  min-height: 100dvh; /* dynamic viewport on mobile */
  min-height: 100vh;  /* fallback */

  /* make all layers fixed and non-repeating */
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.navbar {
  --bs-navbar-padding-y: .4rem;
}
.profile-img {
  width: 38px;
  object-fit: cover;
}
.progress.exp {
  height: .5rem;
  width: 220px;
}
@media (max-width: 576px) {
  .progress.exp { width:100%; }
}

.alert-dropdown-menu {
  width: max-content;
  max-width: 450px;
}

.navbar-brand {
  overflow: visible;
  height: 28px;
}

/* Select 2 bootstrap-5 theme override */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: transparent !important;
  border: 1px solid #495057;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  border: 1px solid var(--bs-gray-600);
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: transparent !important;
  color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  color: #dee2e6 !important;
  border: 1px solid #495057 !important;
  background-color: var(--bs-body-bg);
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
  color: var(--bs-secondary-color)!important;
}

.no-label label {
  display: none;
}
.asteriskField {
  display: none;
}

.rainbow-text {
  /* Full-spectrum gradient */
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff7a00 16.6%,
    #ffee00 33.3%,
    #00cc00 50%,
    #007bff 66.6%,
    #6f00ff 83.3%,
    #ff00a7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;            /* Standard */
  -webkit-text-fill-color: transparent; /* WebKit */
  background-size: 55% 100%;
}

.rainbow-animate {
  background-size: 50% 100%;
  animation: slide 20s linear infinite;
}
@keyframes slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sparkle {
  position: relative;
}

.sparkle::after {
  content: "✨";
  position: absolute;
  right: -1.4em;
  top: -0.2em;
  animation: twinkle 1.4s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(10deg); }
}

@keyframes gentle-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.icon-large {
  font-size: 1.8rem;
}

.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the icons */
}

.bi {
  /*
  display: inline-block;
  transform: scale(1.0);
  */
}

.select2-init, .select2-init option {
  height: var(--bs-form-control-height, calc(2.25rem + 2px));
  background: transparent;
  color: transparent;
  text-shadow: none;
  overflow: hidden;
}