:root {
  --main-color: #971eb6;
  --main-color-hover: #8a16a8;
  --main-color-hover-border: #79159b;
  --main-color-active: #79159b;
  --main-color-active-border: #6d148d;
}

* {
  font-family: "Inter", sans-serif;
}

body[environment="development"] {
  --main-color: rgb(36, 138, 61);
  --main-color-hover: rgb(29, 112, 50);
  --main-color-hover-border: rgb(29, 112, 50);
  --main-color-border: rgb(29, 112, 50);
  --main-color-active: rgb(29, 112, 50);
}

html {
  background: white;
  min-height: 100%;
}

body {
  background-color: transparent !important;
}

.btn-primary {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: var(--main-color) !important;
  --bs-btn-border-color: var(--main-color) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--main-color-hover) !important;
  --bs-btn-hover-border-color: var(--main-color-hover-border) !important;
  --bs-btn-focus-shadow-rgb: 49, 30, 182 !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--main-color-active) !important;
  --bs-btn-active-border-color: var(--main-color-active-border) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: #fff !important;
  --bs-btn-disabled-bg: var(--main-color) !important;
  --bs-btn-disabled-border-color: var(--main-color) !important;
}

.page-item.active .page-link {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: white !important;
}

.page-link {
  color: var(--main-color) !important;
}

table {
  font-variant-numeric: tabular-nums !important;
}

table[showing-pagination="false"] {
  margin-bottom: 300px !important;
}

thead,
tbody {
  background-color: var(--bs-table-bg);
}

.pagination-bottom-container {
  margin-bottom: 300px;
}

.sr-only {
  display: none;
}

.custom-header-button {
  box-sizing: border-box;
  height: max-content;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.customPageHeader {
  top: 0;
  padding-top: 1rem;
  position: sticky;
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
}

.scrolling {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
}

.w-mc {
  width: max-content;
}

.buttonAsLink {
  color: white;
  text-decoration: underline;
}

.highlight {
  background-color: rgb(255, 149, 0);
  border-radius: 3px;
  transition: background-color 150ms ease-in-out;
}