/*
 * A wide table's scrollbar, held at the bottom of the screen while the table's own is
 * out of sight (sticky-hscroll.js). Placed and sized by the script; only its look here.
 */
.hsbar {
  position: fixed;
  z-index: 40;
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(247, 249, 253, .96);
  border-top: 1px solid #dbe3f2;
  box-shadow: 0 -2px 6px rgba(20, 48, 107, .08);
  -webkit-overflow-scrolling: touch;
}

.hsbar[hidden] {
  display: none;
}

.hsbar__inner {
  height: 1px;
}

/* A scrollbar that can be seen and grabbed, where the system draws a thin one. */
.hsbar::-webkit-scrollbar {
  height: 12px;
}

.hsbar::-webkit-scrollbar-track {
  background: transparent;
}

.hsbar::-webkit-scrollbar-thumb {
  background: #b6c2d6;
  border-radius: 6px;
  border: 2px solid rgba(247, 249, 253, .96);
}

.hsbar::-webkit-scrollbar-thumb:hover {
  background: #8f9fbb;
}

@media (max-width: 768px) {
  .hsbar {
    height: 12px;
  }
}

@media print {
  .hsbar {
    display: none !important;
  }
}