/* Small additions on top of Bootstrap to match PrairieLearn's look. */

body { background: var(--bs-body-bg); }
main { max-width: 1400px; }

.breadcrumb { font-size: .9rem; }

/* Score bar: green fill with the percent inside, or beside it when the bar is short. */
.scorebar { position: relative; min-width: 5em; height: 1.1rem; border: 1px solid var(--bs-success); }
.scorebar .progress-bar { font-size: .75rem; }
.scorebar-out { position: absolute; left: .4em; top: 50%; transform: translateY(-50%); font-size: .75rem; }

/* Answer inputs keep a sensible width instead of stretching across the card. */
.pl-input { max-width: 28rem; }
.pl-input .input-group-text .badge { font-size: .8rem; }

/* Matrix input: a grid of small boxes between bracket-style borders, like PrairieLearn's matrix element. */
.pl-matrix { border-collapse: separate; border-spacing: 4px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 6px; }
.pl-matrix input { width: 4.5em; text-align: center; }
.pl-matrix-static td { padding: 0 .6em; text-align: center; }

.side-table td:first-child { color: var(--bs-secondary-color); width: 50%; }
.side-table td { padding-left: 1rem; }

pre { background: var(--bs-tertiary-bg); padding: .75rem; border-radius: .375rem; }

@media (max-width: 575.98px) {
  .navbar .nav-link { padding-left: .4rem; padding-right: .4rem; }
}