:root {
  --bs-primary: #9c2227;
  --bs-secondary: #6c757d;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #721c21;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;

  --gray-dark: #777;
  --gray-light: #bbb;
}

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

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

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

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

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

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

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

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

.text-primary {
  color: var(--bs-primary) !important;
}
.text-secondary {
  color: var(--bs-secondary) !important;
}
.text-success {
  color: var(--bs-success) !important;
}
.text-info {
  color: var(--bs-info) !important;
}
.text-warning {
  color: var(--bs-warning) !important;
}
.text-danger {
  color: var(--bs-danger) !important;
}
.text-light {
  color: var(--bs-light) !important;
}
.text-dark {
  color: var(--bs-dark) !important;
}
.btn {
  border: none;
}

.page-link {
  background-color: var(--gray-dark);
  color: white;
  border-color: var(--gray-dark) !important;

  &:hover {
    background-color: var(--gray-dark);
    color: white;
  }
}

.active {
  .page-link {
    background-color: var(--bs-danger) !important;
    color: white;
    border-color: var(--bs-danger) !important;

    &:hover {
      background-color: var(--gray-danger);
      color: white;
      cursor: pointer;
    }
  }
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary);
}

.table {
  td {
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 300;
    vertical-align: middle;
  }

  th {
    color: var(--bs-secondary);
    font-weight: 400;
    vertical-align: middle;
  }
}