.queue-board[data-loading="true"] {
  display: block;
  min-height: 8rem;
  position: relative;
}

.panel-loading {
  align-items: center;
  color: #9fb0c7;
  display: flex;
  gap: .6rem;
  justify-content: center;
  min-height: 8rem;
}

.panel-loading[hidden] { display: none !important; }

.loading-spinner {
  animation: spin .7s linear infinite;
  border: .13rem solid #52718f;
  border-radius: 50%;
  border-top-color: #7dd3fc;
  display: inline-block;
  height: .85rem;
  vertical-align: -.1rem;
  width: .85rem;
}

.usage-panel[data-loading="true"] > .panel-heading,
.trace-panel[data-loading="true"] > .panel-heading {
  cursor: wait;
}

@keyframes spin {
  to { transform: rotate(1turn); }
}

.pickup {
  background: #155e75;
  color: #d9f9ff;
}

.queue-pages {
  align-items: center;
  border-top: 1px solid #294562;
  color: #9fb0c7;
  display: flex;
  font-size: .82rem;
  gap: .5rem;
  justify-content: space-between;
  margin-top: .75rem;
  padding-top: .75rem;
}

.queue-pages button {
  background: #132b45;
  border: 1px solid #456483;
  border-radius: .4rem;
  color: #d8e7f8;
  padding: .3rem .5rem;
}

.queue-pages button:disabled {
  cursor: not-allowed;
  opacity: .45;
}