:root {
  --u-gap-3: 3px;
  --u-gap-5: 5px;
  --u-gap-8: 8px;
  --u-gap-10: 10px;
  --u-color-red: #e74c3c;
  --u-color-red-dark: #ff8a80;
  --u-color-blue: #1f6feb;
  --u-color-blue-dark: #8ab4f8;
  --u-color-green: rgb(151 215 110);
  --u-color-green-dark: #9be28f;
  --u-color-gray: #666;
  --u-color-gray-dark: #aaa;
  --u-color-gold: #dcb300;
  --u-color-olive: #687d23;
  --u-color-olive-dark: #9fb640;
}

/* layout helpers */
.u-flex {
  display: flex !important;
}

.u-inline-flex {
  display: inline-flex !important;
}

.u-flex-1 {
  flex: 1 1 0% !important;
}

.u-flex-wrap {
  flex-wrap: wrap !important;
}

.u-justify-end {
  justify-content: flex-end !important;
}

.u-justify-between {
  justify-content: space-between !important;
}

.u-justify-center {
  justify-content: center !important;
}

.u-align-center {
  align-items: center !important;
}

.u-gap-3 {
  gap: var(--u-gap-3) !important;
}

.u-gap-4 {
  gap: 4px !important;
}

.u-gap-5 {
  gap: var(--u-gap-5) !important;
}

.u-gap-8 {
  gap: var(--u-gap-8) !important;
}

.u-gap-10 {
  gap: var(--u-gap-10) !important;
}

/* sizing helpers */
.u-w-100 {
  width: 100px !important;
}

.u-w-150 {
  width: 150px !important;
}

.u-w-200 {
  width: 200px !important;
}

.u-w-300 {
  width: 300px !important;
}

.u-w-320 {
  width: 320px !important;
}

.u-w-20p {
  width: 20% !important;
}

.u-w-25p {
  width: 25% !important;
}

.u-w-5p {
  width: 5% !important;
}

.u-w-6p {
  width: 6% !important;
}

.u-w-100p {
  width: 100% !important;
}

.u-h-100 {
  height: 100px !important;
}

.u-h-120 {
  height: 120px !important;
}

/* typography */
.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-fw-bold {
  font-weight: 700 !important;
}

.u-fw-semibold {
  font-weight: 600 !important;
}

.u-fw-light {
  font-weight: 300 !important;
}

.u-line-height-24 {
  line-height: 24px !important;
}

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

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

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

.u-text-gray {
  color: var(--u-color-gray) !important;
}

.u-text-gold {
  color: var(--u-color-gold) !important;
}

.u-text-olive {
  color: var(--u-color-olive) !important;
}

/* spacing helpers */
.u-mt-4 {
  margin-top: 4px !important;
}

.u-ml-15 {
  margin-left: 15px !important;
}

/* backgrounds */
.u-bg-soft-blue {
  background-color: rgb(212 220 255) !important;
}

.u-display-masonry {
  display: masonry !important;
}

/* dark mode overrides */
.dark .u-text-red {
  color: var(--u-color-red-dark) !important;
}

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

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

.dark .u-text-gray {
  color: var(--u-color-gray-dark) !important;
}

.dark .u-text-olive {
  color: var(--u-color-olive-dark) !important;
}

/* shared view patterns */
.search_wrapper {
  padding: 12px;
}

.page {
  width: 50px;
  border: 0;
  border-bottom: 1px solid var(--pagination-accent);
  background: transparent;
  color: inherit;
  text-align: center;
  box-sizing: border-box;
}

.page_box * {
  box-sizing: border-box;
}

.page_box {
  line-height: 18px;
}

.page_box a {
  user-select: none;
}

.queue_bg_gray {
  background-color: var(--queue-gray-bg) !important;
}

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

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

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

.queue_name_bold {
  font-weight: 700;
}

.tab_on {
  display: block;
}

.tab_off {
  display: none;
}

.red_star {
  color: red;
}

.dist_box {
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid burlywood;
  width: fit-content;
}

.dist_box_item {
  margin-top: 5px;
  width: 340px;
  display: flex;
}

/* component specific helpers */
.class-tree .p-treetable-thead > tr > th:nth-child(1),
.class-tree .p-treetable-tbody > tr > td:nth-child(1) {
  width: 25% !important;
}

.class-tree .p-treetable-thead > tr > th:nth-child(2),
.class-tree .p-treetable-tbody > tr > td:nth-child(2) {
  width: 5% !important;
}

.class-tree .p-treetable-thead > tr > th:nth-child(3),
.class-tree .p-treetable-tbody > tr > td:nth-child(3) {
  width: 6% !important;
}