/* Global Styles */

:root {
  --primary: #5394d4;
  --primary-light: #7ab0e0; /* 5394d4 */
  --primary-dark: #447cac;
  --secondary: #7c2484;
  --tertiary: #ffcf00;
  --red: #fa003f;
  --background: #feefe5;
  --background-lite: #fffbf8;
}

[data-bs-theme="dark"] {
  .bg-body-secondary {
    background-color: #181a1d !important;
  }
  .bg-body {
    background-color: #212529 !important;
  }
  .border {
    border-color: #292929 !important;
  }
  .tag-symbol {
    border-color: #5a5a5a;
  }
  .text-bg-dark {
    color: #cbcaca !important;
  }
  .bg-dark {
    background-color: #111315 !important;
  }
  .swal2-popup {
    background-color: #292e32 !important;
    color: inherit !important;
  }
  .swal2-container.swal2-backdrop-show:not(.swal2-top-end) {
    background: rgba(0, 0, 0, 0.8);
  }
  .tagify {
    --placeholder-color: #888888 !important;
    --placeholder-color-focus: #545454 !important;
  }
  .navbar-nav .link-secondary:not(.active):not(:hover) {
    color: inherit !important;
  }
}

.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  color: currentColor;
}

.nav-link.active {
  font-weight: bold !important;
  color: var(--primary-light) !important;
}

.nav-link:hover {
  color: var(--primary) !important;
}

.green {
  color: #1aae8c;
}

.red {
  color: #fa003f;
}

.blue {
  color: #007ccf;
}

a {
  text-decoration: none;
}

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

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

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

.fs-7 {
  font-size: 0.8rem;
}

small {
  font-size: 0.8rem;
}

.tag-item {
  min-width: 150px;
}

.tag-symbol {
  min-width: 150px;
  padding: 0.25em 0.3em;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: inherit;
}

.tag-symbol:hover {
  border: 1px solid #ccc;
}

.tag-symbol:focus {
  border: 1px solid #3595f6;
}

.history .item,
.portfolio .item {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid #ededed;
}

.staff-link {
  cursor: pointer;
}