:root {
  // base color e.g. #17541f = hsl(128, 57%, 21%)
  --ngx-green: 128, 57%;
  --l:21%;

  --bs-primary: hsl(var(--ngx-green),var(--l));
  --bs-primary-rgb: rgba(hsl(var(--ngx-green), var(--l)));
  --ngx-primary-faded: #d1ddd2;
  --ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%));
  --ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%));
  --ngx-primary-darken-10: hsl(var(--ngx-green), calc(var(--l) - 10%));
  --ngx-primary-darken-15: hsl(var(--ngx-green), calc(var(--l) - 15%));
  --ngx-primary-darken-25: hsl(var(--ngx-green), calc(var(--l) - 25%));
}

svg.logo {
  .logo {
    fill: var(--bs-primary) !important;
  }
  .text {
    fill: var(--bs-body-color) !important;
  }
}

.nav-link, .list-group-item {
  color: var(--bs-body-color);
}

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

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

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

  &:disabled, &.disabled {
    background-color: var(--ngx-primary-darken-10) !important;
    border-color: var(--ngx-primary-darken-10) !important;
  }
}

.btn-primary:hover {
  background-color: var(--ngx-primary-darken-10);
  border-color: var(--ngx-primary-darken-10);
}

.btn-outline-primary {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;

  &:hover, &:focus, &.active, &:active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-body-color) !important;
  }
}

.dropdown.show {
  > .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }

  > .btn-outline-primary {
    color: var(--bs-body-color) !important;
  }
}

a, a:hover, .btn-link, .btn-link:hover {
  color: var(--bs-primary);
}

.form-control:not(.btn),
input,
select,
textarea,
.form-select:not(.is-invalid):not(:disabled),
.form-check-input {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);

  &:focus {
    background-color: var(--ngx-bg-color-darker);
    color: var(--bs-body-color) !important;
  }
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.page-link {
  color: var(--bs-primary);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color) !important;

  &:hover, &:focus {
    background-color: var(--bs-primary) !important;
    color: var(--bs-body-color) !important;
  }
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  color: var(--bs-body-color);
}

.page-item.disabled .page-link {
  background-color: var(--ngx-primary-darken-15);
}

.nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);

  .nav-link {
    color: var(--bs-primary);

    &.active, &:hover {
      border-color: var(--bs-border-color);
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
      border-bottom: 1px solid transparent;
    }
  }
}

.ng-select-container,
.ng-select.ng-select-opened > .ng-select-container,
.ng-dropdown-panel,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;

  input:focus {
    background-color: transparent !important;
  }
}

.input-group-text {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

.list-group-item {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);

  &:hover {
    background-color: var(--bs-body-bg);
  }
}

.dropdown-menu {
  background-color: var(--bs-body-bg);

  .dropdown-divider {
    border-color: var(--bs-border-color);
  }

  .dropdown-item {
    color: var(--bs-body-color);

    &:hover {
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
    }
  }
}

table.table {
  color: var(--bs-body-color);

  .des,.asc {
    background-color: var(--bs-body-bg) !important;
  }
}

.close {
  color: var(--bs-body-color);
}

.modal .btn-close {
  color: var(--bs-body-color);
}

.ngx-file-drop__drop-zone--over {
  background-color: var(--ngx-primary-darken-25)
}