:root {
  --bs-body-font-family: "Calibri", sans-serif;

  --bs-red: #ec4136;
  --bs-green: #77b901;
  --bs-yellow: #ffd200;
  --bs-orange: #f68e1e;
  --bs-blue: #0066ff;
  --bs-purple: #9900cc;

  .breadcrumb {
    --bs-breadcrumb-divider: ">";
    --bs-breadcrumb-margin-bottom: 0;
  }

  .navbar {
    --bs-navbar-padding-y: 0;
  }

  .sidebar {
    --bs-sidebar-width: 220px;
  }

  .modal {
    --bs-modal-header-padding-y: 0.5rem;
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-footer-padding-y: 0.5rem;
    --bs-modal-footer-padding-x: 1rem;
    --bs-modal-border-color: var(--bs-border-color);
  }

  footer {
    --bs-footer-padding-y: 0.5rem;
    --bs-footer-padding-x: 0;
  }
}

:root,
[data-bs-theme=light] {
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #212529;
  --bs-border-color: #dee2e6;

  .navbar {
    --bs-navbar-bg: #ffffff;
    --bs-navbar-color: #212529;
  }

  .sidebar {
    --bs-sidebar-bg: #374151;
    --bs-sidebar-color: #e5e7eb;
    --bs-sidebar-hover-bg: #2a3444;
    --bs-sidebar-hover-color: #ffffff;
    --bs-sidebar-active-bg: #2d3748;
    --bs-sidebar-active-color: #ffffff;
  }

  .modal {
    --bs-modal-bg: #ffffff;
    --bs-modal-color: #212529;
  }

  footer {
    --bs-footer-bg: #f1f3f5;
    --bs-footer-color: #495057;
  }

  .table-secondary {
    --bs-table-color: #212529;
    --bs-table-bg: #f0f2f4;
    --bs-table-border-color: #dee2e6;
  }

  --bs-form-bg: #ffffff;

  --bs-gradient-color-1: var(--bs-red);
  --bs-gradient-color-2: var(--bs-orange);
  --bs-gradient-color-3: var(--bs-yellow);
  --bs-gradient-color-4: var(--bs-green);
}

[data-bs-theme=dark] {
  --bs-body-bg: #212529;
  --bs-body-color: #e9ecef;
  --bs-border-color: #2e3338;

  .navbar {
    --bs-navbar-bg: #1a1d20;
    --bs-navbar-color: #f5f5f5;
  }

  .sidebar {
    --bs-sidebar-bg: #121416;
    --bs-sidebar-color: #f5f5f5;
    --bs-sidebar-hover-bg: #2a3444;
    --bs-sidebar-hover-color: #ffffff;
    --bs-sidebar-active-bg: #1f2326;
    --bs-sidebar-active-color: #ffffff;
  }

  .modal {
    --bs-modal-bg: #1f1f1f;
    --bs-modal-color: #e9ecef;
  }

  footer {
    --bs-footer-bg: #181a1c;
    --bs-footer-color: #aaa;
  }

  .table-secondary {
    --bs-table-color: #fff;
    --bs-table-bg: #21252F;
    --bs-table-border-color: #454d54;
  }

  --bs-form-bg: #1f1f1f;

  --bs-gradient-color-1: #072a4f;
  --bs-gradient-color-2: #2a003f;
  --bs-gradient-color-3: #400040;
  --bs-gradient-color-4: #000000;
}

* {
  scrollbar-width: thin;

  &.scrollbar-hidden {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;

  .scrollbar-hidden & {
    display: none !important;
  }
}

::-webkit-scrollbar-button {
  display: none !important;
}

.h-dvh-100 {
  height: 100dvh;
}

.highlight {
  padding: 0 !important;
  background-color: var(--bs-orange) !important;
  color: var(--bs-white) !important;
}

.table-primary {
  --bs-table-color: var(--bs-white);
  --bs-table-bg: var(--bs-primary);
  --bs-table-border-color: var(--bs-white);
  --bs-table-striped-bg: var(--bs-primary);
  --bs-table-striped-color: var(--bs-white);
  --bs-table-active-bg: var(--bs-primary);
  --bs-table-active-color: var(--bs-white);
  --bs-table-hover-bg: var(--bs-primary);
  --bs-table-hover-color: var(--bs-white);
  border-color: var(--bs-border-color);
}

.table-orange {
  --bs-table-color: var(--bs-white);
  --bs-table-bg: var(--bs-orange);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-orange);
  --bs-table-striped-color: var(--bs-white);
  --bs-table-active-bg: var(--bs-orange);
  --bs-table-active-color: var(--bs-white);
  --bs-table-hover-bg: var(--bs-orange);
  --bs-table-hover-color: var(--bs-white);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-wrapper {
  border: 1px solid var(--bs-border-color);
  border-bottom: none;
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  width: 100%;
}

.row [class*="col-"] {
  &:not(:has(> .row)) {
    margin-bottom: 1rem;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.link:hover i,
.btn:hover i,
.pointer:hover i {
  opacity: 1;
}

.link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  color: inherit;
  text-decoration: none;

  &.disabled {
    pointer-events: none !important;
    cursor: default !important;
    color: var(--bs-secondary-bg) !important;
  }
}

.link:hover {
  color: var(--bs-orange);

  &.important {
    filter: brightness(70%) !important;
  }
}

.link:hover i {
  color: var(--bs-body-color);
}

.tree {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;

  .tree-label {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .children {
    padding-left: 0;
    border-left: 1px dashed var(--bs-border-color);
    margin-left: 1.5rem;
    overflow: hidden;
  }
}

.help {
  cursor: help;
}

.grab {
  cursor: grab;
}

.grabbing {
  cursor: grabbing;
}

.pointer {
  cursor: pointer;
}

.bg-form {
  background-color: var(--bs-form-bg) !important;
}

.bg-red {
  background-color: var(--bs-red) !important;
}

.bg-orange {
  background-color: var(--bs-orange) !important;
}

.bg-yellow {
  background-color: var(--bs-yellow) !important;
}

.bg-green {
  background-color: var(--bs-green) !important;
}

.bg-blue {
  background-color: var(--bs-blue) !important;
}

.bg-purple {
  background-color: var(--bs-purple) !important;
}

.bg-gradient-flux {
  background: linear-gradient(45deg,
  var(--bs-gradient-color-1),
  var(--bs-gradient-color-2),
  var(--bs-gradient-color-3),
  var(--bs-gradient-color-4)
  );
  background-size: 400% 400% !important;
  animation: gradient-breathe-flow 30s linear infinite;
}

.bg-gradient-aura {
  background: linear-gradient(135deg,
  var(--bs-gradient-color-1),
  var(--bs-gradient-color-2),
  var(--bs-gradient-color-3),
  var(--bs-gradient-color-4)
  );
  background-size: 600% 600%;
  animation: gradient-aura-flow 40s ease-in-out infinite;
}

.bg-gradient-wave {
  background: linear-gradient(270deg,
  var(--bs-gradient-color-1),
  var(--bs-gradient-color-2),
  var(--bs-gradient-color-3),
  var(--bs-gradient-color-4)
  );
  background-size: 800% 800%;
  animation: gradient-wave-flow 20s ease-in-out infinite;
}

.bg-gradient-breathe {
  background: radial-gradient(circle at top left,
  var(--bs-gradient-color-1),
  var(--bs-gradient-color-2),
  var(--bs-gradient-color-3),
  var(--bs-gradient-color-4)
  );
  background-size: 400% 400%;
  animation: gradient-breathe-flow 35s ease-in-out infinite;
}

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

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

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

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

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

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

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

.fv-small-caps {
  font-variant: small-caps;
}

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

.d-box {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
}

.text-break-spaces {
  white-space: break-spaces;
}

.text-break-all {
  word-break: break-all;
}

.text-break-word {
  word-break: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

.w-fit-content {
  width: fit-content;
}

.rotate-90 {
  rotate: 90deg;
}

.rotate-180 {
  rotate: 180deg;
}

.rotate-270 {
  rotate: 270deg;
}

.flip {
  transform: scaleX(-1);
}

.text-stroke {
  -webkit-text-stroke: 1px var(--bs-body-color);
}

.text-stroke-white {
  -webkit-text-stroke: 1px var(--bs-white);
}

.text-stroke-black {
  -webkit-text-stroke: 1px var(--bs-black);
}

.border-start-5 {
  border-left-width: 5px !important;
}

.list-row,
.list-column {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-row {
  flex-direction: row;
  align-items: center;

  .has-icon {
    display: flex;
    align-items: center;

    &::after {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 1em;
      line-height: 1;
      margin-left: 1rem;
      vertical-align: middle;
    }

    &.icon-solidus::after {
      content: "\002F";
    }

    &.icon-dot::after {
      content: "\2022";
    }

    &:last-child::after {
      content: none;
    }
  }
}

.list-column {
  flex-direction: column;

  .has-icon {
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      margin-right: 1rem;
      line-height: 1;
      vertical-align: middle;
    }

    &.icon-dot::before {
      content: "\2022";
    }

    &.icon-solidus::before {
      content: "\002F";
    }

    &.icon-green::before {
      color: var(--bs-green);
    }

    &:first-child::before {
      content: '';
      margin: 0;
    }
  }
}

.list-row-reverse {
  flex-direction: row-reverse;
}

.row.no-gutter {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.row.no-gutter,
.row.no-gutter > * {
  margin: 0 !important;
  padding: 0 !important;
}


@media screen and (min-width: 576px) {
  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 768px) {
  .d-md-box {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }

  .border-md-start {
    border-left: 1px solid var(--bs-border-color);
  }

  .border-md-end {
    border-right: 1px solid var(--bs-border-color);
  }

  .flex-md-fill {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }

  .align-md-content-start {
    align-content: flex-start;
    flex-grow: 1;
    min-height: 0;
  }

  .grid-cols-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 992px) {
  .grid-cols-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}